Bootstrap Starter Apps

The Bootstrap plugin in the Contentstack CLI simplifies the process of setting up Starter apps by automating stack creation and content import. With a single command, developers can quickly clone a Starter app and configure it with all the required assets and content.

Using this plugin, all necessary content—such as content types, environments, entries, and assets—is automatically created in the stack you choose or create.

This guide explains how to use the Bootstrap plugin to automate the setup process for your Starter app projects.

Note This Starter app uses Live Preview version 2.0.

cm:bootstrap prompts you to pick a Technology. Which walkthrough to follow depends on what you picked:

• Contentstack account
• CLI installed
• Set region
• Authenticate CLI using one of the following:
  • Login
  • Management Token

Use the cm:bootstrap command to automate Starter app setup. This command performs the following:

• Clones the selected app from GitHub
• Creates or uses an existing stack
• Imports content types, entries, assets, and environments

Command:

csdx cm:bootstrap

When executed, the command prompts you to provide the following details:

1. Technology

   Select the starter app you want to use, for example Kickstart Next.js or Compass App. For the full list, see Supported Starter Apps.

2. Path

   Choose the folder path to clone the app’s source code.
   Use one of the following:

   • Current Folder
   • Other (to provide a custom path)
3. Live Preview

   Choose whether to enable Live Preview (Y/n).

   Press Y to enable or n to skip.

   Click to enlarge

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

4. Organization Name

   Select the organization under which the stack should be created.

   Click to enlarge
5. Stack Preference

   Choose to create a New stack or use an Existing stack to import the app content.

   In this example, let's create a new stack in the organization we selected.

   Click to enlarge
6. Stack Name

   Enter a name for the new stack and click Enter.

   Click to enlarge

   With this process, the content—including fields, assets, environments, languages, and other settings—will be imported into the selected stack.

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

This is how you can automate project setup in Contentstack by using the Bootstrap command.

You can also run the bootstrap command with all required parameters in a single line:

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

Examples

• To select the app you want to clone:

  1

  csdx cm:bootstrap --app-name "<starter_app_name>"

  Example: Kickstart Next.js

  1

  csdx cm:bootstrap --app-name kickstart-next

• Use this command to provide the path to the location of the folder to clone the app:

  1

  csdx cm:bootstrap --project-dir "<The path or the location to clone the app>"

  Example:

  1

  csdx cm:bootstrap --project-dir "C:\Users\Name\Desktop\cli\content"

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

  1

  csdx cm:bootstrap --app-name <<starter-app-name>> --project-dir "<The path or the location to clone the app>" --org "your-org-uid" --stack-name "stack-name"

  Example

  1

  csdx cm:bootstrap --app-name kickstart-next --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:

Click to enlarge

The cm:bootstrap command clones the starter app into the folder you choose, and writes a .env file with your stack details into that folder. To run a Kickstart starter app on your local machine, follow the steps below:

1. Open your terminal and navigate to the folder where cm:bootstrap cloned the app.
2. Open the .env file and check the values that cm:bootstrap wrote, for example the stack API key, delivery token, and environment. A Kickstart Next.js app reads the variables that start with NEXT_PUBLIC_CONTENTSTACK_, and a Kickstart NuxtJS app reads the variables that start with NUXT_CONTENTSTACK_.
3. Run the following commands to install the dependencies and start the app:
   1

   npm install

   1

   npm run dev

The terminal output shows the local URL where the app runs.

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

1. Using Bootstrap Command
   1. Open your terminal.
   2. Navigate to your project folder.
   3. Run the following commands:
      12

      npm install
      npm start

2. Build, Configure, and Run the Website (Manual Process)
   1. Download the website code.
   2. Open your terminal.
   3. Navigate to your project folder.
   4. Run the following command to create a configuration file named .env:
      1

      cp .env.sample .env

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

      The .env file contains all the necessary configuration parameters.

   5. Open it in any code editor or IDE of your choice.
   6. Provide your stack credentials (such as API key, Delivery token, and environment), and save the file.
   7. Now, open your terminal, point it to your project location, and run the following commands:
      12

      npm install 
      npm start

      Note While running the Compass Starter app on your local machine in development mode, use the command npm run dev instead of npm start.

That’s it!

You can now view the website by navigating to http://localhost:3000.

Here's how your website's Home page will look after running on your localhost.

Click to enlarge

You can deploy your Starter app using:

• Contentstack Launch

  Additional Resource For more details, visit the Contentstack Launch documentation.

• Vercel

The following starter apps are available in CLI 2.x:

• Compass App
• Kickstart Next.js
• Kickstart Next.js with server-side rendering (SSR)
• Kickstart Next.js with static site generation (SSG)
• Kickstart Next.js GraphQL
• Kickstart Next.js Middleware
• Kickstart NuxtJS
• Kickstart NuxtJS with SSR

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

• Avoid importing duplicate content types into existing stacks.
• To create new stacks, ensure your role is set to Owner or Admin in the organization.