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.
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.
Also, if you don't have any SolidJS experience before, I suggest reading SolidJS and Reactive Primitives.
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.
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
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.
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.