๐ Opinionated Sapper project base
โ What is this?
The site that builds from this repository can be found here.
This is an extremely opinionated Sapper project base intended for my own use. That being said, there is quite a bit of work put into it to make it generalized and adaptable to your own setup, given that you want to use most of these things. The lower something is on this list, the easier it is to reconfigure or remove:
- Sapper for Svelte
- Firebase
- Functions for Server Side Rendering (SSR)
- Hosting for static assets
- Thanks to @Eckhardt-D's
sapper-firebase-starter
- Thanks to @nhristov's
sapper-template-firebase
- TypeScript
- TypeGraphQL
- Inside Svelte components, thanks to
svelte-preprocess
- PostCSS
- Tailwind CSS
- postcss-import
- PurgeCSS
- CSSNano
- Inside Svelte components, thanks to
svelte-preprocess
- GitHub Actions
- Automatic building and deployment to Firebase, triggered on commits to
main
ormaster
- Automatic building and deployment to Firebase, triggered on commits to
- Progressive Web App (PWA) best practices set up
manifest.json
's most important fields filled out- High Lighthouse audit score
- ESLint
- VS Code Extension
eslint:fix
package script
This template comes from combining two of my smaller ones: one for Tailwind CSS (PostCSS), and another for TypeScript and GraphQL. If this is too much for you, check out one of those!
๐งญ Project Status
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-firebase-hosting, svelte-add-tailwindcss, and svelte-add-graphql. Beware that svelte-add-graphql is not compatible with svelte-add-firebase-hosting yet.
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-firebase-typescript-graphql-tailwindcss-actions-template
๐ด Fork
Click the Use this template
button on this project's GitHub page.
โฌ๏ธ Install Dependencies
You need to be using version 14.15 or higher of Node; the package.json
engines
field only specifies 10
for Cloud Functions for Firebase.
cd sapper-firebase-typescript-graphql-tailwindcss-actions-template
npm install # pnpm also works
๐ Usage
๐งช Development
npm run dev
๐ฅ Deployment to Firebase
This will create a production build for you before deploying.
npm run deploy
๐จ Testing Production Builds Locally
This probably pairs well with Firebase Emulators.
npm run prod
npm run start
๐ฆ Deploying a Static Site to Firebase Hosting
Cloud Functions for Firebase requires billing set up with the Blaze Plan, but you can stay on the Spark Plan for a free and fast (no cold starts!) static site:
npm run deploy:export
This will create an exported build for you before deploying.
If your project is transitioning from SSR to a static site, be sure to delete the residual ssr
Cloud Function:
npm run firebase functions:delete ssr
You will also need to remove rewrites
from firebase.json
.
โ Configuration
๐ฅ Firebase and ๐ GitHub Actions
The least you should need to do to get started is to edit .firebaserc
, changing the project ID to your project (initialized in the Firebase console) ID.
For automatic building and deployment to work, you need to generate a CI login token from Firebase:
npm run firebase login:ci
Then, go to your repository's Settings > Secrets. Copy the result of the command above and save it as a Secret named FIREBASE_TOKEN
.
You can test if it's working by making a commit to main
or master
and checking the Actions tab of your repository to see if your project successfully builds and deploys to Firebase.
โก 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 Tailwind CSS (and PurgeCSS)
- Remove all Tailwind imports in the
src/global.pcss
file - Remove these lines in
postcss.config.js
:-
const tailwindcss = require("tailwindcss");
-
const tailwindcssConfig = require("./tailwind.config");
-
tailwindcss(tailwindcssConfig),
-
- Delete the
tailwind.config.js
file - Uninstall the
tailwindcss
package
๐ธ 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 tocreateSapperAndApolloServer
insrc/server.ts
. This is also a good opportunity to rename the function since there is no longer an Apollo Server; if you do rename it, then also update the reference in/index.js
or your Cloud Functions will still be referring to the old (now non-existent) function -
Delete the
src/graphql
folder -
Uninstall the
apollo-server-express
,bufferutil
,class-validator
,graphql
,reflect-metadata
,type-graphql
, andutf-8-validate
packages -
Remove the now-error-causing
- name: "Delete the Unexportable GraphQL Page" run: "rm __sapper__/export/graphql"
task in
.github/workflows/build-and-deploy.yml
๐ต 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