ASP.NET Single Page Apps
This repository is an example of how to serve a SPA application with ASP.NET Core using a web.config to route the client routes to the output of a Create React App. This has been created to work with Azure but would work in any IIS website.
The implementation is made up of the following approach:
- Two separate projects
client(Create React App) and
server(ASP.NET Core MVC)
- Use the regular Create React App
npm startbuild during development and point API requests to the server at
- Enable CORS on the server during development to allow for the front end application
- Use web.config reroute rules to ensure that the static files are served by IIS but API requests are let through to the MVC backend
In order to run the the app you need the following on your machine:
In order to deploy to Azure you will need:
To start development you need to restore the .NET dependencies and the npm dependencies, and set the ASPNETCORE_ENVIRONMENT environement variable to
Follow these instruction to get get the server up and running.
Run the following from the root of the repository to restore your .NET dependencies:
cd src/server dotnet restore
Run the backend
From Visual Studio Code
Install Visual Studio Code, open the root folder and press F5.
From Visual Studio
Install Visual Studio open the project file
src/server/server.csproj and press F5.
From the command line
Run the following from the root of the repository to set the environment variable to be in development mode:
set ASPNETCORE_ENVIRONMENT=Development # on windows export ASPNETCORE_ENVIRONMENT=Development # on mac
Then run the following in a terminal:
cd src/server dotnet restore dotnet run
Front end client
To run the front end client follow these instructions
Restoring NPM packages
Run the following from the root of the repository to install the NPM packages:
cd src/client npm install
Running the app
Run the following from the root of the repository to run the client app:
cd src/client npm start
Pointing to remote API server
If you want to deploy the API somewhere so that you could develop on the frontend without running the server project you need to add the following in a file located at
src/client/.env.local replacing the URI with your development server URI:
Deploying to azure
The first thing you need to do is deploy create the resource group and the resources in it.
Deploying you resrources
This repository contains an Azure Resource Manager Templates (ARM) which will let you deploy
to an Azure web app. First you need to build the client app which will automatically copy the files into
Run the following to log into you Azure account on the CLI.
az login # follow the prompts to login with your Azure account
Run the following replacing
deploymentLocation with an azure location and
resourceGroupName with a name for your resource group.
az group create -l deploymentLocation -n resourceGroupName
Note: You can get the list of available location names from the command
az account list-locationsand take the
Run the following to deploy the required resources to your new resource group, replacing
resourceGroupName with the resource group you created
az group deployment create --template-file azuredeploy.json --resource-group resourceGroupName
Creating a deployment package
You need to first build the client before you deploy the . Use the following instructions to do so.
Build the client
- Run the following from the root of the repository to build the client app (and copy the files in to the server wwwroot folder):
cd src/client npm run build
- Copy the content of the folder
src/client/buildin to the folder
Note: In a production application you would automate this step in your build and not manually copy the files over.
Deploying the published package
The easiest way to deploy the web app to azure is to use Visual Studio 2017 (for Mac or Windows). For a production app you should use a CI/CD pipeline to do this but for the sake of keeping the example simple I have included instructions using Visual Studio.
- Open the file
src/server/server.csprojin Visual Studio.
- In the solution explorer, right click on the project
- Select Publish => Publish to Azure
- If needed sign into the Azure account you used to deploy the resources above
- In the list of Azure App Services click on the app service
resourceGroupName-web-appwhere resourceGroupName is the resource group you created earlier
- Click publish
This should launch the new site in your default browser. If you are not seeing the client app being served up then make sure that you followed the section to build the client first.