[MUSIC]
Last question that might arise in your mind is how do I build and
deploy the Angular application?
If you recall, in the earlier course on Bootstrap 4,
we learned about how to use the MPM scripts or grand or
culp to build the distribution folder, in order to build our web application.
Now, with Angular application that we have been developing in this course,
we have the help of the Angular CLI.
The Angular CLI provides a build command that enables us to build our Angular
application, build the distribution folder and then have all the files for
our Angular application compiled and ready to deploy to a server site.
So that is what we're going to learn in this exercise.
To go forward with building and deploying our Angular application at
the prompt type ng building -- because we want to develop the production
version of our Angular application that can be deployed to a server.
So to do that, at the prompt, as I mentioned, type ng
build --prod, and then let the build process complete.
This will take a little bit of time for the build process to be completed.
After the build process is complete,
you will see that the distribution folder will now be ready.
Once the building process completes successfully, so
you can see that it's all green there, so the distribution folder is now prepared.
Now how do we deploy Angular application?
Now in this case if we have a server where you can deploy your web application,
then it is just a matter of copying the contents of
the distribution folder directly to the server.
And then your Angular application will be up and running in no time.
Now, fortunately, we already have our JSON server running there.
So we're going to use our JSON server and
the public folder of our JSON server, so they will copy the entire contents
of the distribution folder to the public folder of our JSON server.
Going to the conFusion folder, where our application is stored,
we'll move now into the distribution folder.
You'll see that the distribution folder has been created.
So you'll go into the distribution folder and
you'll see that a bunch of files have been created by the Angular CLI build process.
Let's just copy the entire contents of this folder, and
then we will go to the JSON server, which is in the json-server folder here and
go to public folder of the json-server folder.
And then we'll simply copy the contents into this public folder.
Now your Angular application should be available at localhost:3000 because
your JSON server will serve up whatever is in the public folder at localhost:3000.
Going to a browser, now in a new tab I'll just type localhost:3000 and
you will see that your Angular application will now be up and running in no time.
So this is how you would deploy your Angular application.
Now, of course, in this case, since we have our server under our control,
it's just a matter of copying the files into the server side.
Now, if you are going to be doing this deployment on a real server in the Cloud,
then you just need to follow the directions that are given by
the Cloud service provider in order to step up the server side.
So they might have a public folder that might be supported on their cloud server.
So in that case, you might simply need to copy your distribution
folder's contents to the public server folder at your cloud service provider.
Of course you also need to ensure there is a back end
server running that supports the REST API.
In our case, the JSON server is serving the purpose.
When you complete the final course in this specialization,
where we deal with the server side development using Node-JS,
you will learn the procedure for building your own custom REST API server.
So in that case, then within the REST API server there will be a public folder that
will support it, and then you'd
need to copy your Angular application to the public folder on your server side.
That is how you would deploy your Angular application.
With this, we complete this exercise.
In this exercise we have learned how to deploy our Angular
application to a server.
And how to make use of the Angular CLI to build a production version of our
Angular application before we do the deployment of our Angular
application to the server side.
[MUSIC]