Generate Sample Apps Automatically

In order to create a sample app in Contentstack, there are certain steps that need to be followed. These steps include creating a stack, adding content types, entries, publishing environment, and publishing the entries on the specified environment.

Although these steps are simple and easy to follow, they require time and effort in setting them up. However, with Contentstack's sample-apps-auto-config utility, developers and other users can build a sample app and the required configuration automatically. 

Once the utility generates the required configurations, you can then deploy the content on any web hosting site. In this document, we'll discuss how to use this utility.

• Node.js installed on your computer
• Contentstack account
• Git installed on your machine

Contentstack's sample-apps-auto-config utility is primarily a command-line utility. Follow the steps given below to use it:

1. Clone the utility repository by using the following command:
   
   //command comes here
   
   
2. Fire up your terminal and move inside the project directory that you just downloaded.
3. Then, install the required dependencies by running the following command. After that, issue the npm link command to connect  the project to the module:
   
   
   12

   npm install
   npm link

The other way to do this is to open your terminal, create a blank folder by using the mkdir command, clone the repository, and then install the node modules. But the method suggested above is the suggested way to do this to keep you project clean.

After the dependencies have been installed, perform the the following steps to use the utility:

1. Ensure you are still in the project root directory, invoke the utility by using the following command:
   
   1

   build template-generator

2. It will ask you to choose any one of the templates. Select from the list of available example apps by using the arrow key and hit Enter. For this demo, we have selected Vue-Nuxt-App.
3. Next, you need to provide your credentials such as Contentstack email and password. Enter the details and hit Enter. You have now logged into Contentstack, it will ask you to provide a stack name to be created. For our example, type Website and hit Enter.
   
   

   NoteIf you have enabled Two-factor Authentication on your Contentstack account, ensure you have disabled it . Else, you will not be able to log in to your Contentstack account.

4. Then, you need to provide the Contentstack's organization ID. A stack named Website will be created inside your organization.
   
   

   Additional ResourceYou can find your Organization ID by following the steps mentioned in the Organization Settings section.
   

5. Next, you'll need to specify the environment where you want to publish your content to. By default, you'll see (production), you can type anything, for now type development. 

You will get a success message once the utility has auto-generated a stack, imported the content types, created three entries, and published them on the development environment.

Upon completion, the utility creates an app folder with the imported data as shown in the screenshot below:

Click to enlarge

You can use this folder for deploying the application on your preferred hosting platform such as Netlify, Heroku, and so on. Let's now verify whether the above mentioned stack, content types, and entries have been created in Contentstack. 

1. To do this, log in to your Contentstack account and verify that the stack named Website is created.
   
   
   Click to enlarge
   
   
   
2. Hover over Website and click on Open Stack. Navigate to the CONTENT tab, and you'll see three content types auto-created by the utility:
   
   
   Click to enlarge
   
   
   
   Open any content type, you'll see content and some other data inside the entry, generated by the utility.
   
   
3. Click on PUBLISH QUEUE tab at the top, and you will see the entries auto-published on development with status as Published.
   
   
   Click to enlarge