This is a SolidJS app dev guide using Snowpack Solid Template. The template has been tested on node.js v16.13.0 and npm v8.1.0. It might or might not work on other node.js and/or npm versions.
1. Install Template
# Open terminal and clone the repo.
git@github.com:cy-park/snowpack-solid-template.git
# Install dependencies
npm install
2. Configure Settings
The only required step is Snowpack alias setting. All other steps with ‘optional’ tags are not required unless you make any major template modification (i.e. changing directory structures).
2.1 Aliases
Open 🗎snowpack.config.js and edit alias values.
2.2 Typescript and ECMAScript settings (optional)
Check 🗎tsconfig.json for Typescript configuration. For ECMAScript version setting, check target value in the file.
2.3 Set up PostCSS and Tailwind (optional)
PostCSS is run by 🗎snowpack.config.js which refers to 🗎.postcssrc which refers to 🗎tailwind.config.js. Follow this order and configure accordingly if you want more sophisticated CSS compile process.
2.4 Service Worker for PWA settings (optional)
Check 🗎workbox-config.js for Workbox settings.
3. Scripts
📜 npm start
- Starts dev mode at
http://localhost:8080.
📜 npm run build
- Builds a production version in
builddirectory with service worker.
📜 npm run build_snowpack
- Builds a production version in
builddirectory without service worker.
📜 npm run service_worker
- Builds service worker.
📜 npm run lint
- Check if ts/js/tsx/jsx files are neat.
📜 npm run format
- Format ts/js/tsx/jsx files based on the settings in 🗎
.prettierrc.
4. Caveat
It is required to use ✔️
Snowpack@3.3.2with ✔️@snowpack/plugin-webpack@3.0.0to use CSS Modules.
As of Nov 17, 2021, Snowpack has a bug on CSS Modules compile process. As a workaround, we use this hotfix. Once this issue is resolved, 🗎snowpack.config.js can be replaced with 🗎snowpack.config.future-cssmodules.js.
For more information about this issue, check these issue tickets: Issue 2998, Issue 3219, Issue 3243
Top comments (0)