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.

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:

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".

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.

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

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!