4002. Deploying Web Applications to Cloud Services
Heroku, Azure, EC2, Netlify, and Travis CI

Tutorial for how to deploy Angular, React and Node.js applications to cloud services.

1. Deployment

1.1 Deployment Types

Before deploy your apps, you need to first understand what is the app type.

  • Static Sites(built with Angular, React, or other front-end frameworks)
  • Server(built with Node Express, ASP.NET, PHP, Python, Spring, etc.)
  • Full Stack(including both client and server)

1.2 Cloud Services

There are many cloud services where you can deploy angular, react or express applications. Your web applications are served by their servers and can be accessed globally through internet. Some of them provide free cost for hosting your sites. Also, they provide paid options for more advanced features.

  • Heroku: https://www.heroku.com/
  • Azure: https://portal.azure.com/
  • Amazon EC2: https://aws.amazon.com/ec2/
  • Netlify(Static sites only): https://www.netlify.com/

2. Tutorials for Deployment

2.1 Static Sites

Angular or React app will be compiled to static files when these kinds of apps are deployed to server. Even if they may call backend server(eg. RESTful services) to fetch data, they are still static sites from the deployment perspective.

2.2 Server Sites

In the most of cases, when we are talking about Node.js apps, we are actually talking about Express applications. As every productive Node.js app has a web server and express is the best web server for Node.js.

2.3 Full Stack Sites

We may have the capability to build the entire web application from backend to front end. For example, we use so called MEAN stack (MongoDB+Express+Angular+Node.js) to build an online judge application. In this case, we need to deploy both the client and the server.

2.4 Three Ways to Deploy Angular App to Heroku

For Angular or React apps, we can deploy them as static websites after build them locally. Or, we can let the server to build and serve them with express server. In addition, we can use Travis to deploy them continuously.

3. CI/CD

Continuous integration and continuous delivery.

4. References