Write a ssr high performance app with vanilla js and pure HTML.
- SSR
- Lazy load images
- SASS compilation
- Easy Routing
Download and install Supernova
npm i -g @supernovajs/core
Create your project
supernova create my-app
Run your project
cd my-app && npm run dev
pages/hello/index.js
You have an async default exported function that returns an object with data property.
module.exports=async()=>{return{data: {meet: "Hello world!",},};};pages/hello/index.html
You can use data object from your index.js here to template your html
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport" content="width=device-width, initial-scale=1.0" /><title>Supernova Hello World!</title><linkrel="stylesheet preload prefetch"
type="text/css"
as="style"
href="/static/{{cssFileName}}"
/><scripttype="application/javascript"
src="/static/{{clientScriptFileName}}"
async></script></head><body><pclass="meeting">{{meet}}</p></body></html>pages/hello/style.scss
.meeting {
font-weight: bolder;
}Pro tip: You can change npm start script to run supernova start --port=8000 to run in port 8000 for example.
npm run dev
npm start
npm run generate-page <name>