Build a Single Page E-Commerce App Using Contentstack and Angular

Quickstart

Here’s a quick guide on how to create an e-Commerce app using Contentstack and Angular.

Prerequisites

• Contentstack account
• Working knowledge of Angular 
• Node.js version 20 or above
• Contentstack CLI: npm install -g @contentstack/cli

Note: For this tutorial, it is assumed that you are familiar with Contentstack and Angular. If not, please refer to the docs (Contentstack docs and Angular docs) for more details.

Set Up Your App

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

1. Create and Configure a Stack
2. Generate Management Token
3. Set the Region
4. Login to your Account
5. Import Content Types and Content
6. Create Delivery Token
7. Build and Configure the Website
8. 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 5.

2. Generate Management Token
   

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

3. Set the Region

   To use the North America, Europe, Azure North America, Azure Europe, or Google North America endpoint, run the following command in your terminal (command prompt):

   csdx config:set:region <<region>> 
   

   Note:

   • For North American users, set the region as NA.
   • For European users, set the region as EU.
   • For Azure North American users, set the region as AZURE-NA.
   • For Azure European users, set the region as AZURE-EU.
   • For Google North America users, set the region as GCP-NA.

4. Login to your Account

   To import content to your stack, first, you’ll need to log in to your Contentstack account via CLI by running the following command in your terminal:

   csdx auth:login
   

   This command will ask you to provide your Contentstack’s account credentials (email and password).

5. 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 our command-line interface (CLI):

   1. Add the token:
      
      csdx auth:tokens:add --alias <alias_for_token> --stack-api-key <API_key_of_stack> --token <value_of_management_token> --management
      

      For example:
      
      csdx auth:tokens:add --alias mytoken --stack-api-key blt1d********** --token cs57e********** --management
      

   2. Download the content zip file, extract it, and note down its path to use in the next step.
   3. In the Import content command, pass the management token along with the content location (noted in the above step) to import the content:
      
      csdx cm:stacks:import --alias <management_token_alias> --data-dir "<path_where_content_folder_is_stored>"
      

      For example:
      
      csdx cm:stacks:import --alias mytoken --data-dir "C:\Users\Name\Desktop\cli\content\contents"
      

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.

6. Create Delivery token

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

7. Build and configure website

   Download the website code

   We have created a sample code for this exercise which can be downloaded from the GitHub repository. Once you have downloaded the code, follow the steps given below:

   1. Create a new .env file and paste the environment variables provided below:

      API_KEY = {api_key_of_your_stack}
      DELIVERY_TOKEN = {delivery_token_of_the_environment}
      ENVIRONMENT = {environment_name}
      REGION = EU //Compulsory param for EU users. For Azure North America users, enter param as AZURE_NA and for Google North America enter param as GCP_NA. North America users need not add this param.
      

   2. 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:4200/. 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 “preview” environment. You should be able to see the changes on the website at localhost.

8. Deploy the Website

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