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 degit
Next, let's download Reactless.ts template:
degit koddr/reactless-ts my-app
And, 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.34kb
For 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 6s
This 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.