SolidJS Setup in AdonisJS


This blog post shows how to integrate SolidJS frontend library with AdonisJS backend framework.

solidjs and adonisjs

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.

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.

solidjs and adonisjshow to use solidjs in adonisadonisjs 5 with solidjs