🌐 Sapper with TypeScript and GraphQL project base

❓ What is this?

This is an extension to the official Sapper Rollup template with TypeScript preprocessing and a GraphQL server through TypeGraphQL (Apollo Server).

If you're looking for something with much, much more bundled in, check out my opinionated project base.

Sapper for Svelte
- Official VS Code Plugin
TypeScript
- TypeGraphQL
- Inside Svelte components, thanks to svelte-preprocess
Progressive Web App (PWA) best practices set up
- manifest.json's most important fields filled out
- High Lighthouse audit score
ESLint
- VS Code Plugin
- eslint:fix package script

📋 Copy

Choose either to clone or fork depending on your preference.

🐑 Clone

git clone https://github.com/babichjacob/sapper-typescript-graphql-template

🍴 Fork

Click the Use this template button on this project's GitHub page.

⬇️ Install Dependencies

cd sapper-typescript-graphql-template
npm install  # pnpm also works

🛠 Usage

🧪 Development

npm run dev

🔨 Building for Production

If you do not need to include heavy Babel transforms and polyfills to support old browsers on your site, then remove the --legacy flag in the sapper:build package script to lighten it up.

npm run prod

📦 Exporting a Static Site

Your GraphQL server will not be exported with the rest of the site.

If you do not need to include heavy Babel transforms and polyfills to support old browsers on your site, then remove the --legacy flag in the export package script to lighten it up.

npm run export

⚙ Configuration

⚡ Web app

Many of the fields in static/manifest.json (short_name, name, description, categories, theme_color, and background_color) are filled with demonstrative values that won't match your site. Similarly, you've got to take new screenshots to replace the included static/screenshot-1.png and static/screenshot-2.png files. If you want, you can add app shortcut definitions for "add to home screen" on Android. Once you change theme_color, update the meta name="theme-color" tag in src/template.html to match.

The Apple touch icon, favicon, and logo- files (also all in the static directory) are created by placing the logo within a "safe area" centered circle that takes up 80% of the canvas's dimension. For instance, the constraining circle in logo-512.png is 512 × 0.80 = 409.6 ≈ 410 pixels wide and tall.

🗺 Source maps

This project base comes with source maps enabled during development and disabled during production for the best compromise between performance and developer experience. You can change this behavior through the sourcemap variable in rollup.config.js.

🕸 Optionally removing the GraphQL server

Remove these lines in src/server.ts:

import { createApolloServer } from "./graphql";

const apolloServer = await createApolloServer();

apolloServer.applyMiddleware({ app, path: graphqlPath });

Remove the now-useless graphqlPath parameter to createSapperAndApolloServer in src/server.ts. This is also a good opportunity to rename the function since there is no longer an Apollo Server
Delete the src/graphql folder
Uninstall the apollo-server-express, bufferutil, class-validator, graphql, reflect-metadata, type-graphql, and utf-8-validate packages

😵 Help! I have a question

Create an issue and I'll try to help.

😡 Fix! There is something that needs improvement

Create an issue or pull request and I'll try to fix.

I'm sorry, because of my skill level and the fragility of (the combination of) some of these tools, there are likely to be problems in this project. Thank you for bringing them to my attention or fixing them for me.

📄 License

MIT

This README was generated with ❤️ by readme-md-generator

IZEDx/sapper-typescript-graphql-template