Build a Marketing App Using Contentstack and React JS
Here's a quick start guide on how to create a React-based marketing app that uses Contentstack as its CMS.
- Working knowledge of React
- Contentstack account
Create a Stack
Log in to your Contentstack account, and create a new stack. This stack will hold all the data, specific to your website. Learn more about how to create a stack.
Add a Publishing Environment
To add an environment in Contentstack, navigate to Settings -> Environment, and click on the + New Environment tab. Provide a suitable name for your environment, say staging.
Specify the base URL (e.g., http://YourDomainName.com), and select the language (e.g., English - United States). Then, click on Save. Read more about environments.
Import Content Types
A content type is like the structure or blueprint of a page or a section of your web or mobile property. Read more about Content Types.
For this website, some basic content types are required: Home, Features, About, Product, and Blog. For quick integration, we have already created these content types. You simply need to import them to your stack. (You can also create your own content types. Learn how to do this).
To import the content types, first, save the zipped folder of the JSON files given below on your local machine. Extract the files from the folder. Then, go to your stack in Contentstack. The next screen prompts you to either create a new content type or import one into your stack. Click the Import link, and select the JSON file saved on your machine.
Now that all the content types are ready, let’s add some content for your marketing app.
With this step, you have created sample data for your website. Now, it's time to use and configure the presentation layer.
Download the Configure the App
Next, you need to configure the app. For that, you will have to download the sample code that we have created.
Once you have downloaded the code, unzip the project, and fire up your terminal.
Move inside the project directory and run the following command:
Then, open the .env file and enter your stack credentials such as API_Key and Access_Token. Also, add your environment name along with the UIDs of respective content types and entries.
Note: Make sure that you have proper entry and content-type uid mentioned in the URL while fetching the data from Contentstack.
Start the Application
Once you have installed the required dependencies, start the application by entering the following command in your terminal:
By default, the app starts on port 3000. So open your browser and hit the port, you should see the first page of your marketing app. An example is shown below:
You can also deploy the application on your desired platform such as Netlilfy, Heroku, and so on. Read more on how to deploy your React apps on different platforms.