How to properly get Angular and Nginx working together for development

Maybe you want to start developing or learning Angular using a virtual machine, you might already have nginx installed and want to serve your Angular application using nginx.

Following the angular quickstart guide and create your app your-app . I have done the next steps to finally get ng serve and nginx working together in a proper way.

After following the guide I just placed a nginx.conf file inside my project under /your-app/config/nginx.conf and linked it with /etc/nginx/sites-enabled/your-app.conf.

The pragmatic way

The first thing you might think of: “Easy, simply put your /dist folder as root in your nginx config and use ng build to update the build.” All you have to do now is hit F5 in your browser and you are ready to go.

Using the following config you can open up your app:

server {
    listen 80;

    server_name your.app;
    root /vagrant/your.app/dist/your.app

    location / {
        try_files $uri $uri/ /index.html;
    }
}

But then you have to run ng build again after you have done changes to your source. You might want to use the--watch parameter to simply get the build to rerun if you sources change. Calling http://your.app on your host machine just works fine.

Remember you might want to update your hosts file to map your.app to your localhost when using a virtual machine.

The better way

But there is a better way to get your browser to reload on its own if you make changes: ng serve will run a local server (default http:/localhost:4200 ) and serve the angular compiled source directly to your browser.

Now you can use almost the same nginx config as above but you have to make an adjustment. We need to use proxy_pass to actual call the internal running node server on localhost:4200 .

server {
    listen 80;

    server_name your.app;

    location / {
        proxy_pass http://localhost:4200;
        proxy_set_header Host $host;
    }
}

Make sure you run your ng serve with the --public-host http://your.app parameter or your application will refuse to launch.

After restarting your nginx you should see your app if you open the browser on your host machine.

The websocket problem

After you open up the console you might see an error like:

WebSocket connection to ‘ws://your-app/sockjs-node/884/1u4qfrnl/websocket’ failed: Error during WebSocket handshake: Unexpected response code: 400

This is because WebSockets uses two HTTP headers. The Connection and Upgrade header. After we configured our nginx to use a proxy_pass we need to pass additional headers.

server {
    listen 80;

    server_name your.app;

    location / {
        proxy_pass http://localhost:4200;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $http_connection;
        proxy_set_header Host $host;
    }
}

After we have done this, your console should be clean of errors and your browser should automatically reload after you do changes to your source code.