Deploy on Netlify

Create the Project

Access your Netlify account at app.netlify.com

Click on the "Add new site" button, then "Import existing project". Authenticate to your Git provider and select the repository you created for this tutorial.

On the "Deploy settings" screen, leave all the default options for a Next.js project, but click on "Show advanced" and use the "Add variable" button to add the two environment variables that you can find in your project .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 site" button.

You will see "Site deploy in progress". Netlify will fetch the code from the Git repository and will start the build process. As soon as it finishes, you will see a green URL assigned by Netlify:

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

Set up a build hook

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

Click on "Site configuration", then "Build & deploy" from the left sidebar. Scroll down to "Build Hooks". Click on "Add build hook".

Give a name to your hook, set the branch to "main" and click on "Save". Then copy the URL Netlify 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 Netlify.

You are great! You just published your React Bricks app on Netlify!