snowpack-multi-framework

Snowpack example of React, Svelte, and Vue running simultaneously and sharing state.

Instructions

• git clone this repository.
• Run npm i to install dependencies.
• Run npm start to start.

Instructions for building from scratch

• Use create-snowpack-app with minimal template.

npx create-snowpack-app my-repo-name --template @snowpack/app-template-minimal

• Install dependencies and devDependencies.

npm i react react-dom svelte vue
npm i @snowpack/plugin-svelte @snowpack/plugin-vue -D

Code has not been included here, so you can use this repo as an example.

• Add installed plugins to snowpack.config.js.
• Update index.html to include root elements.
• Create components for each framework. (In this example, "App" and a "Button" components were created for each framework.)
• Update index.js to include render code for each framework. (In this case, "App" components for each, then a simple button.)
• Create shared state and insure it gets passed down. (In this case, we are passing an "onChange" function and "counter" variable.)

Enable GitHub Pages deployment (optional)

• Update snowpack.config.js to include buildOptions (baseUrl must match yours)
• Add GitHub publish action file at .github/workflows/publish.yml.
• Commit and push your code.

Optional for versioning

• Add .env with version and updated variables
• Add deploy script to update
• Run npm run deploy before pushing.

Section below generated by Create Snowpack App

New Project

✨ Bootstrapped with Create Snowpack App (CSA).

Available Scripts

npm start

Runs the app in the development mode. Open http://localhost:8080 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

npm run build

Builds a static copy of your site to the build/ folder. Your app is ready to be deployed!

For the best production performance: Add a build bundler plugin like @snowpack/plugin-webpack or snowpack-plugin-rollup-bundle to your snowpack.config.json config file.

Q: What about Eject?

No eject needed! Snowpack guarantees zero lock-in, and CSA strives for the same.