This is a template repository for Deno, GraphQL, and Svelte projects
Svelte is an innovative approach to frontend software development, the component model, and reactivity features creates simplistic approach to some hard problems. Svelte runs on the front end and is known as a Single Page Application.
Deno is a JavaScript Server side platform similar to NodeJs but focused on Web Standards, supports linting, formatting, testing, and typescript out of the box.
I love both of these technologies, but I also enjoy simplicity, this stack represents simplicity, I know there are trade-offs with SPA architecture, but one advantage of Deno, is Deno Deploy and the ability to push your app to the Edge. This offers localized access to assets and server-based functionality, if you wish to serve a static web page, just put it in the public folder, if you wish to serve dynamic pages then use Svelte and compile to JS. I think the target for this stack is small applications, if your needs are very complex, you may want to consider SvelteKit or something similar. If your needs are static website, checkout Astro or Gatsby.
In this readme, I will go through how to manually build this stack, but if you
rather jump to just building a project you can fork this repo and go, or you can
use degit
to pull this repo down and start building as well.
npx degit hyper63/sweet-stack myproject
You will need to have both NodeJS and Deno installed.
NOTE: we will be using Makefile to run our scripts, your OS may not support this feature without installing the
make
command-line application.
Setting up Deno and GraphQL is straight forward, now like everything, there are
many opinions, we will be using a Makefile to manage our build scripts. We will
be placing our code in the src
directory and we will be using import-maps
feature of Deno
to manage our dependencies for Deno.
touch import_map.json Makefile
mkdir src
Makefile
dev:
@deno run --allow-net --allow-read --allow-env --import-map=./import_map.json src/server.js
test:
@deno fmt src && deno lint src && deno test src
import_map.json
{
"imports": {
"std/": "https://deno.land/std/",
"gql": "https://deno.land/x/[email protected]/mod.ts",
"graphql_tools": "https://deno.land/x/[email protected]/mod.ts",
"graphql_tag": "https://deno.land/x/[email protected]/mod.ts",
"dotenv": "https://deno.land/x/[email protected]/load.ts"
}
}
Create a server.js and api.js files in the src
folder
touch src/server.js src/api.js
server.js
import { serve } from "std/http/server.ts";
import { graphql, org } from "./api.js";
/**
* @param {Request} reg
* @returns {Response}
*/
serve((req) => {
const routes = {
"/": serveStatic("./app/public/index.html", "text/html"),
"/favicon.png": serveStatic("./app/public/favicon.png", "image/png"),
"/build/bundle.css": serveStatic(
"./app/public/build/bundle.css",
"text/css",
),
"/build/bundle.js": serveStatic(
"./app/public/build/bundle.js",
"text/javascript",
),
"/graphql": graphql,
};
// get path from req object
const { pathname } = new URL(req.url);
// log request
console.log(`${req.method} ${pathname}`);
// simple match to handle the request
return routes[pathname] ? routes[pathname](req) : routes["/"](req);
});
/**
* @param {string} file
* @param {string} type
* @returns {Response}
*/
function serveStatic(file, type) {
return async () =>
new Response(
await Deno.readTextFile(file),
{
headers: { "content-type": type },
},
);
}
api.js
import "dotenv";
import { GraphQLHTTP } from "gql";
import { makeExecutableSchema } from "graphql_tools";
import { gql } from "graphql_tag";
const typeDefs = gql`
type Query {
hello : String
}
`;
const resolvers = {
Query: {
hello: () => Promise.resolve("Hello World!"),
},
};
/**
* @param {Request} req
* @returns {Response}
*/
export const graphql = async (req) =>
await GraphQLHTTP({
schema: makeExecutableSchema({ resolvers, typeDefs }),
graphiql: true,
})(req);
make
Navigate to http://localhost:8000/graphql
and run the following query
query {
hello
}
make test
Setting up Svelte is the exact same process as https://svelte.dev
npx degit sveltejs/template app
cd app
yarn
Now we do need to make some adjustments:
edit the rollup.conf.js
file
We want to comment out the
!production && serve()
line, and the!production && livereload('public')
line.
// // In dev mode, call `npm run start` once
// // the bundle has been generated
// !production && serve(),
// // Watch the `public` directory and refresh the
// // browser on changes when not in production
// !production && livereload('public'),
We can run Svelte separately in another terminal by running:
yarn dev
But lets create one startup script, using foreman
npm i -g foreman
Create a Procfile
in the project root directory
server: make
app: cd app && yarn && yarn dev
Now, we can run both our server and app with one command:
nf start
We welcome suggestions and improvements to this stack, especially if there are better approaches to running parallel tasks or any other items, like dependency management, etc.
MIT