In Lesson 15 of our Full-Stack React E-Commerce series, we take our project live! This final tutorial covers the entire process of deploying a production-ready React application to Firebase Hosting for free. We also walk through the essential step of pushing your final source code to GitHub to ensure your project is saved and shareable.
Whether you’re building your portfolio or launching a real business, this lesson gives you the tools to move from local development to a public URL.
🌐 **Live Demo:** https://beshilo-store.web.app
💻 **GitHub Repository:** https://github.com/Haile1221/React-ecommerce-full-stack-project
Telegram: https//t.me/beshilocodingacademy
—–
### **📍 Timestamps & Lessons**
**0:00 – Introduction & Firebase Setup**
Brief overview of the deployment goal and verifying your Firebase project settings and database status.
**0:54 – Firebase CLI Login & Authentication**
Step-by-step instructions on logging into Firebase via the terminal and selecting the correct Google account for your project.
**1:33 – Initializing Firebase Hosting**
Configuring your project directory (`firebase init`), selecting the Hosting feature, and linking it to your existing Firebase project.
**2:06 – Build Configuration & “Dist” Folder**
Setting up the public directory settings and preparing the production build for deployment.
**2:30 – Creating the Production Build**
Running the build command to optimize your React code for high performance on the web.
**2:54 – Deploying to Firebase Hosting**
Executing the final deployment command and troubleshooting common React Router path issues to ensure a smooth launch.
**3:33 – Success! Testing the Live Site**
Verifying the deployment, navigating the live URL, and testing the app’s functionality in an incognito window.
**4:08 – Version Control with GitHub**
Initializing your local repository, staging the final changes, and committing your code.
**4:38 – Pushing Code to the Cloud**
Completing the GitHub push to ensure your repository is up-to-date and accessible for your portfolio.
**5:05 – Series Conclusion & Final Thoughts**
Wrapping up the Lesson 15 series and what to look forward to in future coding projects.
—–
### **🚀 Key Takeaways**
* How to use Firebase CLI for rapid deployment.
* The importance of the “Dist” folder in React production.
* Fixing “404 Not Found” errors in single-page applications (SPA).
* Finalizing your project workflow with GitHub.
**If you found this series helpful, don’t forget to Like, Subscribe, and leave a comment below with your feedback!**
#ReactJS #FirebaseHosting #FullStackDevelopment #GitHub #WebDevelopment #BeshiloCodingAcademy #AmharicTutorial