X
Back to main site

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”.

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”.

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”.

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".

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".

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".

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”.

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”.

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>"
  }
}

Was this article helpful?

Thanks for your feedbackSmile-icon

On This Page

^