Subscribe

How to combine Angular4 and Slim Framework applications into one application for production

This tutorial helps to get any anular4 application into the production with the PHP or any other kind of server side technology, in this one we use the slimframework but the concept remains the same with other server side technologies.

Assumptions:

This tutorial assumes that you are already familiar with Angular2 or Angular4 and also Slim framework. Also that you are able to build application in Angular4, which works as user interface. And in slim framework which works as REST API for Angular frontend.

Tools Needed:

Text Editor or IDE of your choice.

Command terminal for command execution.

Scenario:

Let's say we are developing a REST based Single page application for which we are working on angular4 and slim framework. Now we know that we are running slim on php server and angular on node server and both are on different ports. Looks good when we are developing on a single machine, but what about production environment ? Do we need php based server, or node based server? or both ?

No need to worry, Angular4 is awesome and it has already taken care of such scenario, it lets us compile the TypeScript code into JavaScript and use it as integrated web module within any kind of application.

Directory Structure:

Angular:

When you run the angular app with npm start or ng serve command it should be running and should be accessible on the browser on the dedicated port, because I am using a brand new application I see following screen.

open a terminal and move to the root directory of your Angular project and type following command to prepare the production version of code:

user@machine:/path-to-angular-root/$ ng build --prod

The output will be long one but I have displayed last part only it should look something like this:

Now you should see the directory called "dist" and inside will be all complied dependencies you need with your application. If you go inside this you should see some files like this:

Now in the "dist" directory open the index.html and find tag and replace with tag as shown in the code below, this will tell angular to look for base in relative path instead of root path.

<base href="/">

and replace with

<base href="./">

if you try to access this directly from some kind of serving web server like "apache" it will still be working as in first step. So the first part is now ready.

Slim:

Setting up the slim application is easy and we are not going into details, so you should be able to run the slim application Alright. So let's skip to the part where we make angular run with the slim. Now you need to copy the "dist" directory from angular root to slim. I have placed it in such way that I am able to refer it from my route. In my index I have added the view like this:

I have copied "dist" directory inside "src/public" directory in my slim application and "src/templates" contains the index.html file. Now I just run the application and it will be able to take up angular at the '/' path as shown in the image below.