“The future of coding is no coding at all” says the founder of github. I am not sure if this is exactly how he quotes it but sometimes in the near future we might not have to write code for building our dream apps. And maybe the time is now. Tooljet is an open source low-code framework to build & deploy internal tools within minutes. In this article, we would go through a step-by-step guide on how to configure and deploy the Tooljet client on netlify.

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, and prebuilt UI components and is also responsive( that is adjusted to both mobile and desktop screens). With Tooljet you can integrate your apps with data sources like; databases, data lakes, SaaS tools, cloud storage, API endpoints, and GraphQL endpoints and take actions with those data.

TOOLJET’S ARCHITECTURE

Tooljet consists of two main components: Tooljet server and Tooljet client

Tooljet server is our backend/server-side, it is a NodeJS API application and it is responsible for the following:

Authentication
Authorization
persisting application definitions,
running queries,
storing data source credentials securely and more.

Tooljet client is our client-side/frontend, it is a React application and is responsible for visually editing the applications, building & editing queries, rendering applications, executing events and their triggers, etc.

Just think of the Tooljet server as the powerhouse or the grid while the client is the control panel and power outlets that let people use electricity.

Configure and deploy Tooljet client on Netlify

Now we are going to configure and deploy our client on netlify.

Prerequisites

A GitHub account ( sign up here)
A netlify account (sign up here)

Step 1: Fork Tooljet official repository

Before we configure our client, we have to fork the repository/project; the reason why we are forking it is that we are going to be deploying it individually to our netlify account, and forking it allows us to make changes and deploy those branches without affecting the real project.

Let's now proceed to fork the repository listed below.

https://github.com/netlify-tj/ToolJet

To fork, this repo select and click on the fork button situated at the top-right of the page: in between the watch and star buttons. When you click on the fork button, you see a page like this

Now click create fork and voilà, you've successfully forked the repository.

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

Step 2: Import our repo to Netlify

After forking the repo, we can import the project to netlify to deploy. Make sure you have signed up for an account. Then, in a new tab, navigate to netlify.com. Once you've done that, you should see something like this.

** \n

\n **Click on the login button on the top-left of your screen, it will automatically sign in you to your account and you should be on a domain like this

https://app.netlify.com/teams//overview

After you've done that, your final page should look like this.

We have signed in netlify, now we can add our site. Click on the Add new sitebutton, the one circled in red in the above image. You will see a dropdown with three options; select Import an existing project because we have already cloned and deployed all of the Tooljet code on our own personal repository; all we need to do now is configure it to our specifications and deploy it. . ** \n \n

**To import our project from Github, click the GitHub button. If you've never used netlify before, you'll need to give it permission to access your Github repositories. You should then get a page like this; simply click the authorize netlify button to continue to next step.

You should be on this page after authorizing netlify to access your repository.

To find tooljet, use the right-hand search box ( or if you renamed the repo when you forked it, type the name). You can see that I have one result, tooljet, and if you click on it, you will be taken to the final stage of deployment.

Step 3: Configuring Tooljet and deploying

Finally, we're going to configure and deploy our application.

** \n

**This is where we'll fix and update the configuration before moving on to the deployment stage.

Here are a few things we'd be changing and taking notes on.

Branch to deploy : The branch we’re deploying is feature-2991/relabelling, click on the input and type the name of the branch
Base directory: We already changed the base directory in our netlify.toml file, thus there's no need to do it again.
Build command: We've already created a "netlify.toml" file in the root directory of our project, which netlify uses to pick the configuration and apply it automatically, eliminating the need for us to write manual build commands.
Publish directory: This is where our site will be deployed after running the build command; the path should be frontend/build/, as specified in the configuration file.

The final configuration step is to give the server a URL. Remember that Tooljet is made up of two components (the server and the client), and we're going to deploy it as a standalone client application, which implies we'll need a server running somewhere. Don't worry, you won't have to set up a server on your own. I've set up a server using the Heroku platform, so you can use that too for testing purpose only.

Click on the Show advance button on that page, find the image above ( the button circled in red ).

Break out: We are not going to be doing a lot of configuration because we already have a netlify.toml file in the root of the repo. You can create a branch to change the netlify.toml to your own preferences but I think that wouldn't be necessary. It is also important to take note that the tooljet client cannot work without a server, but in this guide, I have deployed a server on Heroku already so that's what we are going to be using.

Let’s continue!

Click on the new variable button to add our tooljet url

Key is TOOLJET_SERVER_URL

Value is https://aviyel-tooljet.herokuapp.com

We have something that looks like this then

Now we can deploy our site, scroll to the bottom a bit and click on deploy site button. Our site should take about 10 mins to deploy.

Step 4: Deploy the client/frontend

When you click on the deploy button you should be on a page like this, you can see that our deployment has started and it would take some time as I mentioned earlier.

When you scroll down you’ll find a CTA where you can view your deploy log to see the process of deployment and in case of any error, you can use the logs to solve the issue faced during the deployment process.

Click on the arrow in the circle area to view your deploy logs. You can choose to watch the deploy logs, play a game( click the circled button) or read the tooljet docs or you can grab a drink and just relax.

Note: The URL of your site would be different from the one in this article

Boom! The deployment process has been completed ( It Took me about 8 mins ). Now let us see if our frontend client is deployed correctly or not, click on the open published deploy button to see your deployed site.

Here's a link to my deployed site

https://visionary-brioche-a7c71d.netlify.app/** \n **

If you are on a page like this, you have successfully deployed the tooljet client, you can log in with the default email and password to see what the interface looks like.

The default credentials of the admin is:

Username:

dev@tooljet.io

Password:

password

You should see something similar to this webpage after logging in using the credentials specified above.

You are free to test and build sample apps, and tutorials are freely available in the official tooljet documentation.

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 netlify
Configured our tooljet site
Deployed the client
We logged in 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 Netlify?