This is an extension to the official Sapper Rollup template with TypeScript preprocessing and a GraphQL server through TypeGraphQL (Apollo Server).
- Sapper for Svelte
- 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
If you're looking for something with much, much more bundled in, check out my opinionated project base.
This project base will continue to be maintained until SvelteKit is ready.
Once you are prepared to migrate, check out the Svelte Adders project for information about how to recreate this project base's functionality. You should specifically look at svelte-add-graphql.
Read on to use this project base today:
Choose either to clone or fork depending on your preference.
git clone https://github.com/babichjacob/sapper-typescript-graphql-template
Click the Use this template
button on this project's GitHub page.
cd sapper-typescript-graphql-template
npm install # pnpm also works
npm run dev
npm run prod
Your GraphQL server will not be exported with the rest of the site.
npm run export
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.
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
.
-
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 tocreateSapperAndApolloServer
insrc/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
, andutf-8-validate
packages
Create an issue and I'll try to help.
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.
MIT
This README was generated with ❤️ by readme-md-generator