Angular Build and deploy web app On Server - Wamp

Hey guys, in this post we are going to see how to build the Angular web application and how do deploy the application solely on the server. In this post, we are going to deploy the app on the wamp server. Let’s do it step by step.

[ If you are preparing for an interview please click here - angular interview questions and answers ]
[ Create a shortcut for your angular application without installing any plugin please click here to go to our post ]

We are going to use our same previous example (previous example) to build and deploy.

At very first, Build the application with the following command.

Command: ng build --prod

Here we have got build. Many times we got an error while building the angular web app despite it is running very fine when we do “ng serve”. So you have to take care of that, you have to find and solve errors if any exists.

On a successful run of build, you will get folder “dist” under your project folder at the same level where “src”, “node_modules” exists.

Now you are ready with build of your web application. Let's install wamp server.

Go to http://www.wampserver.com  And download the wamp server.

Once download completed, install wamp the server on your machine.

After successful installation, go to system tray and you will find small “w” icon, click on icon and say start all services.

After starting server go to the “www” folder of wamp server, to go to www folder click on small “w” icon in the system tray and you will get an option saying “www directory” click on same.

Delete everything under “www” directory/folder and paste all your content from the “dist” folder of your project(which we got from a build of our project)  to the “www” folder.

Go to browser and type “localhost” -> enter

Yeah  we have deployed our angular app into the wamp server.

Here is the build of our project

[get me the project]