Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/name-industry/ni-react-template
Base Create React App template for name-industry websites. Uses local SSL and correct CSP for NI Nginx setup.
https://github.com/name-industry/ni-react-template
reactjs tailwindcss
Last synced: 24 days ago
JSON representation
Base Create React App template for name-industry websites. Uses local SSL and correct CSP for NI Nginx setup.
- Host: GitHub
- URL: https://github.com/name-industry/ni-react-template
- Owner: name-industry
- Created: 2022-09-26T21:19:40.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-09-27T19:28:48.000Z (over 2 years ago)
- Last Synced: 2023-12-29T18:39:30.855Z (about 1 year ago)
- Topics: reactjs, tailwindcss
- Language: HTML
- Homepage:
- Size: 234 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[logo]: https://github.com/name-industry/ni-auth-website/blob/master/public/favicon-96x96.png
![alt text][logo]
# CRA based React quick template
##### A basic install of CRA with some things pre filled for rapid prototyping with SSL / CSP.
\# please note: _This is maintained for my personal experimentation. Not as a real template for external usage._
How to use this:
1. clone
2. yarn install
3. MKCert ( unless already have certs made )
4. copy to project dir and rename cert and key
5. _optional_ edit hosts file
6. edit package.json to contain project title
7. edit public/index.html title to contain desired title
8. edit sitemap.xml with url
9. yarn build
10. yarn start
## Links
- [MCert - generate SSL certs for localhost](https://github.com/FiloSottile/mkcert)
- [CRA - ENV variables](https://create-react-app.dev/docs/advanced-configuration/)
- [OpenSans - @fontsource](https://github.com/fontsource/fontsource)
- [TailwindCss](https://github.com/tailwindlabs/tailwindcss)
- [VSCode - extension TailwindCss Intellisense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
- [VSCode - extension PostCss Language Support](https://marketplace.visualstudio.com/items?itemName=csstools.postcss)
## CSP
CSP can be very strict. On the server side I have NGINX adding proper CSP headers and hashes to all files that are served. React/CRA usually inlined the initial main js code which will trigger CSP errors. DEpending on your use case also adding in a zero limit to the image size may be required. I have not added that in the .env file but recorded it bellow in case needed.
.env file alteration:
```Shell
INLINE_RUNTIME_CHUNK=false
IMAGE_INLINE_SIZE_LIMIT=0
```
## Local SSL
99% of the time I am prototyping UI/Front-end with an API over ssl. I see a lot of "solutions" like - run docker and reverse proxy things or even use external 3rd party services over the wire. A simple and rapid solution would be to use [ MKCert ](https://github.com/FiloSottile/mkcert) and generate certs you need. Use the Hosts files for url redirects and done. For this to work the .env file has these updates. HTTPS set to true to tell the dev server to use the certs and server over https://localhost:3000 ( or whatever you generate the cert for, or its Hosts domain you want to use ). Note that the certs generated by MKCert have been copied to the .certs folder and renamed to cert.pem & key.pem. In the gitignore file the pem files are ignored.
.env file alteration:
```Shell
HTTPS=true
SSL_CRT_FILE=./.certs/cert.pem
SSL_KEY_FILE=./.certs/key.pem
```
## Production Browserlist
Browserlist update to be more real world a bit and followed HTMLBoilerplate's list. Note, I did not include the required polyfill setups.
```JSON
"browserslist": {
"production": [
"> 0.5%",
"last 2 versions",
"Firefox ESR",
"not dead",
"not IE 11"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
```
## Included extra packages
1 font was included and setup to being the global font. Open Sans. 1 css library included. TailwindCSS. To use TailwindCSS properly you have to ensure you _yarn build_ at least once prior to _yarn start_ ( so it builds its initial css file ). All packages have versions locked.
| dependencies | version |
|:----|:----:|
| @fontsource/open-sans | 4.5.11 |
| dependencies | version |
|:----|:----:|
| autoprefixer | 10.4.12 |
| postcss | 8.4.16 |
| tailwindcss | 3.1.8 |
## Base included js files
In the src/index.js file there is an odd split to initially let me run with Store/State managers that can use Async ie: Jotai. By using Lazy it allows this for Jotai. Note: no state managers were included.