Sapper Firebase Typescript Graphql Tailwindcss Actions Template

Overview

This article is a product analysis of an opinionated Sapper project base that is intended for personal use but is also adaptable for others. The project includes various features such as Sapper for Svelte, official VS Code extensions, Firebase functions for server-side rendering and hosting for static assets. The author has put in significant effort to make the project base generalized and easily configurable. The article also provides installation instructions and guidance on how to use and deploy the project.

Features

• Sapper for Svelte: The project is built using the Sapper framework for Svelte.
• Firebase: Utilizes Firebase for server-side rendering (SSR), hosting for static assets, and automatic building and deployment.
• TypeScript: The project includes TypeScript support.
• TypeGraphQL: Inside Svelte components, thanks to svelte-preprocess.
• PostCSS: Uses PostCSS for processing CSS.
• Tailwind CSS: Tailwind CSS is included and configured.
• GitHub Actions: Automatic building and deployment to Firebase triggered on commits to the main or master branch.
• Progressive Web App (PWA) best practices: Includes configuration for a PWA with manifest.json filled out and high Lighthouse audit score.
• ESLint: ESLint is configured with a VS Code extension.

Installation

1. Clone or fork the project repository.
2. Install Node version 14.15 or higher.
3. Install project dependencies using the package manager of your choice.
4. Follow the provided instructions for development, deployment, testing, and configuration.

Summary

This product analysis covers an opinionated Sapper project base that provides various features and functionality for building web applications. The project is built using Sapper for Svelte and includes support for Firebase, TypeScript, TypeGraphQL, PostCSS, Tailwind CSS, GitHub Actions, PWA best practices, and ESLint. The article provides installation instructions and guidance on using and deploying the project.