Nanoscale Parts Manufacturing

    pretty-typed-react-starter

    0.2.27 • Public • Published

    pretty-typed-react-starter

    downloads npm version

    React

    Create React apps (with Typescript) with no build configuration.

    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-app
     
    create-react-app my-app --scripts-version pretty-typed-react-starter
    cd my-app/
    npm start or yarn start

    About

    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.

    screen

    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

    Features:

    • TypeScript
    • 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 node-sass-chokidar package
    • React Router - basic routing with PWA support (HashRouter)
    • Workbox - with workbox i replaced standard approach to PWA that was shipped with default create-react-app config. The service worker is now fully configurable in /src/serviceWorker. It is pre-configured in Webpack to include .js .html and .css files in the precache manifest but exclude any images.

    Project structure

    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
    

    Concept

    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 Components. 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)
    

    Changelog

    0.2.27

    • added custom handlers for service worker to be more reliable
    • added conditional logging in for service worker activities
    • added skipWaiting() and clientsClaim() to workbox

    0.2.20

    • added support for Push Notification API
    • added basic functions for managing permission and sending notifications
    • added new store instance for permissions
    • added simplifacions to registerServiceWorker.js

    0.2.14

    • added meta tag with description in index.html
    • added baseUrl in tsconfig.json

    0.2.13

    • removed dynamically loaded chunks from the precache manifest

    0.2.10

    • added runtime routing for workbox

    0.2.7

    • added splash screen images

    0.2.6

    • change from BrowserRouterto HashRouter
    • user can now refresh page with route applied in offline mode (everything now properly points to index.html)

    0.2.0

    • added basic support for Workbox
    • removed old files

    Install

    npm i pretty-typed-react-starter

    DownloadsWeekly Downloads

    48

    Version

    0.2.27

    License

    MIT

    Unpacked Size

    295 kB

    Total Files

    48

    Last publish

    Collaborators

    • a.wielguszewski