Selecting Region in Contentstack Starter Apps
In order to configure your starter app for a particular region, you need to make changes to the configuration file of your starter app.
For each technology given below, set the following configuration according to your region.
Gatsby
Gatsby App Configuration for Europe Region
To set the Europe region, refer to the code below:
CONTENTSTACK_API_KEY = <api_key_of_your_stack>
CONTENTSTACK_DELIVERY_TOKEN = <delivery_token_of_the_environment>
CONTENTSTACK_ENVIRONMENT = <environment_name>
CONTENTSTACK_API_HOST = eu-api.contentstack.com
Mandatory configuration parameters to enable Live Preview
CONTENTSTACK_MANAGEMENT_TOKEN = <management_token_of_the_environment>
CONTENTSTACK_APP_HOST = eu-app.contentstack.com
CONTENTSTACK_LIVE_PREVIEW = true
#By default, the live preview feature is enabled for this project. To disable it, set "CONTENTSTACK_LIVE_PREVIEW= false".
CONTENTSTACK_LIVE_EDIT_TAGS = false
#By default, live editing tags are disabled for this project. To enable it, set “CONTENTSTACK_LIVE_EDIT_TAGS= true”.
Gatsby App Configuration for Azure NA Region
To set the Azure North America region, refer to the code below:
CONTENTSTACK_API_KEY = <api_key_of_your_stack>
CONTENTSTACK_DELIVERY_TOKEN = <delivery_token_of_the_environment>
CONTENTSTACK_ENVIRONMENT = <environment_name>
CONTENTSTACK_API_HOST = azure-na-api.contentstack.com
Mandatory configuration parameters to enable Live Preview
CONTENTSTACK_MANAGEMENT_TOKEN = <management_token_of_the_environment>
CONTENTSTACK_APP_HOST = azure-na-app.contentstack.com
CONTENTSTACK_LIVE_PREVIEW = true
#By default, the live preview feature is enabled for this project. To disable it, set "CONTENTSTACK_LIVE_PREVIEW= false".
CONTENTSTACK_LIVE_EDIT_TAGS = false
#By default, live editing tags are disabled for this project. To enable it, set “CONTENTSTACK_LIVE_EDIT_TAGS= true”.
Gatsby App Configuration for Azure EU Region
To set the Azure Europe region, refer to the code below:
CONTENTSTACK_API_KEY = <api_key_of_your_stack>
CONTENTSTACK_DELIVERY_TOKEN = <delivery_token_of_the_environment>
CONTENTSTACK_ENVIRONMENT = <environment_name>
CONTENTSTACK_API_HOST = azure-eu-api.contentstack.com
# By default branch=main, if a branch is not provided
# CONTENTSTACK_BRANCH = <your_branch_name>
Mandatory configuration parameters to enable Live Preview
CONTENTSTACK_MANAGEMENT_TOKEN = <management_token_of_the_environment>
CONTENTSTACK_APP_HOST = azure-eu-app.contentstack.com
CONTENTSTACK_LIVE_PREVIEW = true
#By default, the live preview feature is enabled for this project. To disable it, set "CONTENTSTACK_LIVE_PREVIEW= false".
CONTENTSTACK_LIVE_EDIT_TAGS = false
#By default, live editing tags are disabled for this project. To enable it, set "CONTENTSTACK_LIVE_EDIT_TAGS= true".
Next.js
Next.js App Configuration for Europe Region
To set the Europe region, refer to the code below:
Mandatory configuration parameters to enable Live Preview
CONTENTSTACK_MANAGEMENT_TOKEN = <management_token_of_the_environment>
CONTENTSTACK_APP_HOST = eu-app.contentstack.com
CONTENTSTACK_API_HOST = eu-api.contentstack.com
CONTENTSTACK_LIVE_PREVIEW = true
#By default, the live preview feature is enabled for this project. To disable it, set "CONTENTSTACK_LIVE_PREVIEW= false".
CONTENTSTACK_LIVE_EDIT_TAGS = false
#By default, live editing tags are disabled for this project. To enable it, set “CONTENTSTACK_LIVE_EDIT_TAGS= true”.
Next.js App Configuration for Azure NA Region
To set the Azure North America region, refer to the code below:
Mandatory configuration parameters to enable Live Preview
CONTENTSTACK_MANAGEMENT_TOKEN = <management_token_of_the_environment>
CONTENTSTACK_APP_HOST = azure-na-app.contentstack.com
CONTENTSTACK_API_HOST = azure-na-api.contentstack.com
CONTENTSTACK_LIVE_PREVIEW = true
#By default, the live preview feature is enabled for this project. To disable it, set "CONTENTSTACK_LIVE_PREVIEW= false".
CONTENTSTACK_LIVE_EDIT_TAGS = false
#By default, live editing tags are disabled for this project. To enable it, set “CONTENTSTACK_LIVE_EDIT_TAGS= true”.
Next.js App Configuration for Azure EU Region
To set the Azure Europe region, refer to the code below:
Mandatory configuration parameters to enable Live Preview
CONTENTSTACK_MANAGEMENT_TOKEN = <management_token_of_the_environment>
CONTENTSTACK_APP_HOST = azure-eu-app.contentstack.com
CONTENTSTACK_API_HOST = azure-eu-api.contentstack.com
CONTENTSTACK_LIVE_PREVIEW = true
# By default branch=main, if a branch is not provided
# CONTENTSTACK_BRANCH = <your_branch_name>
#By default, the live preview feature is enabled for this project. To disable it, set "CONTENTSTACK_LIVE_PREVIEW= false".
CONTENTSTACK_LIVE_EDIT_TAGS = false
#By default, live editing tags are disabled for this project. To enable it, set "CONTENTSTACK_LIVE_EDIT_TAGS= true".
React.js
React.js App Configuration for Europe Region
To set the Europe region, refer to the code below:
Mandatory configuration parameters to enable Live Preview
REACT_APP_CONTENTSTACK_MANAGEMENT_TOKEN = <management_token_of_the_environment>
REACT_APP_CONTENTSTACK_APP_HOST = eu-app.contentstack.com
REACT_APP_CONTENTSTACK_API_HOST = eu-api.contentstack.com
REACT_APP_CONTENTSTACK_LIVE_PREVIEW = true
#By default, the live preview feature is enabled for this project. To disable it, set "CONTENTSTACK_LIVE_PREVIEW= false".
REACT_APP_CONTENTSTACK_LIVE_EDIT_TAGS = false
#By default, live editing tags are disabled for this project. To enable it, set “CONTENTSTACK_LIVE_EDIT_TAGS= true”.
React.js App Configuration for Azure NA Region
To set the Azure North America region, refer to the code below:
Mandatory configuration parameters to enable Live Preview
REACT_APP_CONTENTSTACK_MANAGEMENT_TOKEN = <management_token_of_the_environment>
REACT_APP_CONTENTSTACK_APP_HOST = azure-na-app.contentstack.com
REACT_APP_CONTENTSTACK_API_HOST = azure-na-api.contentstack.com
REACT_APP_CONTENTSTACK_LIVE_PREVIEW = true
#By default, the live preview feature is enabled for this project. To disable it, set "CONTENTSTACK_LIVE_PREVIEW= false".
REACT_APP_CONTENTSTACK_LIVE_EDIT_TAGS = false
#By default, live editing tags are disabled for this project. To enable it, set “CONTENTSTACK_LIVE_EDIT_TAGS= true”.
React.js App Configuration for Azure EU Region
To set the Azure Europe region, refer to the code below:
Mandatory configuration parameters to enable Live Preview
REACT_APP_CONTENTSTACK_MANAGEMENT_TOKEN = <management_token_of_the_environment>
REACT_APP_CONTENTSTACK_APP_HOST = azure-eu-app.contentstack.com
REACT_APP_CONTENTSTACK_API_HOST = azure-eu-api.contentstack.com
# By default branch=main, if a branch is not provided
# REACT_APP_CONTENTSTACK_BRANCH = <your_branch_name>
REACT_APP_CONTENTSTACK_LIVE_PREVIEW = true
#By default, the live preview feature is enabled for this project. To disable it, set "CONTENTSTACK_LIVE_PREVIEW= false".
REACT_APP_CONTENTSTACK_LIVE_EDIT_TAGS = false
#By default, live editing tags are disabled for this project. To enable it, set "CONTENTSTACK_LIVE_EDIT_TAGS= true".
Angular
Angular App Configuration for Europe Region
To set the Europe region, refer to the code below:
Mandatory configuration parameters to enable Live Preview
CONTENTSTACK_MANAGEMENT_TOKEN = <management_token_of_the_environment>
CONTENTSTACK_APP_HOST = eu-app.contentstack.com
CONTENTSTACK_API_HOST = eu-api.contentstack.com
CONTENTSTACK_LIVE_PREVIEW = true
#By default, the live preview feature is enabled for this project. To disable it, set "CONTENTSTACK_LIVE_PREVIEW= false".
Angular App Configuration for Azure NA Region
To set the Azure North America region, refer to the code below:
Mandatory configuration parameters to enable Live Preview
CONTENTSTACK_MANAGEMENT_TOKEN = <management_token_of_the_environment>
CONTENTSTACK_APP_HOST = azure-na-app.contentstack.com
CONTENTSTACK_API_HOST = azure-na-api.contentstack.com
CONTENTSTACK_LIVE_PREVIEW = true
#By default, the live preview feature is enabled for this project. To disable it, set "CONTENTSTACK_LIVE_PREVIEW= false".
Angular App Configuration for Azure EU Region
To set the Azure Europe region, refer to the code below:
Mandatory configuration parameters to enable Live Preview
CONTENTSTACK_MANAGEMENT_TOKEN = <management_token_of_the_environment>
CONTENTSTACK_APP_HOST = azure-eu-app.contentstack.com
CONTENTSTACK_API_HOST = azure-eu-api.contentstack.com
# By default branch=main, if a branch is not provided
# CONTENTSTACK_BRANCH = <your_branch_name>
CONTENTSTACK_LIVE_PREVIEW = true
#By default, the live preview feature is enabled for this project. To disable it, set "CONTENTSTACK_LIVE_PREVIEW= false".
Vue.js
Vue.js App Configuration for Europe Region
To set the Europe region, refer to the code below:
Mandatory configuration parameters to enable Live Preview
VUE_APP_CONTENTSTACK_MANAGEMENT_TOKEN = <management_token_of_the_environment>
VUE_APP_CONTENTSTACK_APP_HOST = eu-app.contentstack.com
VUE_APP_CONTENTSTACK_API_HOST = eu-api.contentstack.com
VUE_APP_CONTENTSTACK_LIVE_PREVIEW = true
#By default, the live preview feature is enabled for this project. To disable it, set "CONTENTSTACK_LIVE_PREVIEW= false".
Vue.js App Configuration for Azure NA Region
To set the Azure North America region, refer to the code below:
Mandatory configuration parameters to enable Live Preview
VUE_APP_CONTENTSTACK_MANAGEMENT_TOKEN = <management_token_of_the_environment>
VUE_APP_CONTENTSTACK_APP_HOST = azure-na-app.contentstack.com
VUE_APP_CONTENTSTACK_API_HOST = azure-na-api.contentstack.com
VUE_APP_CONTENTSTACK_LIVE_PREVIEW = true
#By default, the live preview feature is enabled for this project. To disable it, set "CONTENTSTACK_LIVE_PREVIEW= false".
Vue.js App Configuration for Azure EU Region
To set the Azure Europe region, refer to the code below:
Mandatory configuration parameters to enable Live Preview
VUE_APP_CONTENTSTACK_MANAGEMENT_TOKEN = <management_token_of_the_environment>
VUE_APP_CONTENTSTACK_APP_HOST = azure-eu-app.contentstack.com
VUE_APP_CONTENTSTACK_API_HOST = azure-eu-api.contentstack.com
# By default branch=main, if a branch is not provided
# VUE_APP_CONTENTSTACK_BRANCH = <your_branch_name>
VUE_APP_CONTENTSTACK_LIVE_PREVIEW = true
#By default, the live preview feature is enabled for this project. To disable it, set "CONTENTSTACK_LIVE_PREVIEW= false".
Nuxt.js
Nuxt.js App Configuration for Europe Region
To set the Europe region, refer to the code below:
Mandatory configuration parameters to enable Live Preview
CONTENTSTACK_MANAGEMENT_TOKEN = <management_token_of_the_environment>
CONTENTSTACK_APP_HOST = eu-app.contentstack.com
CONTENTSTACK_API_HOST = eu-api.contentstack.com
CONTENTSTACK_LIVE_PREVIEW = true
#By default, the live preview feature is enabled for this project. To disable it, set "CONTENTSTACK_LIVE_PREVIEW= false".
Nuxt.js App Configuration for Azure NA Region
To set the Azure North America region, refer to the code below:
Mandatory configuration parameters to enable Live Preview
CONTENTSTACK_MANAGEMENT_TOKEN = <management_token_of_the_environment>
CONTENTSTACK_APP_HOST = azure-na-app.contentstack.com
CONTENTSTACK_API_HOST = azure-na-api.contentstack.com
CONTENTSTACK_LIVE_PREVIEW = true
#By default, the live preview feature is enabled for this project. To disable it, set "CONTENTSTACK_LIVE_PREVIEW= false".
Nuxt.js App Configuration for Azure EU Region
To set the Azure Europe region, refer to the code below:
Mandatory configuration parameters to enable Live Preview
CONTENTSTACK_MANAGEMENT_TOKEN = <management_token_of_the_environment>
CONTENTSTACK_APP_HOST = azure-eu-app.contentstack.com
CONTENTSTACK_API_HOST = azure-eu-api.contentstack.com
# By default branch=main, if a branch is not provided
# CONTENTSTACK_BRANCH = <your_branch_name>
CONTENTSTACK_LIVE_PREVIEW = true
#By default, the live preview feature is enabled for this project. To disable it, set "CONTENTSTACK_LIVE_PREVIEW= false".
Nuxt3
Nuxt3 App Configuration for Europe Region
To set the Europe region, refer to the code below:
VITE_CONTENTSTACK_API_HOST = eu-api.contentstack.com
Mandatory configuration parameters to enable Live Preview
VITE_CONTENTSTACK_MANAGEMENT_TOKEN = <management_token_of_the_environment>
VITE_CONTENTSTACK_APP_HOST = eu-app.contentstack.com
VITE_CONTENTSTACK_LIVE_PREVIEW = true
#By default, the live preview feature is enabled for this project. To disable it, set "VITE_CONTENTSTACK_LIVE_PREVIEW= false".
Nuxt3 App Configuration for Azure NA Region
To set the Azure North America region, refer to the code below:
VITE_CONTENTSTACK_API_HOST = azure-na-api.contentstack.com
Mandatory configuration parameters to enable Live Preview
VITE_CONTENTSTACK_MANAGEMENT_TOKEN = <management_token_of_the_environment>
VITE_CONTENTSTACK_APP_HOST = azure-na-app.contentstack.com
VITE_CONTENTSTACK_LIVE_PREVIEW = true
#By default, the live preview feature is enabled for this project. To disable it, set "VITE_CONTENTSTACK_LIVE_PREVIEW= false".
Nuxt3 App Configuration for Azure EU Region
To set the Azure Europe region, refer to the code below:
VITE_CONTENTSTACK_API_HOST = azure-eu-api.contentstack.com
Mandatory configuration parameters to enable Live Preview
VITE_CONTENTSTACK_MANAGEMENT_TOKEN = <management_token_of_the_environment>
VITE_CONTENTSTACK_APP_HOST = azure-eu-app.contentstack.com
VITE_CONTENTSTACK_BRANCH = <your_branch_name>
VITE_CONTENTSTACK_LIVE_PREVIEW = true
#By default, the live preview feature is enabled for this project. To disable it, set "VITE_CONTENTSTACK_LIVE_PREVIEW= false".
StencilJS
StencilJS App Configuration for Europe Region
To set the Europe region, refer to the code below:
Mandatory configuration parameters to enable Live Preview
CONTENTSTACK_MANAGEMENT_TOKEN = <management_token_of_the_environment>
CONTENTSTACK_APP_HOST = eu-app.contentstack.com
CONTENTSTACK_API_HOST = eu-api.contentstack.com
CONTENTSTACK_LIVE_PREVIEW = true
#By default, the live preview feature is enabled for this project. To disable it, set "CONTENTSTACK_LIVE_PREVIEW= false".
CONTENTSTACK_LIVE_EDIT_TAGS = false
#By default, live editing tags are disabled for this project. To enable it, set “CONTENTSTACK_LIVE_EDIT_TAGS= true”.
StencilJS App Configuration for Azure NA Region
To set the Azure North America region, refer to the code below:
Mandatory configuration parameters to enable Live Preview
CONTENTSTACK_MANAGEMENT_TOKEN = <management_token_of_the_environment>
CONTENTSTACK_APP_HOST = azure-na-app.contentstack.com
CONTENTSTACK_API_HOST = azure-na-api.contentstack.com
CONTENTSTACK_LIVE_PREVIEW = true
#By default, the live preview feature is enabled for this project. To disable it, set "CONTENTSTACK_LIVE_PREVIEW= false".
CONTENTSTACK_LIVE_EDIT_TAGS = false
#By default, live editing tags are disabled for this project. To enable it, set “CONTENTSTACK_LIVE_EDIT_TAGS= true”.
StencilJS App Configuration for Azure EU Region
To set the Azure Europe region, refer to the code below:
Mandatory configuration parameters to enable Live Preview
CONTENTSTACK_MANAGEMENT_TOKEN = <management_token_of_the_environment>
CONTENTSTACK_APP_HOST = azure-eu-app.contentstack.com
CONTENTSTACK_API_HOST = azure-eu-api.contentstack.com
CONTENTSTACK_BRANCH = <your_branch_name>
CONTENTSTACK_LIVE_PREVIEW = true
#By default, the live preview feature is enabled for this project. To disable it, set "CONTENTSTACK_LIVE_PREVIEW= false".
CONTENTSTACK_LIVE_EDIT_TAGS = false
#By default, live editing tags are disabled for this project. To enable it, set "CONTENTSTACK_LIVE_EDIT_TAGS= true".
Next.js Static Site Generator
Next.js SSG App Configuration for Europe Region
To set the Europe region, refer to the code below:
Mandatory configuration parameters to enable Live Preview
CONTENTSTACK_MANAGEMENT_TOKEN = <management_token_of_the_environment>
CONTENTSTACK_APP_HOST = eu-app.contentstack.com
CONTENTSTACK_API_HOST = eu-api.contentstack.com
CONTENTSTACK_LIVE_PREVIEW = true
#By default, the live preview feature is enabled for this project. To disable it, set "CONTENTSTACK_LIVE_PREVIEW= false".
CONTENTSTACK_LIVE_EDIT_TAGS = false
#By default, live editing tags are disabled for this project. To enable it, set “CONTENTSTACK_LIVE_EDIT_TAGS= true”.
Next.js SSG App Configuration for Azure NA Region
To set the Azure North America region, refer to the code below:
Mandatory configuration parameters to enable Live Preview
CONTENTSTACK_MANAGEMENT_TOKEN = <management_token_of_the_environment>
CONTENTSTACK_APP_HOST = azure-na-app.contentstack.com
CONTENTSTACK_API_HOST = azure-na-api.contentstack.com
CONTENTSTACK_LIVE_PREVIEW = true
#By default, the live preview feature is enabled for this project. To disable it, set "CONTENTSTACK_LIVE_PREVIEW= false".
CONTENTSTACK_LIVE_EDIT_TAGS = false
#By default, live editing tags are disabled for this project. To enable it, set “CONTENTSTACK_LIVE_EDIT_TAGS= true”.
Next.js SSG App Configuration for Azure EU Region
To set the Azure Europe region, refer to the code below:
Mandatory configuration parameters to enable Live Preview
CONTENTSTACK_MANAGEMENT_TOKEN = <management_token_of_the_environment>
CONTENTSTACK_APP_HOST = azure-eu-app.contentstack.com
CONTENTSTACK_API_HOST = azure-eu-api.contentstack.com
# By default branch=main, if a branch is not provided
# CONTENTSTACK_BRANCH = <your_branch_name>
CONTENTSTACK_LIVE_PREVIEW = true
#By default, the live preview feature is enabled for this project. To disable it, set "CONTENTSTACK_LIVE_PREVIEW= false".
CONTENTSTACK_LIVE_EDIT_TAGS = false
#By default, live editing tags are disabled for this project. To enable it, set "CONTENTSTACK_LIVE_EDIT_TAGS= true".
ASP.NET Blazor
ASP.NET Blazor App Configuration for Europe Region
To set the Europe region, refer to the code below:
{
"ContentstackOptions": {
"Host": "eu-cdn.contentstack.com",
"ApiKey": "<API_KEY>",
"DeliveryToken": "<DELIVERY_TOKEN>",
"Environment": "<ENVIRONMENT_NAME>"
}
}
ASP.NET Blazor App Configuration for Azure NA Region
To set the Azure North America region, refer to the code below:
{
"ContentstackOptions": {
"Host": "azure-na-cdn.contentstack.com",
"ApiKey": "<API_KEY>",
"DeliveryToken": "<DELIVERY_TOKEN>",
"Environment": "<ENVIRONMENT_NAME>"
}
}
ASP.NET Blazor App Configuration for Azure EU Region
To set the Azure Europe region, refer to the code below:
{
"ContentstackOptions": {
"Host": "azure-eu-cdn.contentstack.com",
"ApiKey": "<API_KEY>",
"DeliveryToken": "<DELIVERY_TOKEN>",
"Environment": "<ENVIRONMENT_NAME>",
"Branch": "<your_branch_name>",
}
}
Sveltekit
Sveltekit App Configuration for Europe Region
To set the Europe region, refer to the code below:
CONTENTSTACK_API_KEY = <api_key_of_your_stack>
CONTENTSTACK_DELIVERY_TOKEN = <delivery_token_of_the_environment>
CONTENTSTACK_ENVIRONMENT = <environment_name>
CONTENTSTACK_API_HOST = eu-api.contentstack.com
Mandatory configuration parameters to enable Live Preview
CONTENTSTACK_MANAGEMENT_TOKEN = <management_token_of_the_environment>
CONTENTSTACK_APP_HOST = eu-app.contentstack.com
CONTENTSTACK_LIVE_PREVIEW = true
#By default, the live preview feature is enabled for this project. To disable it, set "CONTENTSTACK_LIVE_PREVIEW= false".
CONTENTSTACK_LIVE_EDIT_TAGS = false
#By default, live editing tags are disabled for this project. To enable it, set “CONTENTSTACK_LIVE_EDIT_TAGS= true”.
Sveltekit App Configuration for Azure NA Region
To set the Azure North America region, refer to the code below:
CONTENTSTACK_API_KEY = <api_key_of_your_stack>
CONTENTSTACK_DELIVERY_TOKEN = <delivery_token_of_the_environment>
CONTENTSTACK_ENVIRONMENT = <environment_name>
CONTENTSTACK_API_HOST = azure-na-api.contentstack.com
Mandatory configuration parameters to enable Live Preview
CONTENTSTACK_MANAGEMENT_TOKEN = <management_token_of_the_environment>
CONTENTSTACK_APP_HOST = azure-na-app.contentstack.com
CONTENTSTACK_LIVE_PREVIEW = true
#By default, the live preview feature is enabled for this project. To disable it, set "CONTENTSTACK_LIVE_PREVIEW= false".
CONTENTSTACK_LIVE_EDIT_TAGS = false
#By default, live editing tags are disabled for this project. To enable it, set “CONTENTSTACK_LIVE_EDIT_TAGS= true”.
Sveltekit App Configuration for Azure EU Region
To set the Azure Europe region, refer to the code below:
CONTENTSTACK_API_KEY = <api_key_of_your_stack>
CONTENTSTACK_DELIVERY_TOKEN = <delivery_token_of_the_environment>
CONTENTSTACK_ENVIRONMENT = <environment_name>
CONTENTSTACK_API_HOST = azure-eu-api.contentstack.com
# By default branch=main, if a branch is not provided
CONTENTSTACK_BRANCH = <your_branch_name>
Mandatory configuration parameters to enable Live Preview
CONTENTSTACK_MANAGEMENT_TOKEN = <management_token_of_the_environment>
CONTENTSTACK_APP_HOST = azure-eu-app.contentstack.com
CONTENTSTACK_LIVE_PREVIEW = true
#By default, the live preview feature is enabled for this project. To disable it, set "CONTENTSTACK_LIVE_PREVIEW= false".
CONTENTSTACK_LIVE_EDIT_TAGS = false
#By default, live editing tags are disabled for this project. To enable it, set "CONTENTSTACK_LIVE_EDIT_TAGS= true".