{"id":25169715,"url":"https://github.com/sofiane-abou-abderrahim/react-deployment","last_synced_at":"2026-04-20T05:34:19.312Z","repository":{"id":241588378,"uuid":"807040518","full_name":"sofiane-abou-abderrahim/react-deployment","owner":"sofiane-abou-abderrahim","description":"🚀 React Deployment is a guide for deploying React apps from development to production. It covers testing, optimizing, building \u0026 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 \u0026 avoid common pitfalls.","archived":false,"fork":false,"pushed_at":"2024-10-28T01:33:22.000Z","size":1391,"stargazers_count":0,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-01T12:45:22.871Z","etag":null,"topics":["client-side-routing","deployment","firebase","javascript","lazy-loading","optimization","react","react-router","reactjs","server-side-routing","single-page-app","testing"],"latest_commit_sha":null,"homepage":"https://react-deployment-demo-1716b.web.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sofiane-abou-abderrahim.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-05-28T11:23:38.000Z","updated_at":"2024-06-02T10:59:44.000Z","dependencies_parsed_at":"2024-05-29T06:44:08.856Z","dependency_job_id":"a0eef767-4e35-4d81-ac0a-c873bfa967e6","html_url":"https://github.com/sofiane-abou-abderrahim/react-deployment","commit_stats":null,"previous_names":["sofiane-abou-abderrahim/react-deployment"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sofiane-abou-abderrahim/react-deployment","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofiane-abou-abderrahim%2Freact-deployment","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofiane-abou-abderrahim%2Freact-deployment/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofiane-abou-abderrahim%2Freact-deployment/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofiane-abou-abderrahim%2Freact-deployment/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sofiane-abou-abderrahim","download_url":"https://codeload.github.com/sofiane-abou-abderrahim/react-deployment/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofiane-abou-abderrahim%2Freact-deployment/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32034715,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T00:18:06.643Z","status":"online","status_checked_at":"2026-04-20T02:00:06.527Z","response_time":94,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["client-side-routing","deployment","firebase","javascript","lazy-loading","optimization","react","react-router","reactjs","server-side-routing","single-page-app","testing"],"created_at":"2025-02-09T08:36:18.566Z","updated_at":"2026-04-20T05:34:19.293Z","avatar_url":"https://github.com/sofiane-abou-abderrahim.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Deploying React Apps\n\n## From Development To Production\n\n- Deployment Steps \u0026 Pitfalls\n  1. Test Code: Manually \u0026 with automated tests\n  2. Optimize Code: Optimize user experience \u0026 performance\n     1. Lazy Loading: Load code only when it's needed\n     2. Having to load all the code initially will slow down that initial page load\n  3. Build App: Run build process to parse, transform \u0026 optimize code\n  4. Upload App: Upload production code to hosting server\n  5. Configure Server: Ensure app is served securely \u0026 as intended\n- Server-side Routing vs Client-side Routing\n\n# Steps\n\n## 0. Project Setup\n\n1. run `npm install`\n2. run `npm start`\n3. create a `README.md` file\n4. create a `.gitignore` file\n\n## 1. Adding Lazy Loading\n\n1. in `App.js`, in order to load the `BlogPage` lazily, remove the `import` of the `BlogPage` \u0026 the `PostPage`\n2. load the `loader`lazily by using the `import()` function\n3. load the `BlogPage` \u0026 `PostPage` components lazily\n4. use the `lazy()` fonction imported from `react`\n5. wrap the `\u003cBlogPage\u003e` \u0026 `\u003cPostPage\u003e` components with the `\u003cSuspense\u003e` component imported from `react`\n\n## 2. Building the Code For Production\n\n1. in the terminal, execute `npm run build`\n2. a `build` folder is created \u0026 ready to be rendered\n\n## 3. Deployment Example\n\n1. in Firebase Hosting, create a new project named `react-deployment-demo` for example\n2. in your terminal, run\n   1. `npm install -g firebase-tools`\n   2. `firebase login`\n   3. `firebase init`\n   4. `firebase deploy`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsofiane-abou-abderrahim%2Freact-deployment","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsofiane-abou-abderrahim%2Freact-deployment","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsofiane-abou-abderrahim%2Freact-deployment/lists"}