What is Tooljet?

Tooljet is an Extensible low-code framework for building business applications. Tooljet is an open-source low-code framework to build and deploy internal tools, Tooljet makes it easy and fast to build tools specific to your team and businesses.

Tooljet allows you to build your apps with a drag and drop application builder, prebuilt UI components and also responsive( that is adjust to both mobile and desktop screens). With Tooljet you can integrate your apps with data sources like; databases, data lakes, SaaS tools, cloud storages, API endpoints and GraphQL endpoints and take actions with those data

Tooljet consists of two main components:

Tooljet server
Tooljet client.

The tooljet client or frontend is a React application and is responsible for visually editing the applications, building & editing queries, rendering applications, executing events and their triggers, etc.

The tooljet server is a NodeJS API application and it is responsible for authorization, authentication, persisting application definitions, running queries and storing data source credentials securely, and more, etc. The Tooljet client is powered by the tooljet server, which houses the engine that allows us to create no-code applications.

Configure and deploy Tooljet client on Vercel

We are a going to be following a series of steps to configure and deploy tooljet client on vercel.

To follow this tutorial step by step, you should have a GitHub account and vercel account, it is free; click on the links below to create an account if you have not.

Step 1: Fork repository

Tooljet is an open-source project so the code is public and hosted on GitHub. So we are going to be forking the repo first, so that we will be able to tweak the forked version and deploy it to vercel without making changes to the original version.

Lets get started and fork this repo

Navigate to the link above and click on the fork button, you see a page which looks something like this

Click on the create fork and we have successfully forked the repo.

Note: The meaning of fork is just another version of an existing software/code/project, a spin-off.

Step 2: Import our repo to vercel

After forking the repo, we can import the project to vercel to deploy. Make sure you have signed up for an account. Navigate to vercel.com on your browser on a new tab. You should see a page like this:

Click on the login button on the top-left of your screen, then you should see a page with different login options like this

I'll use the GitHub login option; click the GitHub icon and you'll be taken to a window that looks like this, prompting you to authorize the GitHub account.

Click on the authorize vercel button and then we are logged in to vercel. You should be on a page with URL https://vercel.com/dashboard and it should look something like this:

We have signed in vercel, now we can add our site. Click on the New project button, the one circled in red in the above image. You will be taken to a page with URL https://vercel.com/new

If your vercel has not been installed on your GitHub, you will see a page like this, click on the add github button and follow the prompt. You would be redirected back to this page but now with a list of all your repositories.

On that particular page, click on the search box and search for tooljet or whatever name you named it while forking it, you can see I have tooljet in the list. Click on import to bring your project to vercel.

Step 3: Configuring Tooljet and deploying

Now we are going to configure our project and deploy it.

This is where we are doing our configuration, name your project whatever you want, then let's scroll down a bit, you will see a build and output settings dropdown, and click on it.

Now type the exact following command/build-script to override the default.

Build command

npm run build:plugins && npm run build:frontend

Output directory

frontend/build/

Install command can be blank or you can override it with following command:

npm install

For the environment variable section, these are the following key and values

TOOLJET_SERVER_URL = https://tooljet-vercel.herokuapp.com : This indicates the URL of the server, remember we deployed the server separately on Heroku platform. ( If you want to follow along, here's a guide for it )

NPM_VERSION = 7.20.0 : version of npm we want to use

NODE_VERSION = 14.17.3 : version of the node we want to use

NODE_ENV = production : environment we are deploying to

statusCode = 200 our status code

source = /* redirect option

destination = / redirect option

After adding the variables, click on the deploy button to deploy our app, this will take a few minutes depending on your internet bandwidth and cpu’s power. It is important to note that these environment variables are not optional, but essential in the deployment of our client, some environmental variables may use the default value in the code if they are not set by the user( in this case the person deploying the app).

While the deployment process is going on, you can read the build logs or head over to the official tooljet documentation

When your app is ready you will see a visit button to view your app at the left top of your page. Click on the button and it will open our deployed tooljet client in a new page.

https://tooljet-vercel-1t16cvx9j-blazing-mike.vercel.app/

We are going to use the default credentials to sign-in for testing purposes

Email address :

dev@tooljet.io

Password:

password

Enter these credentials to login and you will see a page like this, you can click on create a new application button to create a new app, or import apps. The tooljet official documentation and blog are useful resources to learn more about tooljet.

Conclusion

We have successfully configured and deployed tooljet on netlify. Here is a summary of what we did.

Forked Tooljet repo
Imported our site/repo to vercel
Configured our tooljet site
Deployed the client
We logged in to the site with the default password ( you take it from here).

You can check out official tooljet documentation for more in-depth guides, you can also join slack channel xn--to -xdainteract with the community and ask questions.

How to configure and deploy ToolJet client on Vercel?