Express server for an Angular application part 1: getting started
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:
- getting started
- serve files from a bucket
- redirect some calls to an external service
- redirect http to https requests
- redirect non-www to www requests
- limit connections and prevent DDoS
- handle some cache
In this first article I will discuss an ultra-minimal setup to get start with express.
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/getting_started
Getting Started
Let’s start with a minimal implementation: a super-simple express server for an angular application that serve files from a local folder.
Take a look to the code:
As you can see the code is really simple: after the imports you can declare variables like the port for the server and the folder that contain the application, then take a look to the two main behaviors.
The static Files
app.server.get(‘*.*’, express.static(_app_folder, {maxAge: ‘1y’}));
This is the simplest implementation of the server for handling static files: every route that contains a point ‘*.*’ ,something like “/style.css”, “/favicon.ico” or “/assets/logo.png” will be served by searching the same resource in dist/application folder.
For example the request “http://localhost:4100/assets/logo.png” will serve to the user the ./dist/application/assets/logo.png file if exists.
The angular application
The second main behavior is the one that handle all other requests, identified by “app.all(‘*’)” that will be redirected to the main file of the dist folder, in other words all the requests that not contain a point will be handled by our Angular application and its internal routes.
You can test the code simply putting your angular application in a folder called “dist” in the same folder of the server.js file and running
$node server.js
now you can open your browser go to http://localhost:4100 and test your static files and Angular routes.
This is the very first step that will lead you to build an express server for angular application. You can download the working example in the reference repository at: https://github.com/mzuccaroli/express_server_for_angular_example/tree/feature/getting_started
The next step is make some modifications that let you host the application and the assets on an external bucket. Click here to view how to serve an angular Application from a bucket.
