Yogesh Chauhan's Blog

How to deploy Angular App on Dreamhost or Amazon S3 or firebase?

in Angular on October 10, 2020

Bundle an Angular app for Production/Deployment

For the simplest deployment, create a production build and copy the output directory to a web server.

Step 1

Start with the production build:

NOTE: The code below works from Typescript 2.x to 9.x (Angular CLI)

ng build --prod

Step 2

After the first step, a dist folder will be crated in your main app root folder.

Copy everything within the output folder (dist/) to a folder on the server.

The code from folder is definitely going to work on the server if it’s working on your local machine.

💡 But to be absolutely sure, you can get a preview of the app using the ng serve --prod command.

It will start a local HTTP server and you can run your app using http://localhost:4200, same way you run any Angular app.

If everything goes well, then go ahead with your production.

💡 For that all you have to do is to deploy all the files from the dist folder on the HTTP server.

Step 3

Configure the server to redirect requests for missing files to index.html.

Server configuration

Routed apps must fallback to index.html

Angular apps are perfect candidates for serving with a simple static HTML server.

📌 You don’t need a server-side engine to dynamically compose application pages because Angular does that on the client-side.

If the app uses the Angular router, you must configure the server to return the application’s host page (index.html) when asked for a file that it does not have.

A routed application should support “deep links”.

📌 A deep link is a URL that specifies a path to a component inside the app.

For example, http://www.mysite.com/heroes/42 is a deep link to the hero detail page that displays the hero with id: 42.

There is no issue when the user navigates to that URL from within a running client.

The Angular router interprets the URL and routes to that page and hero.

But clicking a link in an email, entering it in the browser address bar, or merely refreshing the browser while on the hero detail page — all of these actions are handled by the browser itself, outside the running application.

The browser makes a direct request to the server for that URL, bypassing the router.

A static server routinely returns index.html when it receives a request for http://www.mysite.com/.

But it rejects http://www.mysite.com/heroes/42 and returns a 404 – Not Found error unless it is configured to return index.html instead.

Fallback configuration examples

There is no single configuration that works for every server.

The following sections describe configurations for some of the most popular servers.

The list is by no means exhaustive, but should provide you with a good starting point.


add a rewrite rule to the .htaccess file as shown

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html


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

try_files $uri $uri/ /index.html;


create a Ruby server using (sinatra) with a basic Ruby file that configures the server server.rb:

require 'sinatra'

# Folder structure
# .
# -- server.rb
# -- public
#    |-- dist
#        |-- index.html

get '/' do
    folderDir = settings.public_folder + '/dist'  # ng build output folder
    send_file File.join(folderDir, 'index.html')


add a rewrite rule to web.config, similar to the one shown here:

      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        <action type="Rewrite" url="/index.html" />

Firebase hosting

add a rewrite rule.

"rewrites": [ {
  "source": "**",
  "destination": "/index.html"
} ]

Credit: Angular.io

Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
Subquery in PostgresPostgres@use rule in SCSS (Sass)SCSSHow to Use password_hash and password_verify to Secure Your User’s Data (Especially Passwords)?PHPHow to add AppRoutingModule in Angular application using command line?AngularSolution to pod install fails with json error on Mac OS X 10.15 (or Mac OS Catalina)MiscellaneousAngular 9 time clock update every minute, second, hourAngular