Use Angular 2 from an ExpressJS Application

Most Angular 2 starter projects use a development time web server. This will not work well if you are developing the application using Node and Express. An Angular 2 project works best when it is the document root of a web server. This requires a bit of careful planning.

In today’s post I will explore how to create a Express application that uses Angular 2. We will explore two separate approaches:

  • A single project hosting both Node and Angular 2 code.
  • Separate projects for Node and Angular 2 code.

We will use generators and official starter projects whenever possible. This will help you follow along this article and experiment quickly.

The Single Project Approach

In this approach we will have both Express and Angular 2 under a single project structure. The advantage of this approach is mainly simplicity. There is only one project to manage in version control and one project to deploy. This is suitable for simple and small projects involving a small team.

Generate the Express Project

Install express-generator.

sudo npm install express-generator -g

Create an Express project called mywebapp.

express mywebapp

Install the necessary packages by running this command.

cd mywebapp
npm install

Let’s quickly test things out before going forward. Start the Express web server.

npm start

By default the generator adds a simple web service route for the “/users” end point. Run it to make sure things are working.

curl localhost:3000/users

This should simply print out: respond with a resource.

Great! Let’s go ahead and add Angular 2 to our project.

Add Angular 2

We will use the Angular 2 starter project.

From the Express project’s root folder run this command.

git clone https://github.com/angular/quickstart.git MyAppFrontEnd

This will create a folder called MyAppFrontEnd and add the starter project there.

Install the required packages by running this command.

cd MyAppFrontEnd
npm install

While still in the MyAppFrontEnd folder run this to compile all Typescript code.

npm run tsc

The way the Angular 2 starter project is setup, it must be the document root of the web server. That is, the web server’s static files must be served from the root of the starter project (“MyAppFrontEnd” in our case). We need to make a few changes to the Express project for this to work.

Open mywebapp/app.js that was generated by the Express generator. Change the document root of static files from public to static as follows:

app.use(express.static(path.join(__dirname, 'MyAppFrontEnd')));

Note: You should probably delete the old public folder now to avoid any confusion.

We need to remove the route for the “/” path that was added by the generator. This is because we need to load MyAppFrontEnd/index.html provided by Angular 2 for the “/” path. Delete this line or comment it out.

app.use('/', index);

Save changes.

Let’s test the changes out. Stop and start the Node server. Open a browser and enter the URL: http://localhost:3000/. You should see the home page of the Angular 2 starter app.

Now you will be able to develop your Express backend and Angular 2 front end from the same project. For example, your Angular 2 front end can now consume the web service exposed by the “/users” endpoint.

If you change any Angular 2 Typescript code you will need to recompile them from the Angular 2 root folder (MyAppFrontEnd in our case). You can then simply refresh the browser to reload the front end code.

If you change Express code you will need to restart the server and refresh the browser.

The Separate Project Approach

Alternatively you may decide not to host the front end in the same project as the back end. In that case your Angular 2 code will reside in a separate project from your Express code. This can buy you several advantages:

  • Different teams can work independently on these projects.
  • The web service API may be consumed by many other web apps and mobile apps. In that case it makes sense for the web services to be in their own separate project.
  • This approach lets you serve static files using a regular web server like Apache or Nginx. This frees up the single threaded Node web server to serve only web service calls. This can have a very positive impact on performance.
  • You can configure SSL in a regular web server.

This approach is recommended for larger projects involving a team of several people.

The basic approach is this:

  • We will serve Angular 2 files directly by a regular web server like Apache or Ngnix. Angular 2 code files are static and so this should be easy to configure.
  • We will set up a reverse proxy from the web server to Node’s server. Web service calls will be forwarded by the web server to Node.

Setup the Web Server

We will now configure the web server according to the basic approach described above. First, let’s create a virtual host. This will have a document root that will point to the folder where we have Angular 2 code.

<VirtualHost _default_:80>
DocumentRoot "/Library/WebServer/Documents/MyAppFrontEnd"
ServerName myapp.example.com
ProxyPass /api http://localhost:3000
ProxyPassReverse /api https://localhost:3000
</VirtualHost>

This is what we did here:

  • The Angular 2 code will be located in /Library/WebServer/Documents/MyAppFrontEnd. Of course, you can keep any other static files like images and CSS there. Generally speaking use a web server to server all static files.
  • From the browser we will use the host name myapp.example.com to access this app. Obviously, in your case this will be different.
  • All URL requests starting with /api will be routed to Node. For example, a request for /api/users will be routed to http://localhost:3000/users. Note that /api is stripped out during forwarding. That means, you don’t have to change the routing configuration in your Express code. \o/ Yay! Just make sure that your Angular 2 front end now consumes the Express web service exposed by the /users endpoint using /api/users.

It is highly recommended that you disable static file serving from Express at this point. Simply delete or comment out the line:

app.use(express.static(path.join(__dirname, 'public')));
Advertisements

One thought on “Use Angular 2 from an ExpressJS Application

  1. The single project approach here doesn’t work (any more). I believe in one the iterations, along with the introduction of angular 4, the index.html file is no longer in the root (frontend) directory of the quickstart repo. It is now in the src folder. I tried changing the express static loader from “MyAppFrontEnd” to “MyAppFrontEnd/src”, and it loads something but then errors out.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s