CODEWITHSUNDEEP
angulardockerangular2-routinghtml5mode
vimal prakash
vimal prakash

Reputation: 1499

How to deploy angular2 app with HTML5 Mode with docker container

How to deploy angular2 app with docker container,

Currently I am using Node js with express to serve my app content,

index.js

 // set server port. SERVER_PORT varibale will come from Dockerfile
var port = process.env.SERVER_PORT;
if (!port) {
    port = 3000;
}
// set internal communication url
global.internalURL = "http://localhost:" + port;

var path = require('path');
var express = require('express');
var app = express();
var bodyParser = require("body-parser");

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: true
}));

app.use(function(req, res, next) {

    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', '*');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, OPTIONS, PATCH, DELETE');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,access_token');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);
    next();
});

var router = express.Router(express);
app.use("/testapp", router);

router.use(express.static(path.join(__dirname, 'dist')));

// Catch all other routes and return the index file
router.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist/index.html'));
});

var server = app.listen(port, function() {
    console.log("server on " + port);
});

my base URL

<base href="/testapp/">

My Docker File

FROM node
COPY ./package-deploy.json /package.json
COPY ./index.js /index.js
RUN npm install pm2 -g
COPY ./dist /dist
RUN npm install --only=production
ENV SERVER_PORT 80
EXPOSE 80
CMD pm2-docker index.js

Building

ng build

docker build -t testapp:v1 .

This method works perfectly. But I like to know , is there any better way to Run Angular 2 App with HTML5 Mode?

Upvotes: 0

Views: 1001

Answers (1)

Supamiu
Supamiu

Reputation: 8731

Building an angular application in a docker image is pretty simple once you know how to:

  1. Build the application ng build --prod
  2. Add .htaccess file
  3. Copy dist to an httpd image.
  4. Profit

Using this method will remove express logic from your code, meaning that you'll have to manage less code and concentrate on the application itself.

Example Dockerfile:

FROM httpd:2.4

COPY ./dist /usr/local/apache2/htdocs

COPY ./.htaccess /usr/local/apache2/htdocs

.htaccess file you need to have at the root of your application:

<IfModule mod_rewrite.c>
  Options Indexes FollowSymLinks
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Feel free to look for more details on the project if you need.

Edit:

The Dockerfile I linked to you is built in a CI process where the app building has already been done. Of course you have to build the application before building the image.

I'm doing that because this way, the original typescript code and the css are not served on the web, so they are unreachable from the website itself.

Upvotes: 1

Related Questions