Was this article helpful?
Thanks for your feedback
Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps. This e-Commerce app is built using Angular and Contentstack's Modular Block feature. Modular Blocks are reusable components and can be used with other modules to construct a complete webpage.
Here’s a quick guide on how to create an e-Commerce app using Contentstack and Angular.
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.
Here is an overview of the steps involved in creating our Angular app:
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.
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.
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:
git clone https://github.com/contentstack/contentstack-import.git
To install the dependencies, open the downloaded contentstack-import folder in a code editor, and run this command in the root directory:
npm install
Download the contents zip file, extract it, and move this extracted folder to the root of the contentstack-import
folder.
In the contentstack-import/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' //Relative path of the stack content
In the config/default.js
file, and set the entriesPublish
flag to true
to auto-publish the imported content.
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 automatically publish the imported entries and assets to all the environments.
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.
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:
Navigate to the src/environments/environment.ts
file and provide your credentials:
API_KEY = {api_key_of_your_stack} DELIVERY_TOKEN = {delivery_token_of_the_environment} ENVIRONMENT = {environment_name} REGION = eu //Compulsory param for EU users. NA users need not add this param.
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.
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.
Note: During deployment, for the REGION variable, pass the value as follows:
North America: us
Europe: eu
Was this article helpful?
Thanks for your feedback