migrate from deprecated snowpack to vite

Author: Kriechi

.github/workflows/build.yaml

@@ -10,16 +10,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-
-      - name: Setup Node
-        uses: actions/setup-node@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: '16'
-          cache: "npm"
-          registry-url: https://npm.pkg.github.com/
-
+          node-version: 16
+          cache: 'npm'
       - run: npm ci
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - run: npx snowpack build
+      - run: npm run build

.github/workflows/publish.yaml

@@ -1,32 +1,41 @@
-name: Deploy to GitHub Pages
+name: Deploy
 
 on:
+  # Runs on pushes targeting the default branch
   push:
-    branches:
-      - main
+    branches: ['main']
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
 
 jobs:
-  build-deploy:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-
-      - name: Setup Node
-        uses: actions/setup-node@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: 16
           cache: 'npm'
-          registry-url: https://npm.pkg.github.com/
-
       - run: npm ci
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - run: npx snowpack build
-
-      - name: Deploy
-        uses: peaceiris/actions-gh-pages@v3
+      - run: npm run build
+      - uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./build
+          publish_dir: './dist'
           cname: code.circuitpython.org

.gitignore

@@ -7,43 +7,8 @@ yarn-error.log*
 lerna-debug.log*
 .pnpm-debug.log*
 
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
 # Dependency directories
 node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
 
 # TypeScript cache
 *.tsbuildinfo
@@ -54,82 +19,15 @@ web_modules/
 # Optional eslint cache
 .eslintcache
 
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-.env.test
-.env.production
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
 # Stores VSCode versions used for testing VSCode extensions
 .vscode-test
 
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*
-
-# SnowPack output
-build
-
-.DS_Store
+# Vite output
+dist/
 
 # Local SSL
 localhost.cert
 localhost.key
-snowpack.crt
-snowpack.key
 
 # Testing folder
 code/
-
-# generated and compiled files
-assets/css/

Makefile

@@ -6,29 +6,15 @@ A live copy of the tool is hosted here: https://code.circuitpython.org
 
 ## Environment Setup
 
-1. Make sure NPM Version 16 is installed
-2. Copy Files from the Repo to your Web Server Root.
-3. Run npm install
-4. Run npx snowpack dev to continuously update on file changes (or npx snowpack build for one time)
+1. Copy files from the repo to your web server root.
+2. Run `npm install`
+3. Run `npm run dev` or `npx vite` to continuously update on file changes
+   1. Debug with `npx vite -d`
 
-## Running locally as with SSL
+## Production Build
 
-There are 2 ways to do this.
-
-### Using devcert (No installation required)
-
-This is a quick way to get up and running.
-
-1. Generate the certificates by running: npx devcert-cli generate localhost
-2. In snowpack.config.mjs, uncomment any lines with the words "cert" and "key"
-
-### Using mkcert (Installation required)
-
-This way requires installing mkcert, but it's much easier to switch back and forth between https and http.
-
-1. Install [mkcert](https://github.com/FiloSottile/mkcert) on your system
-2. Generate the certificates by running: mkcert -install && mkcert -key-file snowpack.key -cert-file snowpack.crt localhost
-3. Start snowpack in secure mode by --secure to the command: npx snowpack dev --secure
+1. Run `npm run build` or `npx vite build` to generate a static website.
+2. Copy and deploy all files and folders in `./dist/` to your webserver.
 
 ## License