This is an extension to the official Sapper Rollup template with TypeScript. This boilerplate aims to be very basic without too many plugins! This boilerplate is a modified version of Sapper-TS-GraphQL by Jacob Babich
If you're looking for something with much, much more bundled in, check out Sapper-TS-GraphQL-Tailwind-Actions by Jacob Babich.
TIP: Use PNPM instead of
npm
for faster installations. Install pnpm usingnpm i -g pnpm
.
git clone https://github.com/Himujjal/sapper-ts my-app
cd my-app
npm i
For Pro Users: 🙃😎😉
pnpx degit Himujjal/sapper-ts my-app
cd my-app
pnpm i
npm run dev # or `pnpm dev`
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 # or `pnpm prod`
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 # or `pnpm 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
.
Create an issue or pull request and I'll try to fix.
- Compression library for tinyhttp
- Helmet support (Security headers)
This Repo 100% is completely inspired by Jacob Babich's boilerplate!