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
Top comments (0)