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

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.

Apache

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
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

Nginx

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


try_files $uri $uri/ /index.html;

Ruby

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')
end

IIS

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


<system.webServer>
  <rewrite>
    <rules>
      <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" />
        </conditions>
        <action type="Rewrite" url="/index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

Firebase hosting

add a rewrite rule.


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

Credit: Angular.io

Amazon S3 app deployment Dreamhost firebase server web

« Previous Next »