How can I deploy my Angular 2 + Typescript + Webpack app

Question

I am actually learning Angular 2 with Typescript and developed a little app by based on the angular-seed project (angular-seed). I have built the app for production purposes and got dist folder ready to be deployed containing my bundle files like this:

dist/                    
  main.bundle.js              
  main.map         
  polyfills.bundle.js          
  polyfills.map            
  vendor.bundle.js         
  vendor.map

However, as a fresher, I have no idea how to deploy it now on my EC2 server. I read that I have to config Nginx server to serve my static file but do I have to config it particularly to work with my bundle files?

Excuse my mistakes if any. Thanks a lot in advance!

score 26 · Accepted Answer · answered Sep 21 '16 at 17:32

26

You are on the right track.....

Just install the nginx on your EC2. In my case I had a linux Ubuntu 14.04 installed on "Digital Ocean".

First I updated the apt-get package lists:

sudo apt-get update

Then install Nginx using apt-get:

sudo apt-get install nginx

Then open the default server block configuration file for editing:

sudo vi /etc/nginx/sites-available/default

Delete everything in this configuration file and paste the following content:

server {
    listen 80 default_server;
    root /path/dist-nginx;
    index index.html index.htm;
    server_name localhost;
    location / {
        try_files $uri $uri/ =404;
    }
}

To make the changes active, restart the webserver nginx:

sudo service nginx restart

Then copy index.html and the bundle files to /path/dist-nginx on your server and you are up and running.

answered Sep 21 '16 at 17:32

Herman Fransen

2,200
5
24
40

1

This happens to give me a 404.. Do you happen to know why and how to solve it? – Arjun Feb 27 '17 at 11:27
Are the bundle files the ones in the `node_module` dir? – Arjun Feb 27 '17 at 12:13
2

When you are using the Angular Router and build your app with the --prod tag, you should slightly modify your nginx config. Check out the [angular.io Deployment Page](https://angular.io/guide/deployment). – Mehrad Rafigh Jul 25 '17 at 07:13
https://angular.io/guide/deployment#fallback Configure the server to redirect requests for missing files to index.html. More on this below. try_files $uri $uri/ index.html; – Scipion Aug 08 '17 at 06:55
1

what should be '/path/dist-nginx' actually? – hakan Sep 05 '17 at 13:09
@hakan in the configuration file change `/path/dist-nginx` to whatever you like – Herman Fransen Oct 22 '17 at 18:19
Please update the location like below. location / { try_files $uri $uri/ /index.html?$query_string; } – Raja Rama Mohan Thavalam Aug 24 '18 at 07:36

viks · Answer 2 · 2018-03-24T08:48:35.093

If anyone still struggling with production setup of angular 2/4/5 app + Nginx, then here is the complete solution:

Suppose you want to deploy your angular app at HOST: http://example.com and PORT: 8080 Note - HOST and PORT might be different in your case.

Make sure you have <base href="/"> in you index.html head tag.

Firstly, go to your angular repo (i.e. /home/user/helloWorld) path at your machine.
Then build /dist for your production server using the following command:

ng build --prod --base-href http://example.com:8080
Now copy /dist (i.e. /home/user/helloWorld/dist) folder from your machine's angular repo to the remote machine where you want to host your production server.

Now login to your remote server and add following nginx server configuration.

server {

    listen 8080;

    server_name http://example.com;

    root /path/to/your/dist/location;

    # eg. root /home/admin/helloWorld/dist

    index index.html index.htm;

    location / {

        try_files $uri $uri/ /index.html;

        # This will allow you to refresh page in your angular app. Which will not give error 404.

    }

}

Now restart nginx.
That's it !! Now you can access your angular app at http://example.com:8080

Hope it will be helpful.

Section 4 is what I needed, rerouting to index.html if url does not exist, as per the Angular docs. — Sam Doidge, Mar 14 '20 at 17:22

score 7 · Answer 3 · answered Mar 30 '17 at 12:14

A quicker way to deploy is as below:

1. Install nginx as mentioned by Herman.
2. Copy your dist/* files to /var/www/html/ without disturbing /etc/nginx/sites-available/default.
sudo cp /your/path/to/dist/* /var/www/html/
3. Restart nginx:
sudo systemctl restart nginx

score 0 · Answer 4 · answered Sep 21 '16 at 10:15

0

I'm using the official angular CLI instead to deploy to production and is very easy to do. You can deploy to pre-production ie, or production this way:

ng build --env=pre --output-path=build/pre/

ng build --env=prod --output-path=build/prod/

answered Sep 21 '16 at 10:15

Xavi Cl

55
6

7

This doesn't answer the question. The question is asking about deployment on a server, and already has the app built into a `dist` folder. The question is asking about deploying that `dist` folder on an external server, not about building the `dist` folder. – Harry Nov 23 '16 at 11:30
The Question Asks about deployment using webpack not Cli – Rahul Singh Feb 03 '17 at 08:51
yes,this is indeed deployment on nginx on server only! – JoelParke Mar 27 '17 at 16:29
3

Though it doesn't answer the question, I think the answer has some merits in that `ng build` might offer a better way to deploy to production than using NGINX. – sivabudh Apr 30 '17 at 08:24

How can I deploy my Angular 2 + Typescript + Webpack app

4 Answers4

Linked