├── .gitignore ├── .prettierrc ├── README.md ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── favicon.ico ├── index.html └── robots.txt ├── snowpack.config.js ├── src ├── __tests__ │ └── App.test.tsx ├── components │ └── App.tsx ├── index.scss └── index.tsx ├── tailwind.config.js ├── tsconfig.json ├── types └── static.d.ts └── web-test-runner.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .snowpack 2 | build 3 | node_modules 4 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "all" 4 | } 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ✨ Boilerplate Snowpack + React + Typescript + Tailwindcss 2 | 3 | > Create using create-snowpack-app CLI 4 | 5 | ## In this boilerplate 6 | 7 | - Snowpack 3 8 | - React 17 9 | - Typescript 4 10 | - Tailwind 2 11 | - Prettier, PostCSS .. 12 | 13 | ### npm start 14 | 15 | Runs the app in the development mode. 16 | Open http://localhost:8080 to view it in the browser. 17 | 18 | The page will reload if you make edits. 19 | You will also see any lint errors in the console. 20 | 21 | ### npm run build 22 | 23 | Builds a static copy of your site to the `build/` folder. 24 | Your app is ready to be deployed! 25 | 26 | **For the best production performance:** Add a build bundler plugin like "@snowpack/plugin-webpack" to your `snowpack.config.js` config file. 27 | 28 | ### npm test 29 | 30 | Launches the application test runner. 31 | Run with the `--watch` flag (`npm test -- --watch`) to run in interactive watch mode. 32 | 33 | Feel free to fork and add more features 34 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@soubai/snowpack-react-typescript-tailwind", 3 | "version": "1.0.0", 4 | "description": "Boilerplate for Snowpack, React, Typescript, Tailwind", 5 | "author": "Abderrahim SOUBAI-ELIDRISI", 6 | "license": "MIT", 7 | "scripts": { 8 | "start": "snowpack dev", 9 | "build": "snowpack build", 10 | "test": "web-test-runner \"src/**/*.test.tsx\"", 11 | "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"", 12 | "lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"" 13 | }, 14 | "dependencies": { 15 | "react": "^17.0.0", 16 | "react-dom": "^17.0.0", 17 | "tailwind": "^4.0.0" 18 | }, 19 | "devDependencies": { 20 | "@snowpack/plugin-dotenv": "^2.0.5", 21 | "@snowpack/plugin-postcss": "^1.1.0", 22 | "@snowpack/plugin-react-refresh": "^2.4.0", 23 | "@snowpack/plugin-sass": "^1.3.0", 24 | "@snowpack/plugin-typescript": "^1.2.0", 25 | "@snowpack/web-test-runner-plugin": "^0.2.0", 26 | "@testing-library/react": "^11.0.0", 27 | "@types/chai": "^4.2.13", 28 | "@types/mocha": "^8.2.0", 29 | "@types/react": "^17.0.0", 30 | "@types/react-dom": "^17.0.0", 31 | "@types/snowpack-env": "^2.3.2", 32 | "@web/test-runner": "^0.12.0", 33 | "autoprefixer": "^10.2.1", 34 | "chai": "^4.2.0", 35 | "jest": "^26.6.3", 36 | "postcss": "^8.2.4", 37 | "postcss-cli": "^8.3.1", 38 | "prettier": "^2.0.5", 39 | "snowpack": "^3.0.1", 40 | "tailwindcss": "^2.0.2", 41 | "typescript": "^4.0.0" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [], 3 | }; 4 | module.exports = { 5 | plugins: [ 6 | require('tailwindcss'), 7 | require('autoprefixer'), 8 | ], 9 | }; -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/soub4i/snowpack-react-typescript-tailwind/40244fc53df8cd153e5e0455c994e58bd8e38cc1/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Snowpack App 9 | 10 | 11 |
12 | 13 | 14 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /snowpack.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import("snowpack").SnowpackUserConfig } */ 2 | module.exports = { 3 | mount: { 4 | public: {url: '/', static: true}, 5 | src: {url: '/dist'}, 6 | }, 7 | plugins: [ 8 | '@snowpack/plugin-react-refresh', 9 | '@snowpack/plugin-dotenv', 10 | '@snowpack/plugin-typescript', 11 | '@snowpack/plugin-sass', 12 | '@snowpack/plugin-postcss', 13 | ], 14 | routes: [ 15 | /* Enable an SPA Fallback in development: */ 16 | // {"match": "routes", "src": ".*", "dest": "/index.html"}, 17 | ], 18 | optimize: { 19 | /* Example: Bundle your final build: */ 20 | // "bundle": true, 21 | }, 22 | packageOptions: { 23 | /* ... */ 24 | }, 25 | devOptions: { 26 | /* ... */ 27 | }, 28 | buildOptions: { 29 | /* ... */ 30 | }, 31 | }; 32 | -------------------------------------------------------------------------------- /src/__tests__/App.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import { expect } from 'chai'; 4 | import App from '../components/App'; 5 | 6 | describe('', () => { 7 | it('renders learn react link', () => { 8 | const { getByText } = render(); 9 | const linkElement = getByText(/Snowpack/i); 10 | expect(document.body.contains(linkElement)); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /src/components/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | interface AppProps {} 4 | 5 | function App({}: AppProps) { 6 | return ( 7 |
8 |

Snowpack 3 + React 17 + Typescript 4 + Tailwind 2

9 |
10 | ); 11 | } 12 | 13 | export default App; 14 | -------------------------------------------------------------------------------- /src/index.scss: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | 3 | @tailwind components; 4 | 5 | @tailwind utilities; 6 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './components/App'; 4 | import './index.scss'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root'), 11 | ); 12 | 13 | // Hot Module Replacement (HMR) - Remove this snippet to remove HMR. 14 | // Learn more: https://snowpack.dev/concepts/hot-module-replacement 15 | if (import.meta.hot) { 16 | import.meta.hot.accept(); 17 | } 18 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | purge: ['./src/**/*.jsx', './src/**/*.tsx', './src/**/*.js', './src/**/*.ts'], 3 | theme: {}, 4 | variants: {}, 5 | plugins: [], 6 | }; -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "target": "esnext", 6 | "moduleResolution": "node", 7 | "jsx": "preserve", 8 | "baseUrl": "./", 9 | /* paths - import rewriting/resolving */ 10 | "paths": { 11 | // If you configured any Snowpack aliases, add them here. 12 | // Add this line to get types for streaming imports (packageOptions.source="remote"): 13 | // "*": [".snowpack/types/*"] 14 | // More info: https://www.snowpack.dev/guides/streaming-imports 15 | }, 16 | /* noEmit - Snowpack builds (emits) files, not tsc. */ 17 | "noEmit": true, 18 | /* Additional Options */ 19 | "strict": true, 20 | "skipLibCheck": true, 21 | "forceConsistentCasingInFileNames": true, 22 | "resolveJsonModule": true, 23 | "allowSyntheticDefaultImports": true, 24 | "importsNotUsedAsValues": "error" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /types/static.d.ts: -------------------------------------------------------------------------------- 1 | /* Use this file to declare any custom file extensions for importing */ 2 | /* Use this folder to also add/extend a package d.ts file, if needed. */ 3 | 4 | /* CSS MODULES */ 5 | declare module '*.module.css' { 6 | const classes: { [key: string]: string }; 7 | export default classes; 8 | } 9 | declare module '*.module.scss' { 10 | const classes: { [key: string]: string }; 11 | export default classes; 12 | } 13 | declare module '*.module.sass' { 14 | const classes: { [key: string]: string }; 15 | export default classes; 16 | } 17 | declare module '*.module.less' { 18 | const classes: { [key: string]: string }; 19 | export default classes; 20 | } 21 | declare module '*.module.styl' { 22 | const classes: { [key: string]: string }; 23 | export default classes; 24 | } 25 | 26 | /* CSS */ 27 | declare module '*.css'; 28 | declare module '*.scss'; 29 | declare module '*.sass'; 30 | declare module '*.less'; 31 | declare module '*.styl'; 32 | 33 | /* IMAGES */ 34 | declare module '*.svg' { 35 | const ref: string; 36 | export default ref; 37 | } 38 | declare module '*.bmp' { 39 | const ref: string; 40 | export default ref; 41 | } 42 | declare module '*.gif' { 43 | const ref: string; 44 | export default ref; 45 | } 46 | declare module '*.jpg' { 47 | const ref: string; 48 | export default ref; 49 | } 50 | declare module '*.jpeg' { 51 | const ref: string; 52 | export default ref; 53 | } 54 | declare module '*.png' { 55 | const ref: string; 56 | export default ref; 57 | } 58 | 59 | /* CUSTOM: ADD YOUR OWN HERE */ 60 | -------------------------------------------------------------------------------- /web-test-runner.config.js: -------------------------------------------------------------------------------- 1 | // NODE_ENV=test - Needed by "@snowpack/web-test-runner-plugin" 2 | process.env.NODE_ENV = 'test'; 3 | 4 | module.exports = { 5 | plugins: [require('@snowpack/web-test-runner-plugin')()], 6 | }; 7 | --------------------------------------------------------------------------------