Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/beejunk/universal-snowpack-example
Example universal Javascript app with no Webpack/Babel using Snowpack
https://github.com/beejunk/universal-snowpack-example
Last synced: 3 months ago
JSON representation
Example universal Javascript app with no Webpack/Babel using Snowpack
- Host: GitHub
- URL: https://github.com/beejunk/universal-snowpack-example
- Owner: beejunk
- Created: 2019-11-16T19:16:01.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2023-01-07T11:49:38.000Z (almost 2 years ago)
- Last Synced: 2024-07-28T21:46:54.229Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 290 KB
- Stars: 13
- Watchers: 4
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-snowpack - [Source - everglades-56846.herokuapp.com/) (Examples)
README
# Example universal JavaScript App using Snowpack V3
This is a *To-Do* application built with [Snowpack](https://github.com/pikapkg/snowpack) and [Preact](https://preactjs.com/). A live version can be found here:
* https://safe-everglades-56846.herokuapp.com/
The goal of this project is to provide an example application where no bundlers are used and minimal build steps are required. All source code is written exclusively in JavaScript, and component code is shared between server and client.
## Features
* Pages are rendered server-side, and all Preact component code is shared between the server and the client.
* All code (including server code) uses ES Modules.
* No bundlers are used, even for production code.
* Minimal build steps required. Code is not minified for production.
* All code is pure JavaScript. Babel is not used, and Preact combined with [htm](https://github.com/developit/htm) is used to build components without JSX.
* Basic implementation of [Next.js](https://nextjs.org/)-like file system routingSee the comments in the code for more details on the implementation.
## Caveats
The idea behind this example is to show how far you can go with as little JavaScript tooling as possible. For a real-world application, you'll want to at least minimize your code before deploying. Additionally, any large scale application should (for now) bundle its production code for performance reasons.
[Fast refresh](https://www.snowpack.dev/concepts/hot-module-replacement) is not set up for this example.
## Additional resources
See the [Snowpack website](https://www.snowpack.dev/) for more details on the benefits of bundle-less development.