Build a Marketing App Using Contentstack and React JS

This example marketing website is built using ReactJS framework and Contentstack’s. It uses Contentstack to store and deliver the content of the website.

Screenshots

reactjs-app.png
reactjs-app-2.png

Quickstart

Here's a quick start guide on how to create a React-based marketing app that uses Contentstack as its CMS.

Prerequisites

Note: For this tutorial, we have assumed that you are familiar with Contentstack and React. If not, then please refer to the Contentstack and React for more details.

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

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

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

    Download All Content Types

    Now that all the content types are ready, let’s add some content for your marketing app.

  4. Add Content

    Create and publish entries for the content types mentioned above. Learn how to create and publish entries.

    With this step, you have created sample data for your website. Now, it's time to use and configure the presentation layer.

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

    Download the example code.

    Once you have downloaded the code, unzip the project, and fire up your terminal.

    Move inside the project directory and run the following command:

    npm install

    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.

  6. Start the Application

    Once you have installed the required dependencies, start the application by entering the following command in your terminal:

    npm start

    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:

    image1.jpg

    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.

Was this article helpful?

Thanks for your feedbackSmile-icon

On This Page

top-arrow