Sample Website with ASP .NET Blazor

Prerequisites

• Contentstack account
• Visual Studio (latest version)
• .NET SDK and .NET Runtime (latest version)
• Contentstack CLI: npm install -g @contentstack/cli

Note: For this tutorial, we have assumed that you are familiar with Contentstack and ASP.NET Blazor. If not, please refer to the Contentstack docs and ASP.Net Blazor for more details. Also, for Visual Studio installation, please follow this link for configuration setup.

Set Up Your App

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

1. Set the Region
2. Log in to your Account
3. Import Content using Seed Command
4. Create Delivery Token
5. Build and Configure the Website
6. Deploy the Website

1. Set the Region

   To use the North America, Europe, Azure North America, Azure Europe ,Google North America, or Google Europe 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.
   • For Google Europe users, set the region as GCP-EU.

2. Log in to your Account

   To import content to your stack, first, you must 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).

3. Import Content

   The seed command lets you import content to your stack in a few steps. To do so, run the following command in your terminal:

   csdx cm:stacks:seed --repo "contentstack/stack-starter-app"

   This command prompts the following options:

   • Organization name: You will get a list of organizations to which you have access. Select the one from the list where your source stack is located or where you want to create a new stack.

     Note: Choose an organization where you are an owner or admin.

   • Stack preference: Next, you will get an option to create a new stack or use an existing stack.
     • If you select New, you must enter the stack name, and the stack creation process will start.
     • If you select Existing, you will get a list of stacks to which you have access in the organization. Choose the destination stack where you want to import the content. If the existing stack has some content, it will ask for a confirmation to continue with the same stack.

       Additional Resource: Refer to the Stack Roles documentation to learn more about permissions.

   Tip: To avoid the chances of any error, we recommend that you select the option of creating a new destination stack. If you import content to an existing stack, ensure that the stack is empty.

   Finally, you will get the content imported to your stack.

4. Create Delivery Token

   A delivery token lets you fetch published content of an environment.

   You can create a delivery token for the “development” environment for running the website on localhost. Later, while deploying your site, you can create tokens for other environments.

5. Build and Configure the Website

   Download the website code

   Navigate to the project folder in Visual Studio and create a configuration file named appsettings.json. Add the following code to the file, provide your credentials, and save the file.

   Note: The below code is for North America region users only. Refer the configuration code for European region, Azure North American region, Azure European region, Google North American, and Google Europe region on the regions configuration page.

   {
     "ContentstackOptions": {
       "Host": "cdn.contentstack.io",
       "ApiKey": "<API_KEY>",
       "DeliveryToken": "<DELIVERY_TOKEN>",
       "Environment": "<ENVIRONMENT_NAME>"
       "Branch": "<your_branch_name>",
       "Region": "<your_region_name>",
     }
   }
   

   Note: Use ASP.NET version 5.0 or above for sample application.

   That’s it! Now that we have a working project ready, you can build and run it.

   You can view the website at the dynamically generated URL http://localhost:<port number>. And you also have the stack that has all the content and resources for the website. Try experimenting by creating new entries and publishing them in the “development” environment. You should be able to see the changes on the website at the localhost.

6. Deploy the Website

   The easiest and quickest way to deploy a .NET starter website on production is to use Heroku. You need a Heroku account before you start deploying.

   Perform the following set of steps to deploy your app:

   1. Log in to Container Registry

      First, you must have Docker set up locally to continue:

      $ docker ps

      Next, log in to the Container Registry:

      $ heroku container:login

   2. Push your Docker-based app

      Build the Dockerfile in the current directory and push the Docker image.

      $ heroku container:push -a <your_application_name> web

   3. Deploy the changes

      Release the newly pushed images to deploy your app.

      $ heroku container:release -a <your_application_name> web

More resources

• View and Download .NET SDK repository on GitHub