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

# O…


This content originally appeared on DEV Community and was authored by C.Y. Park

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 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 🔥


This content originally appeared on DEV Community and was authored by C.Y. Park


Print Share Comment Cite Upload Translate Updates
APA

C.Y. Park | Sciencx (2021-11-18T05:45:26+00:00) SolidJS on Snowpack – Quick Dev Guide. Retrieved from https://www.scien.cx/2021/11/18/solidjs-on-snowpack-quick-dev-guide/

MLA
" » SolidJS on Snowpack – Quick Dev Guide." C.Y. Park | Sciencx - Thursday November 18, 2021, https://www.scien.cx/2021/11/18/solidjs-on-snowpack-quick-dev-guide/
HARVARD
C.Y. Park | Sciencx Thursday November 18, 2021 » SolidJS on Snowpack – Quick Dev Guide., viewed ,<https://www.scien.cx/2021/11/18/solidjs-on-snowpack-quick-dev-guide/>
VANCOUVER
C.Y. Park | Sciencx - » SolidJS on Snowpack – Quick Dev Guide. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/11/18/solidjs-on-snowpack-quick-dev-guide/
CHICAGO
" » SolidJS on Snowpack – Quick Dev Guide." C.Y. Park | Sciencx - Accessed . https://www.scien.cx/2021/11/18/solidjs-on-snowpack-quick-dev-guide/
IEEE
" » SolidJS on Snowpack – Quick Dev Guide." C.Y. Park | Sciencx [Online]. Available: https://www.scien.cx/2021/11/18/solidjs-on-snowpack-quick-dev-guide/. [Accessed: ]
rf:citation
» SolidJS on Snowpack – Quick Dev Guide | C.Y. Park | Sciencx | https://www.scien.cx/2021/11/18/solidjs-on-snowpack-quick-dev-guide/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts