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.
Home Page: https://react-deployment-demo-1716b.web.app
HTML 32.00%
JavaScript 53.71%
CSS 14.29%
react-deployment's Introduction
From Development To Production
Deployment Steps & Pitfalls
Test Code: Manually & with automated tests
Optimize Code: Optimize user experience & performance
Lazy Loading: Load code only when it's needed
Having to load all the code initially will slow down that initial page load
Build App: Run build process to parse, transform & optimize code
Upload App: Upload production code to hosting server
Configure Server: Ensure app is served securely & as intended
Server-side Routing vs Client-side Routing
run npm install
run npm start
create a README.md
file
create a .gitignore
file
in App.js
, in order to load the BlogPage
lazily, remove the import
of the BlogPage
& the PostPage
load the loader
lazily 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
in Firebase Hosting, create a new project named react-deployment-demo
for example
in your terminal, run
npm install -g firebase-tools
firebase login
firebase init
firebase deploy
react-deployment's People
Contributors
Watchers