Watch our CTO's talk at ReactJsDay »
Watch now

Deploy on Vercel

Create the Project

Access your Vercel account at Vercel.com

Click on the "Add new Project" button, then navigate to the "Import Git Repository" section. ere, authenticate with your Git provider, select the repository you created for this tutorial, and click the "Import" button.

On the "Import project" page, leave all the default options for a Next.js project. However, expand the "Environment Variables" sectionand add the two variables found in your project's .env file.

  • API_KEY is the secret key to access your content from the React Bricks APIs.
  • NEXT_PUBLIC_APP_ID is a string that identifies your app. It is prefixed by "NEXT_PUBLIC" to ensure its accessibility by the client (browser) app. The Admin interface uses it to log you into the correct app.
Environment variables on Vercel

Now, click the "Deploy" button.

Vercel will fetch the code from the Git repository and will start the build process. As soon as it finishes, you should see something like this:

React Bricks deployed on Vercel

Congratulations! Your React Bricks website is up and running! 🎉🍻

Set up a deploy hook

Vercel automatically rebuilds your website whenever new commits are pushed to your Git repository. However, it's also useful to rebuild the site when content updates occur.

To accomplish this, create a build hook on Vercel and enter it into the React Bricks app settings. This will cause a "Deploy Now" button to be active in the React Bricks “Settings” tab, enabling users to trigger a website rebuild whenever they update content.

In the Vercel dashboard, click on "Settings" then on "Git". Scroll down to "Deploy Hooks".

Vercel deploy hook for React Bricks

Give a name to your hook, set the branch to "main" and click on "Create hook". Then copy the URL Vercel creates for your hook.

Go to your React Bricks /admin folder (either local or the newly published one on Vercel) and click on the "App Settings" tab then on the "Deploy Hooks" button.

Save deploy hook to React bricks App settings

From the Dashboard, paste the deploy hook in the "Hook URL" field and click "Save".

Save deploy hook to React bricks App settings

Now, you'll notice that the "Deploy to Production" button on the App Settings tab of React Bricks is active

Click it and verify that it triggers a rebuild process on Vercel.

You are great! You just published your first React Bricks app on Vercel!

# Time to get points

What configuration setting is needed on the Vercel project?