@sminnee/vuebox
v0.0.5
Published
Simple API client/server base
Downloads
3
Readme
Vuebox
This is a simple opinionated client/server base I'm using for a few projects.
- Front-end is Vue v3 with SSR
- Back-end is a combined ExpressJS server handling both SSR and the API
- API is a simple JSON API backed by SQLite and direct file storage for media
- Mail is handled with SendGrid
Usage
index.html in the project root, of the form:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--head-html-->
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/src/entry-client.ts"></script>
</body>
</html>server/ and client/ folders in your projects to store sources.
server/index.ts should be something like this:
import { createServer } from "@sminnee/vuebox";
import appApi from "./server/api";
import "dotenv/config";
createServer({
createAppApi: appApi,
dataPath: "data",
emailTemplate: "server/resources/email-template.html",
siteSettings: {
siteName: "Example site",
fromAddress: "Example site <[email protected]>",
notifyAddress: process.env.NOTIFY_EMAIL ?? "[email protected]",
},
}).then(({ app, port }) => {
app.listen(port, () => {
console.info(`http://localhost:${port}/`);
});
});server/api.ts something like this. addListingsRoutes is adding additional routes to the API:
import { appApi as baseApi, type ApiConfig } from "@sminnee/vuebox";
import { addListingsRoutes } from "./listings";
import { DataAdapter } from "./dataAdapter";
export default async function appApi(config: ApiConfig<DataAdapter>) {
const { appApi, services } = await baseApi({ ...config, dataAdapter: DataAdapter });
addListingsRoutes(appApi, services);
return { appApi, services };
}