Create React apps (with Typescript) with no build configuration.
- Getting Started – How to use 'create react app'.
Do you know react and want to try out typescript? Or do you know typescript and want to try out react? Get all the benefits from
create-react-app but you use typescript! 🚀
How to start
npm install -g create-react-appcreate-react-app my-app --scripts-version pretty-typed-react-startercd my-app/npm start or yarn start
This is a variation of the 'create react app' with custom scripts and template. Full
Progressive Web App (PWA) integration is implemented in this project with offline-first strategy, custom splash screen, icons, configurable service worker and full support for
Web Push Notification API.
note about Lighthouse results:
To make the result a 5x 100 you need to try server-side rendering for the main component, enable HTTPS and use 'cache-control' header for the serviceWorker file on your server
- Prettier - note: replaced ES/TSlint. To make it work you need to install it in your editor (for more info check out the official documentation)
- MobX - Easier than Redux yet equally powerfull and fun to use.
- React Loadable - Code-splitting made easy. Works great with current webpack configuration from create react app. Example included in the template.
- Sass - CSS preprocessor with
- React Router - basic routing with PWA support (HashRouter)
- Workbox - with
workboxi replaced standard approach to PWA that was shipped with default
create-react-appconfig. The service worker is now fully configurable in
/src/serviceWorker. It is pre-configured in
.js .html and .cssfiles in the precache manifest but exclude any images.
my-app ├── README.md ├── node_modules ├── tsconfig.json ├── images.d.ts ├── package.json ├── .gitignore ├── public │ └── favicon.ico │ └── index.html │ └── manifest.json └── src └── index.tsx └── registerServiceWorker.ts └── Components └── Content └── dynamic.tsx └── index.tsx └── types.ts └── styles.scss └── ... └── Containers └── ContentContainer └── dynamic.tsx └── index.tsx └── types.ts └── styles.scss └── ... └── Utils └── colors.scss └── constants.ts └── helpers.ts └── store.ts
The project structure is created with separation of logic from view and code-splitting in mind.
Ideally you keep your logic in the
Containers and view in
Typical structure for a
Container/Component would be :
Container/Component └── index.tsx (main file) └── dynamic.tsx (dynamically loaded export made from react-loadable └── types.ts (exported types) └── styles.scss (styles for that specific Container/Component)
- added custom handlers for service worker to be more reliable
- added conditional logging in for service worker activities
- added support for
Push Notification API
- added basic functions for managing permission and sending notifications
- added new
storeinstance for permissions
- added simplifacions to
- added meta tag with description in
- added baseUrl in
- removed dynamically loaded chunks from the precache manifest
- added runtime routing for workbox
- added splash screen images
- change from
- user can now refresh page with route applied in offline mode (everything now properly points to
- added basic support for
- removed old files