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>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Supernova Hello World!</title>
<link
rel="stylesheet preload prefetch"
type="text/css"
as="style"
href="/static/{{cssFileName}}"
/>
<script
type="application/javascript"
src="/static/{{clientScriptFileName}}"
async
></script>
</head>
<body>
<p class="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>