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

Primary LanguageJavaScript

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 loaderlazily by using the import() function
  3. load the BlogPage & PostPage components lazily
  4. use the lazy() fonction imported from react
  5. wrap the <BlogPage> & <PostPage> components with the <Suspense> 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