@akbaraditamasp/njin v1.1.0
Njin
Njin is a Vite plugin for building modern JavaScript frontends with server-side rendering using the Twig template engine.
Get Started
Installation
npm create vite@latest
npm i @akbaraditamasp/njinVite Config
import njin from "@akbaraditamasp/njin";
export default {
plugins: [njin.plugin()],
build: {
outDir: "./dist/client",
copyPublicDir: false,
},
};Routing & Development
Routing in Njin is automatically handled based on the path of HTML files located in ./src/pages/**/*.html.
Create a simple HTML file ./src/pages/index.html to get started.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello</title>
</head>
<body>
Hello World!
</body>
</html>Then, run the Vite dev server.
npm run devProduction
To run the server in production mode, build your project first with the following command.
npm run buildNext, you need to run the server with Njin CLI, which will start an Express app.
npx njin run ./dist/clientFetch Data
You can also fetch and pass data to the Twig template engine.
Create an ./src/api.js file.
export default {
root: async () => {
return {
companyName: "Njin",
};
},
"pages\\index": async () =>
fetch("https://jsonplaceholder.typicode.com/posts/1").then((response) =>
response.json()
),
};Include it in your Vite Config.
import njin from "@akbaraditamasp/njin";
import api from "./src/api";
export default {
plugins: [njin.plugin({ api })],
build: {
outDir: "./dist/client",
copyPublicDir: false,
},
};You can now access the passed data from Twig using keys root and data.
Build Fetch Data for Production
Before running in production mode, you need to build SSR for the api.js file with the following command.
npx vite build --outDir dist/server --ssr src/api.jsThen, run the following command to start the server with fetch data.
npx njin run ./dist/client -a ./dist/server/api.js