Skip to content
+

Deploy to Render

You can host and share your Toolpad Studio apps on Render in a few minutes, for free.

Prerequisites

Pushing your Toolpad Studio app to GitHub

  1. With a GitHub account, you can create a new repository using the + button available in the header menu, followed by New repository. Then, select an appropriate name:
GitHub new repo

Creating a new GitHub repository

  1. If the Toolpad Studio app is not currently a Git repository, you can run

    git init
    

    to initialise it.

  2. You can set the newly created repository on GitHub as the remote for your locally running Toolpad Studio app, using:

    git remote add origin <REPOSITORY-URL>
    

    Replace <REPOSITORY-URL> with the URL of the repository you just created on GitHub.

  3. Once you are done making changes to your Toolpad Studio app, verify that you are on the main branch, commit these changes and push them to GitHub.

    git add .
    git commit -m "pushing a new version"
    git push origin main
    

Creating a new app on Render

  1. With a Render account, you can create a new Web Service:
Render new web service

Creating a new Render Web Service

  1. Depending on whether the visibility of the GitHub repository is set to private or public, you need to either connect your GitHub account to Render, or paste in the URL of the repository you created above:
GitHub new repo

Connecting GitHub to Render

  1. If using a private repository, you need to search for and select the repository you intend to deploy once connected to GitHub:
GitHub repo on Render

Connecting your GitHub repository

  1. With the repository selected, you can advance to deployment configuration. Render can guess that you are deploying a Node app. Set the name which should appear in the URL of your deployed app, like <APP-NAME>.onrender.com:
Render deployment config

Setting the deployment configuration

  1. The build and start commands are set to

    $ yarn; yarn build
    $ yarn start
    

    by default. You can leave this unchanged.

  2. Select an appropriate instance type for your deployment.

Render deployment commands and plan

Setting deployment commands and choosing an instance type

  1. Select Create Web Service to trigger the deployment and it redirects you to the streaming logs of the in-progress deployment.

  2. Render.com uses 14.7.0 as the default Node version. Toolpad Studio requires version 18.17.1 as the minimum Node version. You can change the default by setting a NODE_VERSION environment variable for your deployment:

Set NODE_VERSION

Overriding the default Node version

  1. Once this is successfully complete, you can access your Toolpad Studio app on <APP-NAME>.onrender.com.
Render deployment complete

Deployed successfully

That's it! We're up and running in a few minutes.

Make changes, push to GitHub, and your app automatically redeploys each time. You may deploy to any other hosting provider of your choice as well.

Check out the Render documentation for more advanced settings, like adding environment variables to your app.