❓ 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
- 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:fixpackage script
🧭 Project Status
Sapper is going to change.
Until create-svelte and @sveltejs/kit are ready, this project base will continue to be maintained.
But, once we move on, I won't be creating project bases (templates / boilerplates) anymore. Instead, you'll apply presets onto the default template like this:
npm init svelte@next # Use the official template from create-svelte
npx use-preset babichjacob/svelte-add-typescript # Apply the changes to set up TypeScript for create-svelte
npx use-preset babichjacob/svelte-add-typegraphql # Apply the changes to set up TypeGraphQL for create-svelte as long as TypeScript is already set up
# Remember, the above are hypothetical commands and the real ones might look and work different
This should have the same result as cloning a project base, but there are more reasons to reach for this solution:
- Reduced "heartbeat commits" (like upgrading packages to their latest versions) to prove the project still works
- Allows picking parts instead of taking all or nothing from a project base
- Focus on higher quality "atomic" presets. For example, there might be a
svelte-add-pwapreset that adds a service worker andmanifest.jsonwith example icon files like we have now create-svelteis young and probably going to change often, so only affected presets will need to be updated- Reduced duplication: I won't need to copy over changes from one project base to another to keep them synchronized
Than there are to continue making project bases:
- (I suspect) preset logic is complex
- I suspect presets are harder to test and can have harder to predict errors
So this is what's going to happen.
Read on to use this project base today:
📋 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
npm run prod
📦 Exporting a Static Site
Your GraphQL server will not be exported with the rest of the site.
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
graphqlPathparameter tocreateSapperAndApolloServerinsrc/server.ts. This is also a good opportunity to rename the function since there is no longer an Apollo Server -
Delete the
src/graphqlfolder -
Uninstall the
apollo-server-express,bufferutil,class-validator,graphql,reflect-metadata,type-graphql, andutf-8-validatepackages
😵 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