Okay, we are back in our React application.
So this is the front end and we have our localhost running so we can go to our application and this
is up and running, but this application is not ready to hit production.
So whatever we are running here, we are running that on localhost.
So basically that's development version of running.
Even here, when you run it, you will have a hint that this is development build and it's not optimized.
So in order to put our application on production, we'll need to build it.
So I will stop it here and we'll use this command NPM, build, run, build, or we can do yarn as well.
So I will do NPM run build and you can see here on top of the folders we have here, we have another
one called Build.
So I will open it here and it will take a while until it will be finished.
But we need to make sure this is built first and then we'll come back to the firebase and then we can
use code from this build to put it on the server.
Okay.
So we have everything there.
I can take a look what's inside the build and we have our application here.
So basically NPM run build took the source from here and build a new application there.
So I have a index.html and we have all the styles here.
So we have static CSS and JS here JavaScript and I have some favicons and whatever.
I had it here in the public and source it was build it for me.
And you can see here we have some random characters here.
That means every time I will build a new version it will change this.
So it's not going to be cached in the browser for the users, so it will use a new version.
Okay, we have that built here and that's very important to have it here.
And actually Firebase will ask us for this folder and will tell in which which folder we are having
our build.
Okay, so this is done.
Let's go back to the our firebase here and follow the instruction.
Okay.
So we have this installed.
You can also click if you would like to implement any of this, like our cloud firestore authentication,
performance monitoring and so on.
You can also edit it, but we are not interested in that here.
So I will go next.
We need to log in.
We already have done that.
So we have an account with Firebase, we are logging and then we can use Firebase in it.
I can click on this to copy that so I can come back to our terminal.
I'm in this folder of my application in the root folder here and I can do Firebase init.
So basically, this will give me some kind of different options that I can use.
You can see here Firebase debug has been created and there will be more files created by this command.
But here what I can do is I can go up an arrow, up arrow and down arrows selection and then I can use
a space if I need to have any of these options.
So basically we are interested in hosting only.
So we'll click space on this and I can move and select more.
If you need more services from Firebase, you can select them.
And at the moment what we are trying to do is we are trying to do the hosting only.
So once this is selected with space and it's highlighted with green, I can click return and then Firebase
will ask us a few questions.
So is this an existing project?
Yes, actually we have our own project and this is asking for the project that we have created.
Here.
So as you remember, we had that project that created that project, the movie rater in the user interface.
And I told you that that we could create something in the CLI.
So if you haven't created, you can create a new project with this.
We already have the existing project.
And you can see here a firebase will ask us which project is that I have at the moment on my account.
I'm I log in with Firebase so Firebase knows what are the available projects on my account are and I
have to I have my own private one and I also have the one that I've created.
So I will pick this one.
And this is another question that hosting will ask us What do you want to use as a public directory?
And I would like to use a public, not a public, as a default because this one is the default.
What I want to do is I want to use my build folder as a public directory.
So I will need to type in build here because that will need to represent this one.
Otherwise Firebase will try to get the source code from this folder.
And basically this is not a version that we can actually put it on our server and expect it to run.
So build here the same name as it is here and click Yes.
So configure as a single page application, rewrite all your rails to index.html.
Yes, we would like to do that.
And then it will ask us if we have already it the text that we in the build, we have an index page
here, index file here.
And do we do we want to overwrite it?
No, we don't want to overwrite our and we would like to use our own.
And now we have fully configured firebase and you can see two new files here.
So we have Firebase Firebase, RC.
And this is basically pointing to our project.
This is the project we've created with some random ID here and we have another one, Firebase.json.
So basically that's the settings we have used, which with that question.
So you can see public build.
If you need to change any of this, you can change it here.
So basically you don't need to touch it.
Once you've done your initialization, then everything will be ready for you.
So what we can do, we can go back here, we've done a firebase init, then we can go here.
So basically it is as easy as this one.
Firebase deploy.
Let me copy this one and we can go back to terminal and then I will paste it here.
Firebase deploy.
And that has been deployed.
So I will come back here.
I will close this.
And let me refresh this page now.
You can see after I refreshed, I don't see that screen anymore.
I see my deployment, so I will take a look what's here.
So what we have here is we have our release histories here.
So at the moment I have a current version, if you will deploy more, then you will you will see the
full history here.
So we have our application here.
And at the moment I have a default movie creator, which is my ID and web app.
What I can do is I could actually I have to here a domain so I can open this one and that will be my
application online.
You can see movie later this one dot web app that will give me my application and it is working the
same way as it was working here locally.
I can also click on this one.
And that will work as well.
So you have two options.
You have Firebase App.com or you can have web app URLs, and Firebase will give you that for free.
So basically you don't need to pay for any of this.
This will be already give it to you for free if you would like to use your own domain.
You will need to buy it.
So basically that will be the URL to access your application.
I know it's not looking really pretty, but if you want to have your hobby application, you can put
your API on the Heroku, you can put your frontend on the firebase and it will work just like that.
So our application has been deployed on Firebase completely for free and it's working perfectly.
So there is one more thing that you will need to do.
So I will go back here.
And as you remember.
In the settings we have.
Course, origin whitelist.
So basically this is the whitelist of the different application URLs that can fetch our data.
What we will need to do on top of the localhost here.
And so we have localhost 3000, which is a react application.
We also have an angular application here, but if you will register your new application on Firebase
app, what you will need to do is you will need to grab this and you will also need to put it another
one here.
So I will put it like this.
And then if you also would like to use the other one here.
You will need to copy.
And you will need to add another one here.
Once it is done.
It's not going to work well, it will work for the localhost, but it's not going to work for a remote.
So you will need to also deploy it on Heroku.
And once the Heroku will be built, you will be able to use that.
And we have our error here with a course header.
So basically it complains this should not have a path.
That means we have that slash at the end.
So we need to remove it from here and also from the other one.
And once we remove it and save it.
A it is working fine, so our server is up and running and that has been added.
Okay.
So let's go back to our Visual Studio code here.
Whatever we have here in the source, we have components and then for example, we have login.
You can see we we use React app API URL.
So if I will go to the environment here, we have that React app API URL and we build our API with the
localhost.
So we also deploy it for the localhost.
If you would like to use the Heroku URL, you will need to also change it and then redeploy it to Firebase.
So basically this was used a localhost and that was good for it is still good and valid for a development
on your local machine, but it's not going to work from the server from the firebase because you expect
this to be running on the internet, not from your local machine.
So whatever you decided to put it online, then you have the backend API on Heroku, you have your URL,
you just change it.
Here and they will communicate with each other.
It's not going to stop you from having that as well.
Tested locally.
So you can still have your local version and use this with with the server running locally and on PyCharm.
But the production version on Heroku and production version of your front end application will need
to link to each other.
That's it.
And that's basically it.
You don't have to do much more.
Your application is up and running.
As you can see here, it's a working fine.
Then you will need to do some extra things to make it communicate with your Heroku or wherever you put
your API because it doesn't have to be Heroku, it can be on any server.
I hope that was helpful.
And you know how to do a deployment with a firebase is very straightforward.
You can use CLI and everything is very easy and well explained on their docs.
So apart from the hosting you also have an other services.
Go ahead and explore them.