In this lecture, we're going to deploy our app to production.
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 research to find out which service suits you best.
Some of the most popular services are Heroku, Digital Ocean, IWC and Net Fi.
I consider them to be great choices for this application.
We're going to deploy it to a service called Vessel for Cell is a service for deploying your applications.
It supports dozens of frameworks and languages out of the box.
This includes angular.
It's my personal favorite.
I use it for client and personal projects.
It's quick and painless.
Hopefully, by the end of this lecture, you'll love it too.
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.
Pause the video, register an account and log in.
Once you've got an account, we can begin deploying the project first.
We need to configure our project for virtual.
In the resource section of this lecture, I provide a link to the Project Configuration Documentation
page.
Typically, we would be able to deploy our project without configuring it for virtual.
For Sale is optimized for most apps.
However, we haven't developed a regular app.
Our app is using FFmpeg, which is a cutting edge feature.
As we encountered before, specific headers must be added to the response headers.
They are the cross origin opener policy and cross origin and better policy headers.
These headers were added to our development server by deploying our project to Percell.
These headers will not be available on resells servers.
Luckily, Virtuelle allows developers to modify the headers given by their servers.
We can create a file called virtual JSON to configure for cells response headers.
This documentation page will provide you with a list of settings you can add to this file.
Let's switch over to our project in our editors.
In the root directory of the project, let's add a file called for Cell.
Jason.
Inside this file, we can add an object of configuration settings.
We're only interested in adding headers, headers can be added with the headers option.
The headers option will be an array of objects.
Each object can configure a specific endpoint in our app.
For example, we can apply headers to one path or several paths.
In our case, we're going to apply headers to all paths.
Let's add an object with a property called source.
These source properties should store the path to apply the header to.
We're going to apply the headers to all pass.
Let's set the path to the following value slash.
Dot asterisk.
This value acts as a wild card selector for all paths.
The next option will add to the object is an array called headers.
In this array, we can add objects to represent a single header, for this example.
We're going to add two objects since we're trying to add two headers, these headers will be applied
to all responses.
Let's start with the cross origin opener policy inside the first object at a property called key with
a value of cross origin opener policy.
The next property will be called value with the value of same origin.
The key property will store the name of the header while the value property will hold the value for
the header.
Let's update the second object with the cross origin and better policy header.
The value for this header will be REQUIR Corp..
By adding the four cell JSON file to the root directory of our project, cell will apply the settings
in this file to its servers.
Let's begin by deploying this project to her cell.
We have two options for deploying a project.
We can install a command line tool to initiate the deployment process.
Alternatively, we can tell her cell to fetch our files from a GitHub repository.
I think the second option is better if we update our project where a cell can redeploy our project automatically.
It's a very convenient feature to have.
Best of all, it's straightforward to configure.
In the resource section of this lecture, I provide a link to a tool called Git Hub Desktop.
This program provides a UI for uploading projects to GitHub.
It's completely optional to install this program.
You are more than free to upload a project with the command line, too.
However, I think it makes things easier.
I have it installed on my machine.
I recommend you install it, too.
After installing it, open it on your machine.
From the program, we can add a new local repository by going to file add local repository.
From there, you can search for your angler project.
I've already done so.
Next, we need to commit the changes we made to our project on the left side.
There's a list of files that have been modified.
Make sure they're all checked.
We're going to commit all files from our project on the bottom left corner.
We can add a description for commitments.
I'm going to input the following message.
Completed project.
Lastly, I'll commit the changes.
After committing our changes, we can publish our repository to GitHub.
You can click on the button to do so before publishing our project.
The program will ask us for a couple of details.
Feel free to modify this information.
I think the default values are fine.
It's also optional for the repository to be private for cell will be able to fetch files from a private
or public repository.
Let's publish our project.
After a few moments, everything should be uploaded to GitHub.
The next step is to tell a cell to fetch file from our repository in your browser, navigate to leave
your cell dashboard.
On the dashboard, you'll be presented with a list of projects registered with your account, as you
can see.
I have a couple of projects uploaded.
We can add a new project by clicking on the new button.
Will be presented with two options we can import a project from a repository or we can use a template.
Let's import our project from GitHub.
First, we need to connect our GitHub accounts.
I'm going to quickly do so.
After connecting our accounts for cell will provide us with a list of projects in our accounts.
I'm going to import the clips project.
Next, Rachel, is going to ask us about our project.
First, it's going to ask us to create a team.
This feature is available for premium members.
We're going to skip this feature.
Up next, we are going to be asked to configure our project settings right away for Cell is able to
detect the framework used by our project.
It'll know exactly how to build our project.
This is one of the most compelling features of our cell.
It's able to build our project with its servers.
We can avoid building the project ourselves.
The default settings are optimized for our project.
However, you're more than welcome to modify these settings.
I'm going to click on Deploy after doing so for Cell will begin building our project.
The deployment will take a couple of minutes while Versfeld does its thing.
Let's talk about building a project.
So far, we've been using the energy serve command to build our project, the Serve Command watches
our project if changes are made to the project.
It'll compile the project with the changes after the code has been compiled, the page on the browser
is reloaded.
This command is excellent for development, but it's not the command we'll use to build our project.
These serve command doesn't fully optimize the build for production.
It's meant for development only.
If we want to build the project for production, we'll need to use the build command.
Unlike the serve command, this command will compile and menoufiya the project in.
It'll remove development dependencies, optimize the build and deliver your files in a single directory.
Luckily, we don't need to run this command for cell will run the command during the deployment process.
We can skip building the project entirely.
This project has been successfully deployed.
Let's check it out.
Marcel should provide you with a public link for viewing your project.
We've successfully deployed the application, you can log in with the dummy account you created during
the development phase of the project.
I'm going to do that now.
We can even watch a clip.
Everything works without a problem.
Fantastic.
Hopefully, I have convinced you that Purcell is a service you should consider for deploying your projects.
It can offer so much more.
We've only scratched the surface.
We're finished.
We've successfully written an angular application.
I really appreciate you for taking this course.
I hope I was able to help you with your development career.
And so next time, I'll see you later.