├── README.md ├── package.json ├── template.json └── template ├── .prettierrc ├── gitignore ├── public ├── favicon.ico ├── index.html ├── logo-512.png ├── manifest.json └── robots.txt └── src ├── App.js ├── fireship.png ├── index.css └── index.js /README.md: -------------------------------------------------------------------------------- 1 | # Fireship CRA 2 | 3 | [![React](https://img.shields.io/npm/v/react?label=react&style=for-the-badge&color=61dafb&labelColor=151718&logo=react)](https://reactjs.com) 4 | 5 | [![Issues](https://img.shields.io/github/issues/klutchdev/fireship-js?style=for-the-badge&labelColor=151718&color=success&logo='📼')](https://img.shields.io/github/issues/klutchdev/fireship-js) 6 | 7 | ## Usage 8 | 9 | ### Install 10 | 11 | ```bash 12 | npx create-react-app --template fireship 13 | ``` 14 | 15 | ### Commands 16 | 17 | #### Start dev server 18 | ```bash 19 | npm start 20 | ``` 21 | #### Production build 22 | ```bash 23 | npm run build 24 | ``` 25 | 26 | #### Analyze production build bundle size 27 | ```bash 28 | npm run analyze 29 | ``` 30 | 31 | ### Useful resources on Fireship: 32 | 33 | #### Tags: 34 | 35 | [React](https://fireship.io/tags/react/) | 36 | [Firebase](https://fireship.io/tags/firebase/) 37 | 38 | #### Video content: 39 | 40 | [React Hooks](https://www.youtube.com/watch?v=TNhaISOUy6Q) | 41 | [Running tests](https://www.youtube.com/watch?v=Jv2uxzhPFl4) 42 | 43 | ### React/NextJS course: 44 | 45 | [fireship.io/courses/react-next-firebase](https://fireship.io/courses/react-next-firebase/) 46 | 47 | ### Slack channel 48 | 49 | [fireship.page.link/slack](https://fireship.page.link/slack) 50 | 51 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cra-template-fireship", 3 | "description": "Build and ship 🔥 your app ⚡ faster", 4 | "version": "0.3.2", 5 | "main": "template.json", 6 | "engines": { 7 | "node": ">=14" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/klutchdev/fireship-js.git" 12 | }, 13 | "bugs": { 14 | "url": "https://github.com/klutchdev/fireship-js/issues" 15 | }, 16 | "keywords": [ 17 | "fireship", 18 | "react", 19 | "create-react-app", 20 | "cra" 21 | ], 22 | "eslintConfig": { 23 | "extends": [ 24 | "react-app" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | }, 39 | "files": [ 40 | "template", 41 | "template.json" 42 | ] 43 | } -------------------------------------------------------------------------------- /template.json: -------------------------------------------------------------------------------- 1 | { 2 | "package": { 3 | "dependencies": { 4 | "react-router-dom": "^6.2.1", 5 | "prettier": "^2.5.1", 6 | "source-map-explorer": "^2.5.2" 7 | }, 8 | "scripts": { 9 | "analyze": "source-map-explorer 'build/static/js/*.js'" 10 | }, 11 | "eslintConfig": { 12 | "extends": [ 13 | "react-app" 14 | ] 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /template/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": true, 3 | "arrowParens": "always", 4 | "trailingComma": "all" 5 | } -------------------------------------------------------------------------------- /template/gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /template/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/klutchdev/fireship-js/85286f38292fa19597ba20867873078a0a706166/template/public/favicon.ico -------------------------------------------------------------------------------- /template/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Fireship CRA 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /template/public/logo-512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/klutchdev/fireship-js/85286f38292fa19597ba20867873078a0a706166/template/public/logo-512.png -------------------------------------------------------------------------------- /template/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Fireship CRA", 3 | "short_name": "Fireship CRA", 4 | "description": "Build and ship 🔥 your app ⚡ faster", 5 | "start_url": ".", 6 | "display": "standalone", 7 | "theme_color": "#454e56", 8 | "background_color": "#2a2e35", 9 | "icons": [ 10 | { 11 | "src": "favicon.ico", 12 | "sizes": "64x64", 13 | "type": "image/png" 14 | }, 15 | { 16 | "src": "logo-512.png", 17 | "sizes": "512x512", 18 | "type": "image/png" 19 | } 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /template/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /template/src/App.js: -------------------------------------------------------------------------------- 1 | function App() { 2 | return ( 3 | <> 4 |
5 |
6 | 7 | $ npx create-react-app 8 | yourAppName 9 | --template 10 | fireship 11 | 12 |
13 | 14 | ); 15 | } 16 | 17 | export default App; 18 | -------------------------------------------------------------------------------- /template/src/fireship.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/klutchdev/fireship-js/85286f38292fa19597ba20867873078a0a706166/template/src/fireship.png -------------------------------------------------------------------------------- /template/src/index.css: -------------------------------------------------------------------------------- 1 | /* Tip: If you see an "Unknown at rule @import-normalize css(unknownAtRules)" 2 | warning in VSCode,change the css.lint.unknownAtRules setting to ignore. */ 3 | @import-normalize; 4 | @import url("https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap"); 5 | 6 | :root { 7 | font-size: 1rem; 8 | } 9 | 10 | *, 11 | *::before, 12 | *::after { 13 | box-sizing: border-box; 14 | } 15 | 16 | body { 17 | margin: 0; 18 | padding: 0; 19 | width: 100vw; 20 | height: 100%; 21 | background: #1d2021; 22 | font-family: "Noto Sans", sans-serif; 23 | } 24 | 25 | h1 { 26 | margin: auto auto auto 0; 27 | text-align: left; 28 | font-size: 4rem; 29 | color: #6b6f71; 30 | } 31 | 32 | .header { 33 | margin: 2rem auto 0 auto; 34 | background-image: url("fireship.png"); 35 | background-position: center; 36 | background-repeat: no-repeat; 37 | background-size: cover; 38 | height: 50vh; 39 | width: 50%; 40 | border-radius: 5px; 41 | box-shadow: #030303af 3px 5px 10px; 42 | transition: all 300ms ease; 43 | } 44 | 45 | .body { 46 | margin: auto; 47 | width: 50%; 48 | display: flex; 49 | align-items: center; 50 | justify-content: center; 51 | } 52 | 53 | .npm-command { 54 | margin: auto; 55 | padding: 0.25rem 0.5rem 0 0.5rem; 56 | height: 3rem; 57 | width: 50%; 58 | display: flex; 59 | align-items: center; 60 | justify-content: flex-start; 61 | border-radius: 5px; 62 | font-size: 1.15rem; 63 | font-family: monospace; 64 | font-weight: 500; 65 | color: #9aa0a4; 66 | background: #151718; 67 | box-shadow: #030303af 3px 5px 10px; 68 | vertical-align: middle; 69 | transition: all 500ms ease; 70 | } 71 | 72 | .npm-cra { 73 | color: #22da6b; 74 | } 75 | 76 | .npm-template { 77 | color: #fa8142; 78 | } 79 | -------------------------------------------------------------------------------- /template/src/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ███████╗██╗██████╗ ███████╗███████╗██╗ ██╗██╗██████╗ 3 | ██╔════╝██║██╔══██╗██╔════╝██╔════╝██║ ██║██║██╔══██╗ 4 | █████╗ ██║██████╔╝█████╗ ███████╗███████║██║██████╔╝ 5 | ██╔══╝ ██║██╔══██╗██╔══╝ ╚════██║██╔══██║██║██╔═══╝ 6 | ██║ ██║██║ ██║███████╗███████║██║ ██║██║██║ 7 | ╚═╝ ╚═╝╚═╝ ╚═╝╚══════╝╚══════╝╚═╝ ╚═╝╚═╝╚═╝ 8 | */ 9 | import React, { StrictMode } from "react"; 10 | import { render } from "react-dom"; 11 | import "./index.css"; 12 | import App from "./App"; 13 | 14 | const root = document.getElementById("root"); 15 | 16 | render( 17 | 18 | 19 | , 20 | root, 21 | ); 22 | --------------------------------------------------------------------------------