Express server for an Angular application part 2: serve files from a bucket

Express.js is a web application framework for Node.js designed for building web applications, in this series of articles I will explain step by step how i realized an express server with some advanced functions that i use for my single page application made with Angular 7.

I will discuss the 7 main problem that i solved in different articles:

1. getting started
2. serve files from a bucket
3. redirect some calls to an external service
4. redirect http to https requests
5. redirect non-www to www requests
6. limit connections and prevent DDoS
7. handle some cache

In this second article I will discuss how to serve files hosted on an external bucket.

Reference repository

A working example of this project is available at:

https://github.com/mzuccaroli/express_server_for_angular_example the master branch contain the final full project but there’s a dedicated branch for every single article, for this one the reference is: https://github.com/mzuccaroli/express_server_for_angular_example/tree/feature/angular_from_bucket

Why you should use a bucket

When you are handling a javascript single page application, like an Angular one, It’s a good idea to host all the static files in a dedicated repository like an Amazon s3 bucket. With some little modification on your basic express server you will be able to separate the running server from the angular application. In this way you will be able to take the advantages of both solutions: run a small and super optimized express server in a dedicated environment and host the static js files and assets in a cheaper bucket.

Let’s assume that a copy of your application’s build is deployed on ‘http://static.test.com.s3-website-eu-west-1.amazonaws.com'. You can start from the basic server created in my previous article and make some modifications in the code.

First of all you can store your bucket address in a variabile:

const _bucketAddress = ‘http://static.test.com.s3-website-eu-west-1.amazonaws.com';

Serve static files from a bucket

In your code find the static files handling part and change it with:

As you can see this code redirect all the static files requests to the bucket, acting as a reverse proxy, you can add a little improvement by identifying the specific file extensions in the path’s regular expression. In this way you can take control on which static files you want to serve directly from your bucket.

Serve application paths from a bucket

Find the application paths code and change it with:

the main application modification is quite simple, note that you can add advanced url handling if you need it: a typical example could be serving different language-specific builds on dedicated pahs, if you want more info on a multi-language application with Angular you can see this article

Now you can put your Angular application in your bucket and run

$node server.js

open your browser go to http://localhost:4100 as you can see the application will work fine.

Note that this little modifications are big improvements for your application:

• the server code and the application code totally separated and can be deployed with different methods and pipelines
• your express server is a small javascript application and could easily became a Lambda function if you are using Amazon environments, this is the first step for a serverless approach
• the decoupling of the server and the application make you able to add some advanced features if you need: your server can handle multiple applications in different buckets or the same application could be served by different servers in different contexts

The next step of you express journey is handle some special routes and redirect them to an external server: redirect some calls to an external service