A handy production-ready template for rapidly frontend development that you've often dreamed of.
Included awesome Preact framework with TypeScript, Tailwind CSS & Headless UI visual frameworks, and configured next generation frontend tooling called Vite.
🔥 Yep, with full backward compatibility to all of React.js ecosystem, but without its overhead! 🔥
Make sure that the Node.js is installed. Version 12.x and higher is required.
For easily template installation process (without git clone and other things), please install degit tool:
npm install -g degitNext, let's download Reactless.ts template:
degit koddr/reactless-ts my-appAnd, finally, go to your app folder, install dependencies and run dev server:
cd ./my-app && npm install && npm run dev
For create a production build, just run npm run build command:
vite v2.X.X building for production...
✓ X modules transformed.
dist/index.html 0.64kb
dist/assets/favicon.XXX.svg 1.49kb
dist/assets/index.XXX.js 3.77kb / brotli: 1.55kb
dist/assets/index.XXX.css 13.85kb / brotli: 3.02kb
dist/assets/vendor.XXX.js 37.88kb / brotli: 12.34kbFor update (and upgrade) all dependencies, just run npm run update command. This will do three things at once: check outdated packages, upgrade them, and then install new versions of those packages:
# 1. npm outdated
Package Current Wanted Latest Location Depended by
@types/node 15.0.3 15.6.0 15.6.0 node_modules/@types/node project
@types/react 17.0.5 17.0.6 17.0.6 node_modules/@types/react project
postcss 8.2.15 8.3.0 8.3.0 node_modules/postcss project
vite 2.3.2 2.3.3 2.3.3 node_modules/vite project
# 2. npx npm-check-updates -u
Need to install the following packages:
npm-check-updates
Ok to proceed? (y) ___ # <-- type 'Y' to continue process
Upgrading /user/folder/project/package.json
[====================] 19/19 100%
@types/node ^15.0.3 → ^15.6.0
@types/react ^17.0.5 → ^17.0.6
postcss ^8.2.15 → ^8.3.0
vite ^2.3.2 → ^2.3.3
# 3. npm install
added X package, removed X package, changed X packages, and audited XXX packages in 6sThis template was created in pursuit of reducing size of the bundle, but with a great desire to make backward compatibility with React. Therefore, the name denotes the direction of the author's movement to reduce the presence of React.js in the template. Less React, less bundle size! That's it.
MIT © Vic Shóstak & True web artisans.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent