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

about.png
blogs.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.

Here is an overview of the steps involved in creating our React app:

  1. Create and Configure a Stack
  2. Generate Management Token
  3. Import Content Types and Content
  4. Create Delivery Token
  5. Build and Configure the Website
  6. Deploy the Website
  1. Create and Configure a Stack

    A stack holds all the data (entries and assets) that you would need to create a website. Log in to your Contentstack account, and create a new stack. Note down the master language and the stack API key as you will need these in Step 3.

  2. Generate Management Token

    Management Tokens provide you with read-write access to your stack resources. Create a Management token as shown in the documentation. Note down the Management token and the stack API key. You will need these to import content into your stack in the next step

  3. Import Content Types and Content

    For quick setup, we have already created a zip file that contains the required content types, content (entries and assets), languages, and environments that you need to get the website up and running. You can directly import these resources into your stack by using the contentstack-import utility:

    1. Download the contentstack-import utility by running this command in your terminal:  
      git clone https://github.com/contentstack/contentstack-import.git
    2. To install the dependencies, open the downloaded contentstack-import folder in a code editor, and run this command in the root directory:

      npm install
    3. Download the content zip file, extract it, and move this extracted content folder to the root of the contentstack-import folder.

    4. In the config/index.js file, add your account and stack details:

      {
       master_locale: {
        name: 'English - United States', // Stack's master locale
        code: 'en-us'  // Stack master locale's code
       },
       email: 'abc@contentstack.com', // Your registered email id
       password: '********', // Your Contentstack Account password
       target_stack: 'blt1234abcd', // API Key of stack where data will be imported
       management_token: 'cs1234abcd' //Stack management_token
       data: './contents'
    5. In the config/default.js file, and set the entriesPublish flag to true to auto-publish the imported content.

    6. Finally, import content in your stack:

      npm run import

    This will import all the assets, content types, entries, languages, and environments into your stack, and then automatically publish the imported entries and assets to all the environments.

  4. Create Delivery token

    A delivery token lets you fetch the published content of an environment. You can create a delivery token for the “local” environment for testing that we will use in the next step. Later, while deploying your site, you can create tokens for other environments.

  5. Build and Configure the Website

    Download the website code.

    Navigate to the root folder, create a configuration file named .env.development.local, and provide your credentials:

    REACT_APP_APIKEY = {api_key_of_your_stack}
    REACT_APP_DELIVERY_TOKEN = {delivery_token_of_the_environment}
    REACT_APP_ENVIRONMENT = {environment_name}
    REACT_APP_REGION = {eu/us}  //Compulsory param for EU users. NA users need not add this param.

    Note: To use the European region, set REGION=eu

    Fire up your terminal, point it to your project location, and run the following commands:

    npm install
    npm start
    

    Note: This will work on Node.js version 6.10.0 or above.

    That’s it!

    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 “local” environment. You should be able to see the changes on the website at localhost.
  6. Deploy the Website

    The easiest and the quickest way to deploy a React website on production is to use Vercel. You need a Vercel account before you start deploying.

     

Was this article helpful?

Thanks for your feedbackSmile-icon

On This Page

^