cs-icon.svg

Bootstrap Starter Apps

The “Bootstrap” plugin in Contentstack CLI allows users to automate the process of project setup for starter apps.

Using the CLI “Bootstrap” plugin developers can set up projects quickly and effectively. The plugin automates the whole procedure of stack creation and setting up the project.
Using this plugin, the content types, environments, entries, and assets required to run the starter apps get created in the stack you select or create.

In this guide, we will discuss how to use this plugin and automate the process.

Prerequisites

Steps for Execution

  1. Log in to Contentstack CLI session or use the Management Token
  2. Use the Bootstrap command

  1. Log in to Contentstack CLI session or use the Management Token

    If you haven't installed the Contentstack CLI yet, follow the steps mentioned in the CLI installation guide and get it installed.

    After you have successfully installed the CLI on your machine, you can either log in to the CLI session or use the management token alias to run the bootstrap command.

    Note: By default, this CLI session will work for the app hosted in the North America region. If you want to switch to Europe, Azure North America, Azure Europe, or Google North America region, follow the steps mentioned in the Set Region command section.

    Run the Bootstrap command by logging in to the CLI

    If you choose to log in to the CLI session, open your terminal (command prompt) and run the following command to log in to your Contentstack account:

    csdx auth:login

    Provide your Contentstack account’s email and password to successfully login to the CLI session.

    After successfully logging in to the Contentstack CLI, run the following command to initiate the procedure:

    csdx cm:bootstrap

    Run the Bootstrap command using the Management Token

    If you choose to use the management token alias to run the bootstrap command, open your terminal (command prompt) and run the following command:

    csdx cm:bootstrap --alias <management_token_alias>

    Additional Resources: To learn more about the CLI login command, refer to the Login command section.

  2. Use the Bootstrap command

    The bootstrap command prompts you to enter the following details:

    1. Technology
    2. Path
    3. Live Preview
    4. Organization name
    5. Stack preference
    6. Stack name

    Let's discuss these options in detail.

    1. Technology: Select the starter app (the technology type, such as React, Next, and so on) that you want to clone from the GitHub repository, from the available options.
      For our example let's select React JS app.Compass_Bootstrap.png
    2. Path: Once you have selected the app, provide the folder path to copy the app's source code.
      According to your preference, provide the folder path by selecting the Other option or you can use the Current directory as a default option.
    3. Live Preview: Enable Live Preview if you want to preview the live content of your website. Select n if you want to proceed without this.Bootstrap_Live_Preview_option.png

      This will start cloning the selected app to the folder you provide.

      Bootstrap_Cloning.png
    4. Organization name: Now, Select an Organization from the list of your organizations.
      The cloned app content will be added to a stack in the organization you select.CLI_Bootstrap_Organization.png
    5. Stack preference: In the organization you picked above, select if you want to create a new stack or use an existing stack to import the content of the app.
      For this example let's create a new stack in the organization we selected.CLI_Bootstrap_New_Stack.png
    6. Stack name: Add the name of the Stack where you want to import the project content and click the Enter button to start importing the project to the stack. CLI_Bootstrap_Stack_Creation.png

      On providing the above details, the plugin will add the project content including fields, and assets. It will also set up the environments, languages, and other settings for the selected app.

    Note: Imported content will be automatically published in the target stack.

    This is how you can automate the process of project creation in Contentstack by using the Bootstrap command.

    The alternate way of using the command is by providing the required parameters after the command in a single line as shown below:

    csdx cm:bootstrap --app-name "<starter_app_name>" --project-dir "<path_or_the_location_of_the_folder_to_clone_the_app>" -k "<stack_api_key>"

    or

    csdx cm:bootstrap --app-name "<starter_app_name>" --project-dir "<path_or_the_location_of_the_folder_to_clone_the_app>" --org "<organization_uid>" -n "<stack_name>"

    Options:

    • --app-name=app-name: The name of the starter app you want to use. Example: reactjs-starter, nextjs-starter, gatsby-starter, angular-starter, nuxt-starter.
    • --project-dir=project-dir: Directory/path to setup the project. If directory name has a space then provide the path as a string or escape the space using backslash as shown in the below example.
    • -k,--stack-api-key=stack-api-key: Provide stack API key to seed content.
    • --org=org: Provide organization UID to create a new stack. 
    • -n,--stack-name=stack-name: Name of the new stack that will be created.

    Examples:

    • To select the app you want to clone, use this command:
      csdx cm:bootstrap --app-name "<app name>"
      For Eg. To clone content of a React JS app:
      csdx cm:bootstrap --app-name reactjs-starter
    • Use this command to provide the path to the location of the folder to clone the app:
      csdx cm:bootstrap --project-dir "<The path or the location to clone the app>"
      For Eg.:
      csdx cm:bootstrap --project-dir "C:\Users\Name\Desktop\cli\content"

    • Use this command to add all the flags in a single command:

      csdx cm:bootstrap --app-name "<app-name>" --project-dir "<The path or the location to clone the app>" --org "your-org-uid" --stack-name "stack-name"
      For Eg.:
      csdx cm:bootstrap --app-name reactjs-starter --project-dir "C:\Users\Name\Desktop\cli\content" --org "your-org-uid" --stack-name "sample-stack"

The above command will add the starter app’s (React JS) content to your stack as shown below:
Bootstrap_Starter_App_Content.png

Run the Bootstrap Starter App

You can easily run this starter app on your local machine by following the steps below:

Build, Configure and Run the Website (Manual process)

Download the website code

Fire up your terminal, navigate to your project folder, and run the following command to create a configuration file named .env.development

cp .env.example .env.development

Note: If you are a Windows user, replace cp with copy in the command given above.

The .env.development file contains all the necessary config parameters. Open it in any code editor or IDE of your choice, provide your stack credentials, and save the file.

Provide your stack credentials like API key, Delivery token, and environment as given below:

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>
# Below config options are for enabling live preview/live edit tags for the starter app
REACT_APP_CONTENTSTACK_MANAGEMENT_TOKEN=<your_management_token>
REACT_APP_CONTENTSTACK_LIVE_PREVIEW=true
REACT_APP_CONTENTSTACK_LIVE_EDIT_TAGS=false
# API Host, APP Host, and Region Environment Variables for North America region users
# REACT_APP_CONTENTSTACK_API_HOST=api.contentstack.io
# REACT_APP_CONTENTSTACK_REGION=NA
# REACT_APP_CONTENTSTACK_APP_HOST=app.contentstack.io
# API Host, APP Host, and Region Environment Variables for Europe region users
# REACT_APP_CONTENTSTACK_API_HOST=eu-api.contentstack.com
# REACT_APP_CONTENTSTACK_REGION=EU
# REACT_APP_CONTENTSTACK_APP_HOST=eu-app.contentstack.io
# API Host, APP Host, and Region Environment Variables for Azure North America region users
# REACT_APP_CONTENTSTACK_API_HOST=azure-na-api.contentstack.com
# REACT_APP_CONTENTSTACK_REGION=AZURE-NA
# REACT_APP_CONTENTSTACK_APP_HOST=azure-na-app.contentstack.io
# API Host, APP Host, and Region Environment Variables for Azure Europe region users
# REACT_APP_CONTENTSTACK_API_HOST=azure-eu-api.contentstack.com
# REACT_APP_CONTENTSTACK_REGION=AZURE-EU
# REACT_APP_CONTENTSTACK_APP_HOST=azure-eu-app.contentstack.io
# API Host, APP Host, and Region Environment Variables for Google North America region users
# REACT_APP_CONTENTSTACK_API_HOST=gcp-na-api.contentstack.com
# REACT_APP_CONTENTSTACK_REGION=GCP-NA
# REACT_APP_CONTENTSTACK_APP_HOST=gcp-na-app.contentstack.io
# By default, branch=main if a branch is not provided
# REACT_APP_CONTENTSTACK_BRANCH=<your_branch_name>
SKIP_PREFLIGHT_CHECK=true

Note: The Live Preview that uses the REACT_APP_CONTENTSTACK_MANAGEMENT_TOKEN will soon be deprecated. Instead, we recommend using the Live Preview that relies on the REACT_APP_CONTENTSTACK_PREVIEW_TOKEN, REACT_APP_CONTENTSTACK_PREVIEW_HOST, REACT_APP_CONTENTSTACK_APP_HOST, and REACT_APP_CONTENTSTACK_API_HOST as given below.

REACT_APP_CONTENTSTACK_PREVIEW_TOKEN=<preview_token_linked_to_delivery_token>
REACT_APP_CONTENTSTACK_LIVE_PREVIEW=true
REACT_APP_CONTENTSTACK_LIVE_EDIT_TAGS=false
# API Host, APP Host, Preview Host and Region Environment Variables for North America region users
# REACT_APP_CONTENTSTACK_PREVIEW_HOST=rest-preview.contentstack.com
# REACT_APP_CONTENTSTACK_REGION=NA
# REACT_APP_CONTENTSTACK_API_HOST=api.contentstack.io
# REACT_APP_CONTENTSTACK_APP_HOST=app.contentstack.io
# API Host, APP Host, Preview Host and Region Environment Variables for Europe region users
# REACT_APP_CONTENTSTACK_PREVIEW_HOST=eu-rest-preview.contentstack.com
# REACT_APP_CONTENTSTACK_REGION=EU
# REACT_APP_CONTENTSTACK_API_HOST=eu-api.contentstack.com
# REACT_APP_CONTENTSTACK_APP_HOST=eu-app.contentstack.io
# API Host, APP Host, Preview Host and Region Environment Variables for Azure North America region users
# REACT_APP_CONTENTSTACK_PREVIEW_HOST=azure-na-rest-preview.contentstack.com
# REACT_APP_CONTENTSTACK_REGION=AZURE-NA
# REACT_APP_CONTENTSTACK_API_HOST=azure-na-api.contentstack.com
# REACT_APP_CONTENTSTACK_APP_HOST=azure-na-app.contentstack.io
# API Host, APP Host, Preview Host and Region Environment Variables for Azure Europe region users
# REACT_APP_CONTENTSTACK_PREVIEW_HOST=azure-eu-rest-preview.contentstack.com
# REACT_APP_CONTENTSTACK_REGION=AZURE-EU
# REACT_APP_CONTENTSTACK_API_HOST=azure-eu-api.contentstack.com
# REACT_APP_CONTENTSTACK_APP_HOST=azure-eu-app.contentstack.io
# API Host, APP Host, Preview Host and Region Environment Variables for Google North America region users
# REACT_APP_CONTENTSTACK_PREVIEW_HOST=gcp-na-rest-preview.contentstack.com
# REACT_APP_CONTENTSTACK_REGION=GCP-NA
# REACT_APP_CONTENTSTACK_API_HOST=gcp-na-api.contentstack.com
# REACT_APP_CONTENTSTACK_APP_HOST=gcp-na-app.contentstack.io
# By default, branch=main if a branch is not provided
# REACT_APP_CONTENTSTACK_BRANCH=<your_branch_name>
SKIP_PREFLIGHT_CHECK=true

Note: By default, the Live Preview feature is enabled for this project. To disable it, set REACT_APP_CONTENTSTACK_LIVE_PREVIEW= false.

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

npm install
npm start
That’s it!
You can now view the website at http://localhost:3000.
Here's how your website's Home page will look after running on your localhost. Dashboard.jpg

Run the Compass Starter

You can easily run the Compass starter on your local machine by following the steps below:

Build, Configure and Run the Website (Manual process)

  1. Create new files named .env.preview and .env.production.
  2. Copy and paste the following content to the newly created .env files:
    CONTENTSTACK_API_KEY=<api_key_of_your_stack>
CONTENTSTACK_DELIVERY_TOKEN=<delivery_token_of_the_environment>
CONTENTSTACK_ENVIRONMENT=<environment_name>
CONTENTSTACK_BRANCH=main
# For other branches add CONTENTSTACK_BRANCH=YOUR_BRANCH_NAME 
# By default, the branch is set to main
CONTENTSTACK_HOST=cdn.contentstack.io
# For EU region add CONTENTSTACK_HOST=eu-cdn.contentstack.com
# For live preview 
CONTENTSTACK_MANAGEMENT_TOKEN=<your_management_token>
CONTENTSTACK_API_HOST=api.contentstack.io
# For EU region add CONTENTSTACK_API_HOST=eu-api.contentstack.com
CONTENTSTACK_APP_HOST=app.contentstack.com
# For EU region add CONTENTSTACK_APP_HOST=eu-app.contentstack.com
CONTENTSTACK_LIVE_PREVIEW=true
CONTENTSTACK_LIVE_EDIT_TAGS=true
# To disable live editing tags for this project set CONTENTSTACK_LIVE_PREVIEW=false

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

npm install
npm start

That’s it!
You can now view the website at http://localhost:3000. Here's how your website's Home page will look after running on your localhost. Compass-Starter-IMG1.png

Deploy the Website

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

Note: During deployment, to use the European, Azure North American, Azure European, or Google North American region, add an environment variable REACT_APP_CONTENTSTACK_REGION and set its value to eu, azure-na, azure-eu, or gcp-na respectively.

The Bootstrap plugin supports the following starter apps.

Starter Apps

Additional Resource: To create and run a demo website, use the sample code and guide provided in the Contentstack starter apps documentation.

Limitations:

  1. When importing content to an existing stack, make sure you don't add duplicate content types. If you try to add similar content types, you'll get an error.
  2. If you want to create a new stack for storing content, make sure you have the “owner” or “admin” rights in that organization.
Was this article helpful?

More articles in "Miscellaneous"

CLI FAQs

Learn more
^