Angular build production

In this tutorial, How to use Angular build production on server Linux VPS.

Building for Production

In development, you have run ng serve command for your application. What about for Angular production? If you look at “package.json” file as below

Now, To build script use the Angular CLI ng build with the –prod flag as below

$ ng build --prod

The during run “build –prod” also create a new folder called dist folder. You need to have server Nginx or Apache for all request to this index.html

How to configure Nginx in production to serve an Angular app

server {
listen 80;
listen [::]:80 ipv6only=on;
if ($host = www.devopsroles.com) {
return 301 https://$host$request_uri;
}
if ($host = devopsroles.com) {
return 301 https://$host$request_uri;
}
server_name www.devopsroles.com devopsroles.com;
return 444;
}

server {
server_name www.devopsroles.com devopsroles.com;
root /var/www/devopsroles.com/dist/devopsroles;
index index.html index.htm;
access_log off;
error_log /var/www/devopsroles.com/logs/error.log;

location / {
try_files $uri $uri/ index.html;
}
location ~ ^/(scripts.*js|styles|images) {
gzip_static on;
expires 1y;
add_header Cache-Control public;
add_header ETag "";

break;
}
listen 443 ssl http2 ; # managed by Certbot
listen [::]:443 ssl http2;
ssl_certificate /etc/letsencrypt/live/devopsroles.com/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/devopsroles.com/privkey.pem; # managed by Certbot
}

Conclusion

Thought the article, You can use “Angular build production” as above . I hope will this your helpful. Thank you for reading the DevopsRoles page!