DEV Community

C.Y. Park
C.Y. Park

Posted on

SolidJS on Snowpack – Quick Dev Guide

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
Enter fullscreen mode Exit fullscreen mode
⋅ ⋅ ⋅

◆ ◆ ◆

⋅ ⋅ ⋅

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 build directory with service worker.

📜 npm run build_snowpack

  • Builds a production version in build directory 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.2 with ✔️@snowpack/plugin-webpack@3.0.0 to 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

⋅ ⋅ ⋅

🔥 Live Demo 🔥

Top comments (0)