{"id":18899235,"url":"https://github.com/adarshsingh1407/neo-cra","last_synced_at":"2025-04-15T02:34:34.578Z","repository":{"id":106103544,"uuid":"109103832","full_name":"adarshsingh1407/neo-cra","owner":"adarshsingh1407","description":"Boiler-plate code for server-rendered(SSR), progressive web app(PWA) in React","archived":false,"fork":false,"pushed_at":"2017-12-04T06:38:25.000Z","size":3138,"stargazers_count":11,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-28T14:21:23.668Z","etag":null,"topics":["babel","babel-es6","boilerplate","code-splitting","express","express-js","lazy-loading","progressive-web-app","react","react-intl","react-router","react-router-dom","react-router-redux","react-router-v4","react16","redux","server-side-rendering"],"latest_commit_sha":null,"homepage":"","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/adarshsingh1407.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}},"created_at":"2017-11-01T08:02:54.000Z","updated_at":"2022-01-14T03:43:42.000Z","dependencies_parsed_at":null,"dependency_job_id":"08ece87a-e884-4083-9f14-8b479adf0102","html_url":"https://github.com/adarshsingh1407/neo-cra","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adarshsingh1407%2Fneo-cra","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adarshsingh1407%2Fneo-cra/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adarshsingh1407%2Fneo-cra/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adarshsingh1407%2Fneo-cra/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adarshsingh1407","download_url":"https://codeload.github.com/adarshsingh1407/neo-cra/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248994735,"owners_count":21195442,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["babel","babel-es6","boilerplate","code-splitting","express","express-js","lazy-loading","progressive-web-app","react","react-intl","react-router","react-router-dom","react-router-redux","react-router-v4","react16","redux","server-side-rendering"],"created_at":"2024-11-08T08:45:58.237Z","updated_at":"2025-04-15T02:34:33.930Z","avatar_url":"https://github.com/adarshsingh1407.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NEO-CRA\n\nThis project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app)\n\n\u003e Stack\n\n| S.NO. | PACKAGE |\n| ---: | :--- |\n| 1 | React 16 |\n| 2 | React-Router 4 |\n| 3 | Express 4 |\n| 4 | React-Helmet |\n| 5 | Redux |\n| 6 | Axios |\n| 7 | Universal-Cookie |\n| 8 | React-Intl |\n\n---\n\n\u003e Branch Description\n\n| BRANCH | DESCRIPTION |\n| ---: | :--- |\n| master | Async SSR, Redux, Internationalization |\n| static-ssr | Static SSR Implemented |\n| async-ssr | Async SSR Implemented |\n\n---\n\n\u003e Terminal Commands\n\n\n| TASK | COMMAND |\n| ---: | :--- |\n| DEV_MODE | yarn start |\n| BUILD_DEV | yarn build:dev |\n| BUILD_PROD | yarn build:prod |\n| BABELIFY | yarn babelify |\n| TEST | yarn test |\n| SERVE_PROD | pm2 start ecosystem.config.js --env production |\n| SERVE_DEV | pm2 start ecosystem.config.js |\n| EJECT_APP | yarn eject |\n\n---\n\n1. Before starting the project, redux store structure for the app needs to be thought of so that it can cater to all pages and maximum use cases.\n\n---\n\n2. ENV\n\na. REACT_APP_ENV is given while building the app - For Browser ENV\n\nb. Also, while starting the app on server(at runtime) - For Server ENV\n\n---\n\n3. Managing Access Tokens\n\na. Import cookie instance from CookiesProvider wherever tokens need to be set/reset, i.e., login/logout\n\nb. For making API calls or restricting routes with accesstoken, get the apiContext from ApiContextProvider\n\n---\n\n4. Sanity Checks\n\na. App build is running fine\n\nb. SSR is running properly\n\n---\n\n5. I18N\n\na. React-Intl has been used for I18N.\nIntlProvider is wrapped around the App on server-side(serverRender) and client-side(src/index).\n\nb. On client-side, locale is fetched from navigator languages\nOn server-side, locale is fetched from accepted-language in header of the request\n[Ref. localeMsgs]\n\nc. Adding Locale\nAdd file to locales folder and add case to localeMsgs.js\n\nd. If explicit widget is required to change preferred language, set it in a cookie and handle it in getLocale of localeMsgs\n\ne. Translations Manager\n[babel-plugin-react-intl](https://github.com/yahoo/babel-plugin-react-intl) currently helps spit out all the translations(for Translators) used in the app. If you want this to be in one file, use [React-intl-translations-manager](https://github.com/GertjanReynaert/react-intl-translations-manager) for managing translations. It has other powerful options too, if you want to explore.\n\n---\n\n6. Code-splitting and Lazy Loading\n\nNOTE: Don't OVERDO it!\n\na. Codes-splitting has been achieved by using [dynamic imports](http://2ality.com/2017/01/import-operator.html#loading-code-on-demand), which is provided by default through [CRA](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting).\n\nb. AsyncComponent will provide you with a function(asyncComponent) to dynamically import Components in your modules/components.\n\nc. Lazy Loading: Dynamically import Components using above-mentioned function wherever required for lazy-loading of modules/components.\n\nd. Working example available in `code-splitting` branch. Please refer components/AsyncComponent, src/App and components/Protected.\n\n---\n\n\u003e TO-DO\n\n- [ ] Code-splitting + SSR\n- [ ] HMR with SSR\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadarshsingh1407%2Fneo-cra","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadarshsingh1407%2Fneo-cra","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadarshsingh1407%2Fneo-cra/lists"}