Deploy Angular + ASP.NET Core 2 + Entity Framework + MySQL application on DigitalOcean’s Ubuntu droplet

If you are looking for deploying Angular application on NgInx server + Digital Ocean's Ubuntu droplet, read below article.

In this article we shall see how to deploy an application built using Angular + ASP.NET Core 2 + Entity Framework + MySQL application on Digital Ocean's Ubuntu droplet.

Application structure

We have the front end web application built using Angular which calls ASP.NET Core 2 REST APIs. ASP.NET Core application reads data from MySQL database using Entity Framework Core framework. We are assuming that development is done and we are ready for deployment.

Build Angular application

First step is to build Angular application in production mode. To do so, run ng build --prod command. This command shall generate dist folder with output files.

Serve Angular application from .NET Core

We want to set Angular application to be served as default route of ASP.NET Core application. For that,

  • Copy all files from dist folder and paste in wwwroot folder of ASP.NET Core folder.
  • In Startup.cs file, update Configure() method by adding app.UseDefaultFiles() and app.UseStaticFiles.

Publish ASP.NET Core application

Publish your ASP.NET Core application either using Visual Studio “Publish” option or use dotnet CLI.

Copy paste published website to droplet using FileZilla or any other FTP tool.

Working with Digital Ocean droplet

Once we have copied all build files to droplet, we can connect to our droplet using Putty or any other SSH tool.

Install NgInx server

Setup MySQL database on Ubuntu DigitalOcean

Import database using command:

mysql -u username -p database_name < file.sql

Install ASP.NET Core SDK

NgInx configuration for ASP.NET Core

Open /etc/nginx/sites-available/default file and update below configuration:

Make sure below line is commented

#try_files $uri $uri/ =404;

Validate Configuartion

Validated nginx configuration by running command sudo nginx -t

Reload Configuration

Reload nginx configuration by running command sudo nginx -s reload

Run application

On droplet, navigate to application output folder and run command

dotnet <app-name>.dll

This shall start web server listening on localhost:5000.

We have configured NgInx server to forward all incoming routes on port 80 to localhost:5000.

Go to browser and hit droplet ip-address. You should get your Angular application running and can access ASP.NET Core REST API.

If you encounter any error, check nginx logs folder for troubleshooting.

Hope you enjoyed this article.

Cheers!

Cloud Solution Architect | Author | Full Stack Developer | https://www.linkedin.com/in/balram-chavan | https://www.hiretheauthor.com/balramchavan

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store