Note that this project is not an official Contentstack maintained repo yet. This is a work in progress and will be updated over time. When it is finished enough it will move to the official Contentstack Github home.
This is a kickstart example to connect Angular to Contentstack. This example covers the following items:
- SDK initialization
- Live preview and Visual building setup
More details about this codebase can be found on the Contentstack docs.
Before you can run this code, you will need a Contentstack "Stack" to connect to. Follow the following steps to seed a Stack that this codebase understands.
If you installed this Kickstart via the Contentstack Markertplace or the new account onboarding, you can skip this step.
npm install -g @contentstack/cliIt might ask you to set your default region.
You can get all regions and their codes here or run csdx config:get:region.
Beware, Free Contentstack developer accounts are bound to the EU region. We still use the CDN the API is lightning fast.
Set your region like so:
csdx config:set:region EUcsdx auth:loginIn your Contentstack Organization dashboard find Org admin and copy your Organization ID (Example: blt481c598b0d8352d9).
Make sure to replace <YOUR_ORG_ID> with your actual Organization ID and run the below.
csdx cm:stacks:seed --repo "contentstack/kickstart-stack-seed" --org "<YOUR_ORG_ID>" -n "Kickstart Stack"Go to Settings > Tokens and create a delivery token. Select the preview scope and turn on Create preview token
In the case of Angular 18, check the settings in the environment and make sure the url is:
http://localhost:4200/instead ofhttp://localhost:3000/
This project uses environment variables to keep API keys secure and out of version control.
-
Copy the
.env.examplefile to.env:cp .env.example .env
-
Fill out the
.envfile with your actual values:NG_APP_CONTENTSTACK_API_KEY=<YOUR_API_KEY> NG_APP_CONTENTSTACK_DELIVERY_TOKEN=<YOUR_DELIVERY_TOKEN> NG_APP_CONTENTSTACK_PREVIEW_TOKEN=<YOUR_PREVIEW_TOKEN> NG_APP_CONTENTSTACK_ENVIRONMENT=preview NG_APP_CONTENTSTACK_REGION=EU NG_APP_CONTENTSTACK_PREVIEW=true
The environment files (src/environments/environment.ts and src/environments/environment.production.ts) are automatically generated from your .env file when you run npm start or npm run build.
Important: Never commit the
.envfile to your repository. It's already included in.gitignoreto prevent accidental commits of your API keys.
Go to Settings > Live Preview. Click enable and select the Preview environment in the drop down. Hit save.
npm installnpm run startGo to http://localhost:4200/.
Go to Entries and select the only entry in the list. In the sidebar, click on the live preview icon. Or, click on visual experience in the sidebar.
Set NG_APP_CONTENTSTACK_REGION to the value matching your Contentstack account region:
| Region | Value |
|---|---|
| North America (default) | NA or US |
| Europe | EU |
| Australia | AU |
| Azure North America | AZURE-NA |
| Azure Europe | AZURE-EU |
| GCP North America | GCP-NA |
| GCP Europe | GCP-EU |
The app uses getContentstackEndpoint from @contentstack/utils to resolve the correct API hostnames for your region automatically (via generate-env.js at build time). The following endpoint keys are resolved:
| Key | NA value |
|---|---|
contentDelivery |
cdn.contentstack.io |
preview |
rest-preview.contentstack.com |
application |
app.contentstack.com |
graphqlDelivery |
graphql.contentstack.com |
graphqlPreview |
graphql-preview.contentstack.com |
images |
images.contentstack.io |
assets |
assets.contentstack.io |
contentManagement |
api.contentstack.io |
auth |
auth.contentstack.io |
If you are on a dedicated or private cloud Contentstack instance, you can override the resolved endpoints via environment variables:
NG_APP_CONTENTSTACK_CONTENT_DELIVERY=your-custom-cdn.example.com
NG_APP_CONTENTSTACK_PREVIEW_HOST=your-custom-preview.example.com
NG_APP_CONTENTSTACK_CONTENT_APPLICATION=your-custom-app.example.com
These override values take precedence over the region-resolved endpoints.