How can I deploy my Angular 2 + Typescript + Webpack app
Solution 1
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.
Solution 2
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.
Solution 3
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
Related videos on Youtube
Antoine Guittet
Developer in Web Technologies located in Paris, I currently am a beNexter. Good practices lover, I prefer thinking whole product than independent features. Feel free to contact me on Twitter.
Updated on July 09, 2022Comments
-
Antoine Guittet almost 2 years
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!
-
Harry over 7 yearsThis 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 thatdist
folder on an external server, not about building thedist
folder. -
Rahul Singh about 7 yearsThe Question Asks about deployment using webpack not Cli
-
Arjun about 7 yearsThis happens to give me a 404.. Do you happen to know why and how to solve it?
-
Arjun about 7 yearsAre the bundle files the ones in the
node_module
dir? -
JoelParke about 7 yearsyes,this is indeed deployment on nginx on server only!
-
sivabudh about 7 yearsThough 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. -
Mehrad Rafigh almost 7 yearsWhen 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.
-
Scipion over 6 yearsangular.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;
-
hakan over 6 yearswhat should be '/path/dist-nginx' actually?
-
Herman Fransen over 6 years@hakan in the configuration file change
/path/dist-nginx
to whatever you like -
Raja Rama Mohan Thavalam over 5 yearsPlease update the location like below. location / { try_files $uri $uri/ /index.html?$query_string; }
-
Sam Doidge about 4 yearsSection 4 is what I needed, rerouting to index.html if url does not exist, as per the Angular docs.