How to deploy react application on the firebase ?
We are making our React applications, but we can only view them on our own computer. How can we publish it publicly ? Let’s examine it together
First, let’s make the necessary adjustments on application before publishing application.
What are these ?
Step 1 : Test your codes, the easiest method for this is we can test all our functions and components in the browser. We can test with try-catch block our functions, api requests, etc. to get healthier error results.If there are errors, we can see our error outputs in the console.
Step 2 : Optimize code ,let’s make performance improvements . For example, improvements made using the React.memo feature. To briefly summarize the React.memo feature, React.memo is a top-tier component. If your component is rendered with the same results with the same props, we can store and call it with React.memo, this procces will be increasing the application performance.
Step 3 : Build app for production
Step 4 : Deploy application
These were our necessary settings. Now, before we move on to the publishing step, let’s make the performance improvement I mentioned in step 2.
We normally import our components directly into our application, but the disadvantage of this is that App.js downloads all components directly to local when it is first loaded, which is something we do not want because if it downloads all components, performance losses will occur.Well, if we only download the components to local when necessary, we will improve our application performance, right? If we use the React.lazy function for this, we get what we want.
We call our components as in lines 6 and 7. So when the application is first installed we do not download all the components, we only download the desired components.
When we click on the second component, we see our spinner and our second component is downloading , so we do not experience performance loss when our application is first loaded.
Now we can build our app (Step 3) . Run our build command with terminal and get our build file.
After running our code on the terminal, our build file is created.This file(build) holds all the code you need to deploy in the end.Now that all our tests and optimizations are finished, the final step is to deploy application over firebase.Open firebase and create a project.
Now we will see code of package for install , copy this code then go terminal and paste,run.
Now lets initialize own project. In the same way like first step , run our code with terminal and if you did not login before you will see login screen and you must login.
After login and firebase initiliaze ,you will see this message you need write “y” and press enter
Select your app and public directory not public file , you need write build(file).I mentioned before
The steps were like this , now lets deploy.
Copy code open terminal and paste , run. This code will be deploy your react application
Yes , we did it now click the hosting url you will see your application :)
My basic application url : https://deploy-app-test-3aa60.web.app
References to this article :
I explained you how to publish your react application on the firebase. I hope it was helpful, I would be very grateful if you could send me the parts that you think are missing or wrong.
Contact : LinkedIn
