https://github.com/sofiane-abou-abderrahim/react-deployment

🚀 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.
https://github.com/sofiane-abou-abderrahim/react-deployment

client-side-routing deployment javascript lazy-loading optimization react react-router reactjs server-side-routing single-page-app testing

Last synced: 1 day ago
JSON representation

🚀 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.

• Host: GitHub
• URL: https://github.com/sofiane-abou-abderrahim/react-deployment
• Owner: sofiane-abou-abderrahim
• Created: 2024-05-28T11:23:38.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-05-28T20:06:15.000Z (9 months ago)
• Last Synced: 2024-05-29T06:44:03.995Z (9 months ago)
• Topics: client-side-routing, deployment, javascript, lazy-loading, optimization, react, react-router, reactjs, server-side-routing, single-page-app, testing
• Language: JavaScript
• Homepage: https://react-deployment-demo-1716b.web.app
• Size: 480 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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

1. run `npm install`

2. run `npm start`

3. create a `README.md` file

4. create a `.gitignore` file

## 1. Adding Lazy Loading

1. in `App.js`, in order to load the `BlogPage` lazily, remove the `import` of the `BlogPage` & the `PostPage`

2. load the `loader`lazily by using the `import()` function

3. load the `BlogPage` & `PostPage` components lazily

4. use the `lazy()` fonction imported from `react`

5. wrap the `` & `` components with the `` component imported from `react`

## 2. Building the Code For Production

1. in the terminal, execute `npm run build`

2. a `build` folder is created & ready to be rendered

## 3. Deployment Example

1. in Firebase Hosting, create a new project named `react-deployment-demo` for example

2. in your terminal, run

   1. `npm install -g firebase-tools`

   2. `firebase login`

   3. `firebase init`

   4. `firebase deploy`