Deploying the App

At the moment, we’re the only ones that can preview the application. We can’t share it with anyone. That’s a shame. We’ve worked very hard on this app. I think it would be a good idea to share it with the world.

The first thing we need to do is pick a hosting service. There are dozens of services available. Every single one of them has its pros and cons. You will need to do some research to find out which service best suits you. Some of the most popular services are Heroku, Digital Ocean, AWS, and Netlify. I consider them all to be great choices.

For this application, we’re going to deploy to a service called Vercel. Vercel is a service for deploying/hosting your applications. It supports dozens of frameworks and languages out of the box, including Angular. It’s my personal favorite. I use it for clients and personal projects. It’s quick and painless. Hopefully, by the end of this lesson, you’ll love it too.

You can sign up here: https://vercel.com/.

Signing up is free and easy. You don’t need a credit card for an account. They allow you to upload hobby projects for free. You don’t have to pay anything for them to host your project.

Installing Vercel

Once you’ve got an account, let’s begin deploying the project.

Note: If you’ve been using the Educative widgets to run the examples, you can download a copy of the files here.

Vercel comes with a tool for deploying projects with a single command. We’ll need to install the tool if we want to deploy the project.

In your terminal, run the following command.

npm i -g vercel

It’s essential that we install this as a global command. This way, we can use it with any project.

Vercel is a command tool for interacting with Vercel. It helps you deploy a project to Vercel. The next thing we need to do is connect our account. The Vercel tool won’t know where to upload the files if it doesn’t know which account to use. We can connect an account by running the following command:

vercel login

After running the command, you’ll be prompted to provide your email. A confirmation email will be sent. Verify your email before continuing.

Deploying with Vercel

The application can be deployed with the following command:

vercel

1. It will ask us a few questions about the project. Let’s run through them together.

2. The first question it will ask you is if you’re sure about deploying your project. Select Yes.

3. The next question will ask you which account you’d like to upload to. Your name should appear in the list. Select it by pressing enter.

4. Then, it will ask you if you would like to link this project with an existing project in Vercel. This is a brand new project, so we’ll select No.

5. Afterward, it will ask you for the name of the project. By default, it will use the name of the directory the command is running in. We’ll use the default.

6. Up next, it will ask for the directory in which the project is created. Vercel is compatible with dozens of frameworks. It can even build projects for you. You don’t have to build it yourself. It will detect what framework you’re using and run the appropriate commands for building the project. If you would like to let it build the project for you, you can leave this at the default value, which is the root directory of the project. We’ll let Vercel build the project.

7. It will detect that we’re using Angular as our framework and will determine which commands to run. It should be able to identify the build command as: ng build. If it is, proceed onto the next step.

It will begin to deploy the project to your account. This will take a few moments.

We’re finished!

This project has been successfully deployed. You can view the project by clicking on the link in the log. Vercel will provide you with a custom URL for viewing your project.

Here’s the URL to my deployment of the project: https://reverse-phrase.now.sh/.

Hopefully, I’ve convinced you that Vercel is a service you should consider for deploying your projects. It can offer so much more. We’ve only scratched the surface.

The build command

So far, we’ve been using the ng serve command to build our project. The ng serve command will create a development server and watch our files for any changes. If any changes are made, it will compile the project with the changes. After the code’s been compiled, the page on the browser reloads. This is great for development, but it’s not what we’ll want to use for production.

The ng serve command doesn’t fully optimize the build for production. It’s only meant for development. If we want to build the project for production, we’ll need to use the ng build command. Unlike the ng serve command, this command will compile and minify the project. It will remove development dependencies, optimize the build, and deliver your files in a single directory. This is the command that Vercel used to build the project before deploying it.

The compiled project can be found in a directory called dist. The files you’ll find in this directory are the files you’ll want to deploy to the host. You don’t need to deploy anything outside of this.