{"id":20109802,"url":"https://github.com/hyper63/sweet-stack","last_synced_at":"2025-05-06T10:31:38.456Z","repository":{"id":43220328,"uuid":"468009414","full_name":"hyper63/sweet-stack","owner":"hyper63","description":"Svelte is Sexy + Deno is Dynamite + GraphQL is Grand = SWEETNESS!","archived":false,"fork":false,"pushed_at":"2022-03-12T14:44:17.000Z","size":29,"stargazers_count":18,"open_issues_count":3,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-05-01T10:20:50.843Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hyper63.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-09T16:36:04.000Z","updated_at":"2024-01-07T03:20:27.000Z","dependencies_parsed_at":"2022-08-03T15:19:17.622Z","dependency_job_id":null,"html_url":"https://github.com/hyper63/sweet-stack","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyper63%2Fsweet-stack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyper63%2Fsweet-stack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyper63%2Fsweet-stack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyper63%2Fsweet-stack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hyper63","download_url":"https://codeload.github.com/hyper63/sweet-stack/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224499930,"owners_count":17321605,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T18:09:28.737Z","updated_at":"2024-11-13T18:09:29.269Z","avatar_url":"https://github.com/hyper63.png","language":"JavaScript","readme":"\u003ch1 align=\"center\"\u003eThe SWEET Stack\u003c/h1\u003e\n\u003cp align=\"center\"\u003eThis is a template repository for Deno, GraphQL, and Svelte projects\u003c/p\u003e\n\n---\n\n## Table of Contents\n\n- [Introduction](#introduction)\n- [How to use this template](#how-to-use-this-template)\n- [Prequisites](#prerequisites)\n- [Deno and GraphQL](#deno-and-graphql)\n- [SvelteJS](#sveltejs)\n- [BONUS](#bonus)\n- [Contributing](#contributing)\n- [License](#license)\n\n---\n\n## Introduction\n\nSvelte is an innovative approach to frontend software development, the component\nmodel, and reactivity features creates simplistic approach to some hard\nproblems. Svelte runs on the front end and is known as a Single Page\nApplication.\n\nDeno is a JavaScript Server side platform similar to NodeJs but focused on Web\nStandards, supports linting, formatting, testing, and typescript out of the box.\n\nI love both of these technologies, but I also enjoy simplicity, this stack\nrepresents simplicity, I know there are trade-offs with SPA architecture, but\none advantage of Deno, is Deno Deploy and the ability to push your app to the\nEdge. This offers localized access to assets and server-based functionality, if\nyou wish to serve a static web page, just put it in the public folder, if you\nwish to serve dynamic pages then use Svelte and compile to JS. I think the\ntarget for this stack is small applications, if your needs are very complex, you\nmay want to consider SvelteKit or something similar. If your needs are static\nwebsite, checkout Astro or Gatsby.\n\n## How to use this template\n\nIn this readme, I will go through how to manually build this stack, but if you\nrather jump to just building a project you can fork this repo and go, or you can\nuse `degit` to pull this repo down and start building as well.\n\n```\nnpx degit hyper63/sweet-stack myproject\n```\n\nYou will need to have both NodeJS and Deno installed.\n\n## Prerequisites\n\n- Git - https://git-scm.com/\n- NodeJS - https://nodejs.org\n- Deno - https://deno.land\n\n\u003e NOTE: we will be using Makefile to run our scripts, your OS may not support\n\u003e this feature without installing the `make` command-line application.\n\n## Deno and GraphQL\n\nSetting up Deno and GraphQL is straight forward, now like everything, there are\nmany opinions, we will be using a Makefile to manage our build scripts. We will\nbe placing our code in the `src` directory and we will be using `import-maps`\nfeature of `Deno` to manage our dependencies for Deno.\n\n### Setup Project\n\n```sh\ntouch import_map.json Makefile\nmkdir src\n```\n\nMakefile\n\n```\ndev:\n\t@deno run --allow-net --allow-read --allow-env --import-map=./import_map.json src/server.js\n\ntest:\n\t@deno fmt src \u0026\u0026 deno lint src \u0026\u0026 deno test src\n```\n\nimport_map.json\n\n```json\n{\n  \"imports\": {\n    \"std/\": \"https://deno.land/std/\",\n    \"gql\": \"https://deno.land/x/gql@1.1.0/mod.ts\",\n    \"graphql_tools\": \"https://deno.land/x/graphql_tools@0.0.2/mod.ts\",\n    \"graphql_tag\": \"https://deno.land/x/graphql_tag@0.0.1/mod.ts\",\n    \"dotenv\": \"https://deno.land/x/dotenv@v3.1.0/load.ts\"\n  }\n}\n```\n\nCreate a server.js and api.js files in the `src` folder\n\n```sh\ntouch src/server.js src/api.js\n```\n\nserver.js\n\n```js\nimport { serve } from \"std/http/server.ts\";\nimport { graphql, org } from \"./api.js\";\n\n/**\n * @param {Request} reg\n * @returns {Response}\n */\nserve((req) =\u003e {\n  const routes = {\n    \"/\": serveStatic(\"./app/public/index.html\", \"text/html\"),\n    \"/favicon.png\": serveStatic(\"./app/public/favicon.png\", \"image/png\"),\n    \"/build/bundle.css\": serveStatic(\n      \"./app/public/build/bundle.css\",\n      \"text/css\",\n    ),\n    \"/build/bundle.js\": serveStatic(\n      \"./app/public/build/bundle.js\",\n      \"text/javascript\",\n    ),\n    \"/graphql\": graphql,\n  };\n\n  // get path from req object\n  const { pathname } = new URL(req.url);\n\n  // log request\n  console.log(`${req.method} ${pathname}`);\n\n  // simple match to handle the request\n  return routes[pathname] ? routes[pathname](req) : routes[\"/\"](req);\n});\n\n/**\n * @param {string} file\n * @param {string} type\n * @returns {Response}\n */\nfunction serveStatic(file, type) {\n  return async () =\u003e\n    new Response(\n      await Deno.readTextFile(file),\n      {\n        headers: { \"content-type\": type },\n      },\n    );\n}\n```\n\napi.js\n\n```js\nimport \"dotenv\";\nimport { GraphQLHTTP } from \"gql\";\nimport { makeExecutableSchema } from \"graphql_tools\";\nimport { gql } from \"graphql_tag\";\n\nconst typeDefs = gql`\n  type Query {\n    hello : String\n  }\n`;\n\nconst resolvers = {\n  Query: {\n    hello: () =\u003e Promise.resolve(\"Hello World!\"),\n  },\n};\n\n/**\n * @param {Request} req\n * @returns {Response}\n */\nexport const graphql = async (req) =\u003e\n  await GraphQLHTTP({\n    schema: makeExecutableSchema({ resolvers, typeDefs }),\n    graphiql: true,\n  })(req);\n```\n\n### Run\n\n```sh\nmake\n```\n\nNavigate to http://localhost:8000/graphql\n\nand run the following query\n\n```\nquery {\n  hello\n}\n```\n\n### Test\n\n```sh\nmake test\n```\n\n---\n\n## SvelteJS\n\nSetting up Svelte is the exact same process as https://svelte.dev\n\n```sh\nnpx degit sveltejs/template app\ncd app\nyarn\n```\n\nNow we do need to make some adjustments:\n\nedit the `rollup.conf.js` file\n\n\u003e We want to comment out the `!production \u0026\u0026 serve()` line, and the\n\u003e `!production \u0026\u0026 livereload('public')` line.\n\n```js\n// // In dev mode, call `npm run start` once\n// // the bundle has been generated\n// !production \u0026\u0026 serve(),\n\n// // Watch the `public` directory and refresh the\n// // browser on changes when not in production\n// !production \u0026\u0026 livereload('public'),\n```\n\nWe can run Svelte separately in another terminal by running:\n\n```\nyarn dev\n```\n\nBut lets create one startup script, using `foreman`\n\n```sh\nnpm i -g foreman\n```\n\nCreate a `Procfile` in the project root directory\n\n```\nserver: make\napp: cd app \u0026\u0026 yarn \u0026\u0026 yarn dev\n```\n\nNow, we can run both our server and app with one command:\n\n```sh\nnf start\n```\n\n## Bonus\n\n- Comming Soon\n\n## Contributing\n\nWe welcome suggestions and improvements to this stack, especially if there are\nbetter approaches to running parallel tasks or any other items, like dependency\nmanagement, etc.\n\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyper63%2Fsweet-stack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhyper63%2Fsweet-stack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyper63%2Fsweet-stack/lists"}