The SWEET Stack

This is a template repository for Deno, GraphQL, and Svelte projects

Introduction

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.

How to use this template

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.

Prerequisites

NOTE: we will be using Makefile to run our scripts, your OS may not support
this feature without installing the make command-line application.

Deno and GraphQL

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.

Setup Project

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);

Run

make

Navigate to http://localhost:8000/graphql

and run the following query

query {
  hello
}

Test

make test

SvelteJS

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

Bonus

  • Comming Soon

Contributing

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.

License

MIT

GitHub

View Github