sofiane-abou-abderrahim / react-deployment Goto Github PK

View Code? Open in Web Editor NEW

🚀 React Deployment is a guide for deploying React apps from development to production. It covers testing, optimizing, building & uploading your app to Firebase. It also ensures smooth client-side routing with React Router and performance optimization through lazy loading. Explore the code to master the deployment process & avoid common pitfalls.

HTML 32.00% JavaScript 53.71% CSS 14.29%

react-deployment's Introduction

Deploying React Apps

From Development To Production

Deployment Steps & Pitfalls
1. Test Code: Manually & with automated tests
2. Optimize Code: Optimize user experience & performance
  1. Lazy Loading: Load code only when it's needed
  2. Having to load all the code initially will slow down that initial page load
3. Build App: Run build process to parse, transform & optimize code
4. Upload App: Upload production code to hosting server
5. Configure Server: Ensure app is served securely & as intended
Server-side Routing vs Client-side Routing

Steps

0. Project Setup

run npm install
run npm start
create a README.md file
create a .gitignore file

1. Adding Lazy Loading

in App.js, in order to load the BlogPage lazily, remove the import of the BlogPage & the PostPage
load the loaderlazily by using the import() function
load the BlogPage & PostPage components lazily
use the lazy() fonction imported from react
wrap the <BlogPage> & <PostPage> components with the <Suspense> component imported from react

2. Building the Code For Production

in the terminal, execute npm run build
a build folder is created & ready to be rendered

3. Deployment Example

in Firebase Hosting, create a new project named react-deployment-demo for example
in your terminal, run
1. npm install -g firebase-tools
2. firebase login
3. firebase init
4. firebase deploy

Recommend Projects