Deploy Angular Project on Live Server.

In this blog, we will see how can we deploy an Angular application on a live server or on a remote server, or shared or production server.Deploy Angular Project on Live Server.?

Here, we will create the production build and upload the output directory to the webserver.

  1. Create the production build of the angular application by following the command:
    ng build –prod
  2. Then, copy all files of the folder created inside the dist/ by default or make a .zip file of it to upload on the server.
  3. Configure the server to redirect requests for missing files to index.html.

Server Configuration Process :

There is no single method or any common method that can be applied to every server. As every server has its own methods and protocols to deploy the application onto the server.

Following are the configuration methods for some of the popular servers:

  1. Apache Server: Add a rewrite rule to the .htaccess file as shown in the following code.

2. Nginx Server: use try_files, as described in Front Controller Pattern Web Apps, modified to serve index.html

try_files $uri $uri/ /index.html;

3. Firebase hosting: Add a rewrite rule for configuration settings.

4. The base tag: In development, you need to provide the path of the root folder as typically you start the server in the folder that holds index.html. Add this code to the index.html file of the server.

<base href="/">

5. Production or Shared Server: If the site is running on www.example.com/myapp/ then the base tag of the index.html file of the server will be :

<base href="www.example.com/myapp/">

So, thanks for following this blog, and if you need any help please leave your queries in the comment box we will be happy to help you.

Deploy Angular Project on Live Server.expoundsofttechsolution