loading...

React App - Typescript PWA Builder Code

edisonsanchez profile image Edison Sanchez ・4 min read

If you dont want to follow a guide, and you need a preset builder only replace the 'project-name' with your ProjectName.

npx create-react-app project-name --typescript
cd project-name
npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser babel-eslint eslint eslint-config-airbnb  eslint-config-prettier eslint-plugin-import  eslint-plugin-jest eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react  husky lint-staged prettier react-test-renderer require-context.macro tslint tslint-config-prettier tslint-plugin-prettier tslint-react 
npm install
npm audit fix
curl https://gist.githubusercontent.com/Edisonsan/a02104c9aabc8f0cfce0413f995905d1/raw/b9c32b9643e5f83ed3f1b9f2a8b66cfb26753e37/.env --output .env
https://gist.githubusercontent.com/Edisonsan/2df55435733f2047be938388566df2cd/raw/5f6f15cf9a82e94e3656fa8978d2583c198be12e/react.eslintrc.js --output eslintrc.js
curl https://gist.githubusercontent.com/Edisonsan/2b6ba8fb90fddc8c519c5aca5a71204d/raw/a2f92762928d17847b36a88f27efb04c348e8859/react.prettierrc --output .prettierrc
curl https://gist.githubusercontent.com/Edisonsan/d81b57f53190e6a0d575024edffa937c/raw/32212726a5e44d5342992f23e48f2b871bbec5f0/react.tsconfig.json --output tsconfig.json
curl https://gist.githubusercontent.com/Edisonsan/58752594362c916391f5291f62a69cbc/raw/ff909c497c7987585eb94fdf45e3bab45829f863/react.tslint.json --output tslint.json
npx -p @storybook/cli sb init --story-format=csf-ts
npm install -D @storybook/addon-actions @storybook/addon-docs @storybook/addon-knobs @storybook/addon-links @storybook/addon-storyshots @storybook/preset-create-react-app @storybook/react @types/styled-components 
curl https://gist.githubusercontent.com/Edisonsan/deb70c41bb429e7c31de4f736b3d30f4/raw/914a074cfe2b8555bea6fc30a81d6199620acfa2/react.storybook.addon.ts --output ./.storybook/addons.ts
curl https://gist.githubusercontent.com/Edisonsan/acd830caf63db46df7bcaf61650dfba9/raw/297d4d48aeab72fa0c1575654a0565640ce42fcc/react.storybook.config.ts --output ./.storybook/config.ts
curl https://gist.githubusercontent.com/Edisonsan/bf667058922b2196a089eb01684266af/raw/a9213daaeb437ed3fc7acaca2d81a817e9b05636/react.stortbook.main.ts --output ./.storybook/main.ts
curl https://gist.githubusercontent.com/Edisonsan/d655ac1f18a35824987fbcd438f840cd/raw/bba9d8e03c3d95185f4b192dad415fd87e1c7c46/react.webpack.config.ts --output ./.storybook/webpack.config.ts
npm install pwacompat @material-ui/core @material-ui/icons apollo-boost aws-amplify aws-sdk axios material-ui-image moment moment-timezone prop-types react-apollo react-device-detect react-helmet react-icons react-router-dom serve styled-components

And this to your package.json

scripts: {
...
    "lint-ts": "tslint -c tslint.json 'src/**/*.{ts,tsx}'",
    "lint-js": "eslint 'src/**/*.{js,jsx}' --quiet --fix",
    "lint": "tslint -c tslint.json src/**/*.{ts,tsx} --fix --format verbose",
    "storybook": "start-storybook -p 9009 -s public",
    "build-storybook": "build-storybook -s public",
...
},
...
"husky": {
    "hooks": {
      "pre-commit": "export CI=true && yarn build && lint-staged && yarn test",
      "pre-push": "export CI=true && yarn build && lint-staged && yarn test"
    }
  },
  "lint-staged": {
    "*.{ts,tsx}": [
      "tslint -c tslint.json"
    ],
    "*.{js,jsx}": [
      "eslint --fix"
    ]
  }
...

Convert to PWA

Generate icons using the following platforms.

npm install -g serve

Copy all the images into ./public/favicons/
Update the head in HTML file: index.html in /public

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
    <meta name="author" content="Edison Sanchez" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-title" content="project-name" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicons/apple-touch-icon-iphone-60x60.png" />
    <link rel="apple-touch-icon" sizes="57x57" href="%PUBLIC_URL%/favicons/apple-icon-57x57.png" />
    <link rel="apple-touch-icon" sizes="60x60" href="%PUBLIC_URL%/favicons/apple-icon-60x60.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="%PUBLIC_URL%/favicons/apple-icon-72x72.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="%PUBLIC_URL%/favicons/apple-icon-114x114.png" />
    <link rel="apple-touch-icon" sizes="120x120" href="%PUBLIC_URL%/favicons/apple-icon-120x120.png" />
    <link rel="apple-touch-icon" sizes="144x144" href="%PUBLIC_URL%/favicons/apple-icon-144x144.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/favicons/apple-icon-180x180.png" />
    <link rel="icon" type="image/png" href="%PUBLIC_URL%/favicons/favicon-16x16.png" sizes="16x16" />
    <link rel="icon" type="image/png" href="%PUBLIC_URL%/favicons/favicon-32x32.png" sizes="32x32" />
    <link rel="icon" type="image/png" href="%PUBLIC_URL%/favicons/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/png" href="%PUBLIC_URL%/favicons/android-chrome-512x512.png" sizes="512x512" />
    <link rel="mask-icon" href="%PUBLIC_URL%/favicons/safari-pinned-tab.svg" color="#000000" />
    <meta name="theme-color" content="#ffffff" />
    <meta name="description" content="project-description" />
    <meta name="msapplication-TileColor" content="#000000" />

    <!-- Fonts Robot & Material UI -->
    <link
      rel="stylesheet"
      type="text/css"
      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
    />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <script async src="https://unpkg.com/pwacompat" crossorigin="anonymous"></script>

    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>project-name</title>
  </head>

Cambiar el manifest.json en public

{
  "short_name": "project-name",
  "name": "project-description",
  "icons": [
    {
      "src": "./favicons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./favicons/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "dir": "ltr",
  "lang": "en-US",
  "orientation": "portrait-primary"
}

Update index.tsx change .unregister by .register
Run and build, test with incognito on Chrome, open Lighthouse PWA and just one error should be result: No SSL.

Install and Initialize Bit

bit init
bit login

Posted on by:

edisonsanchez profile

Edison Sanchez

@edisonsanchez

Programming... React, React Native, JScript, AWS Serverless, Postgresql, Angular, IONIC, Python, and counting...

Discussion

markdown guide