Build a Starter Website Using React.js and Contentstack
This guide will help you create a starter marketing website built using the React.js framework with minimal steps. It uses Contentstack’s Node.js SDK to store and deliver the website content from Contentstack.
Let’s look at the steps to create this starter website using React.js and Contentstack.
- Contentstack account
- Node.js version 16 or later
- Contentstack CLI: npm install -g @contentstack/cli
- Enable Live Preview for your organization
- Management token with read permission
Note: For this tutorial, we assume that you are familiar with Contentstack, React.js, and the Bootstrap plugin in Contentstack CLI. If not, please refer to the React.js and Bootstrap Starter Apps docs for more details.
Set Up Your App
Here is an overview of the steps involved in creating our React.js app:
- Set the Region
- Login to your Account
- Import Content
- Create Delivery Token
- Build and Configure the Website
- Deploy the Website
Set the Region
To use the North America, Europe, Azure North America, or Azure Europe endpoint, run the following command in your terminal (command prompt):
csdx config:set:region <<region>>Note:
- For North American users, set the region as NA.
- For European users, set the region as EU.
- For Azure North American users, set the region as AZURE-NA.
- For Azure European users, set the region as AZURE-EU.
Login to your Account
To import content to your stack, first, you’ll need to log in to your Contentstack account via CLI by running the following command in your terminal:
This command will ask you to provide your Contentstack’s account credentials (email and password).
The seed command lets you import content to your stack in a few steps. To do so, run the following command in your terminal:
csdx cm:stacks:seed --repo "contentstack/stack-starter-app"
This command prompts the following options:
- Organization name: You will get a list of organizations to which you have access. Select the one from the list where your source stack is located or where you want to create a new stack.
- Stack preference: Next, you will get an option to create a new stack or use an existing stack.
- If you select New, you must enter the stack name, and the stack creation process will start.
- If you select Existing, you will get a list of stacks to which you have access in the organization. Choose the destination stack where you want to import the content. If the existing stack has some content, it will ask for a confirmation to continue with the same stack.
Additional Resource: Refer to the Stack Roles documentation to learn more about permissions.
Tip: To avoid the chances of any error, we recommend that you select the option of creating a new destination stack. If you import content to an existing stack, ensure that the stack is empty.
Finally, you will get the content imported to your stack.
Create Delivery Token
A delivery token lets you fetch published content of an environment.
You can create a delivery token for the “development” environment for running the website on localhost. Later, while deploying your site, you can create tokens for other environments.
Build and Configure the Website
Fire up your terminal, navigate to your project folder, and run the following command to create a configuration file named .env.
cp .env.example .env
Note: If you are a Windows user, replace cp with copy in the command given above.
The .env file contains all the necessary config parameters. Open it in any code editor or IDE of your choice, provide your stack credentials as shown below, and save the file.
REACT_APP_CONTENTSTACK_API_KEY=<api_key_of_your_stack> REACT_APP_CONTENTSTACK_DELIVERY_TOKEN=<delivery_token_of_the_environment> REACT_APP_CONTENTSTACK_ENVIRONMENT=<environment_name> # By default branch=main, if a branch is not provided # REACT_APP_CONTENTSTACK_BRANCH=<your_branch_name> # By default region=us, if a region is not provided # REACT_APP_CONTENTSTACK_REGION=<your_region_name>
Mandatory configuration parameters to enable Live Preview
REACT_APP_CONTENTSTACK_MANAGEMENT_TOKEN=<management_token_of_the_environment> REACT_APP_CONTENTSTACK_APP_HOST=app.contentstack.com REACT_APP_CONTENTSTACK_API_HOST=api.contentstack.io REACT_APP_CONTENTSTACK_LIVE_PREVIEW=true #By default the live preview feature is enabled for this project. To disable it, set "REACT_APP_CONTENTSTACK_LIVE_PREVIEW=false". REACT_APP_CONTENTSTACK_LIVE_EDIT_TAGS=false #By default live editing tags are disabled for this project. To enable it, set “REACT_APP_CONTENTSTACK_LIVE_EDIT_TAGS=true”.
Note: Make sure your management token has READ permission only.
Run the following commands to start your website
npm install npm start
You can now view the website at http://localhost:3000. And you also have the stack that has all the content and resources for the website. Try experimenting by creating new entries and publishing on the “development” environment. You should be able to see the changes on the website at the localhost.
Set up Live Preview (Optional)
Note: In order to use Live Preview, your plan must include this feature. Check our pricing page for more details.
The next step is to set up and enable live preview and live editing for your website. Follow the steps below to set up live preview feature for your website:
- Navigate to the Live Preview section in your stack's “Settings”.
- Select the Enable Live Preview checkbox.
- Now, select a preview environment and preview URL for previewing live content of your website. Finally, Save your settings.
This completes your live preview set up. Now, you can deploy the website using Vercel.
Deploy the Website
The easiest and the quickest way to deploy a Next.js starter website on production is to use Vercel. You need a Vercel account before you start deploying.
Note: While deploying the starter website to Vercel, make sure to enable/ disable the Live Preview and Live Edit environment variables as per your requirements.