Functional Repl.it version of the SnowPack "Getting Started" tutorial as of 22/02/2021.
Deployement as github page directly via version control panel. This allow to live edit your website on repl.it and deploy it live only when you are ready via a simple commit.
Repl.it Spotlight page: https://repl.it/@jgrizou/Snowpack-Boilerplate
Github repo: https://github.com/jgrizou/snowpack-boilerplate
Github page of the build version: https://jgrizou.github.io/snowpack-boilerplate/
See video: TODO
To develop:
- Clicking the Run button will run
snowpack dev
command and host on the repl embedded webpage as expected.
To deploy:
- in ./snowpack.config.js change the
baseUrl: '/snowpack-boilerplate'
to the name of your repo, this is to adapt to the baseUrl of the ghpage. This demo is hosted on a github repository called snowpack-boilerplate, hence whybaseUrl: '/snowpack-boilerplate'
. - go into the shell panel and execute
npm run build
. This will compile the code to static files in the ./docs folder. - then go into the version control tab, commit and push changes to your repo.
- make sure your repository is set as serving a github page from the ./docs folder.
Website code is under ./src and builds into ./docs
I started from a Node.js template and reconfigure the Run button to start snowpack via snowpack dev
instead (see .replit file).
./docs/.nojekyll file tells github to not try to use jekyll on the files. We copy it on the build command, see snowpack build && touch ./docs/.nojekyll
in package.json build script.
In ./snowpack.config.js you find:
module.exports = {
mount: {
src: '/',
},
buildOptions: {
baseUrl: '/snowpack-boilerplate',
out: './docs',
},
};
- mount is to tell that the ./src folder contain the site files
- baseUrl is to prepend the name of your repo for base links (/) to work and redirect to (/snowpack-boilerplate)
- out is the place where the file will be generated by snowpack, we want this to be docs as per ghpages convention
See FredKSchott/snowpack#1423 for ghpage discussion
Finally, in src/index.html, notice the use of %PUBLIC_URL% to refer the the baseUrl.
Have fun!