This blog post shows how to integrate SolidJS frontend library with AdonisJS backend framework. This will be a relatively short article. I think AdonisJS - SolidJS would be my favorite web development stack.
Introduction
AdonisJS is a fully-featured Node.js framework. It follows the Model-View-Controller (MVC) pattern and has its own template engine, Object-Relational-Mapper (ORM), authorization, and authentication modules. I also wrote a post about AdonisJS and Tailwind CSS before.
On the other hand, SolidJS is a declarative, efficient, and flexible frontend library. Moreover, SolidJS is truly a reactive JavaScript library, unlike ReactJS. If you have developed a frontend application with React, you'll definitely love SolidJS.
Also, if you don't have any SolidJS experience before, I suggest reading SolidJS and Reactive Primitives.
AdonisJS Setup
We need to install AdonisJS 5 because our SolidJS application will be built on it.
I'm going to choose web
as the project type.
After choosing the project type, other customization options will be appeared. Setting up Eslint totally up to you. However, you should enable Webpack Encore. Otherwise, your frontend assets will not be compiled.
Let change the current directory to the project directory.
SolidJS Setup
Installing SolidJS on an AdonisJS app alone is not enough because it uses JSX syntax. Therefore, we need to install babel-preset-solid
babel plugin as a development dependency.
We need to add the code below to webpack.config.js
file.
AdonisJS uses Edge template engine. By default, the resources/views/welcome.edge
is the default view for the homepage. As you know, it can be changed from start/routes.ts
file. However, we need to modify the welcome.edge
file so that we can render our Solid application inside the correct DOM element.
Open your main JavaScript file: resources/js/app.js
and fill it like below:
You'll easily notice the different styling syntax comparing to React. You can see other styling syntax in SolidJS.
Now you can start the app by executing the command below. Then you will see a timer on your screen.