sapper-firebase-typescript-graphql-tailwindcss-actions-template - GitLite

KO | EN

gitlite — search

#javascript #react #ai #llm #golang #linux #docker #java #windows #cli #kubernetes #vue #security #mcp

sapper-firebase-typescript-graphql-tailwindcss-actions-template

(★ 105)

A template that includes Sapper for Svelte, Firebase functions and hosting, TypeScript and TypeGraphQL, Tailwind CSS, ESLint, and automatic building and deployment with GitHub Actions

파일 탐색기

최종 버전 다운로드 (.zip)

- - build-and-deploy.yml
- extensions.json
- settings.json
- - ExampleComponent.svelte
- - index.ts
- - 404.svelte
  - _error.svelte
  - _layout.svelte
  - example.ts
  - index.svelte
- client.ts
- global.pcss
- server.ts
- service-worker.ts
- template.html
- apple-touch-icon-180.png
- favicon.png
- logo-192.png
- logo-512.png
- manifest.json
- screenshot-1.png
- screenshot-2.png
.eslintrc.json
.firebaserc
.gitignore
build-global-css.mjs
firebase.json
index.js
LICENSE
package-lock.json
package.json
postcss.config.js
README.md
rollup.config.js
svelte.config.js
tailwind.config.js
tsconfig.json

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/babichjacob/sapper-firebase-typescript-graphql-tailwindcss-actions-template

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd sapper-firebase-typescript-graphql-tailwindcss-actions-template

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install # pnpm also works

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm run dev

개발/실행 서버를 켭니다.

npm run deploy

이 명령어를 터미널에 그대로 입력해 실행하세요.

npm run prod

이 명령어를 터미널에 그대로 입력해 실행하세요.

npm run start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center">🌐 Opinionated Sapper project base</h1>

## ❓ What is this?
The site that builds from this repository can be found [here](https://fir-sapper-tailwindcss.web.app/).

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](https://sapper.svelte.dev/)
  - [Official VS Code Extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)
- [Firebase](https://firebase.google.com/)
  - [Functions](https://firebase.google.com/docs/functions/) for Server Side Rendering (SSR)
  - [Hosting](https://firebase.google.com/docs/hosting) for static assets
  - Thanks to [@Eckhardt-D](https://github.com/Eckhardt-D)'s [`sapper-firebase-starter`](https://github.com/Eckhardt-D/sapper-firebase-starter)
  - Thanks to [@nhristov](https://github.com/nhristov)'s [`sapper-template-firebase`](https://github.com/nhristov/sapper-template-firebase)
- [TypeScript](https://www.typescriptlang.org/)
  - [TypeGraphQL](https://typegraphql.com/)
  - Inside Svelte components, thanks to [`svelte-preprocess`](https://github.com/kaisermann/svelte-preprocess)
- [PostCSS](https://postcss.org/)
  - [Tailwind CSS](https://tailwindcss.com/)
     - [Official VS Code Extension](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
  - [postcss-import](https://github.com/postcss/postcss-import)
  - [PurgeCSS](https://www.purgecss.com/)
  - [CSSNano](https://cssnano.co/)
  - Inside Svelte components, thanks to [`svelte-preprocess`](https://github.com/kaisermann/svelte-preprocess)
- [GitHub Actions](https://github.com/features/actions)
  - Automatic building and deployment to Firebase, triggered on commits to `main` or `master`
- [Progressive Web App (PWA)](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps) best practices set up
  - [`manifest.json`](https://developer.mozilla.org/en-US/docs/Web/Manifest)'s most important fields filled out
  - High [Lighthouse](https://developers.google.com/web/tools/lighthouse) audit score
- [ESLint](https://eslint.org/)
  - [VS Code Extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
  - `eslint:fix` package script

This template comes from combining two of my smaller ones: [one for Tailwind CSS (PostCSS)](https://github.com/babichjacob/sapper-postcss-template), and [another for TypeScript and GraphQL](https://github.com/babichjacob/sapper-typescript-graphql-template). 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](https://svelte.dev/blog/whats-the-deal-with-sveltekit).

Once you are prepared to migrate, check out the [Svelte Adders](https://github.com/babichjacob/svelte-adders) project for information about how to recreate this project base's functionality. You should specifically look at [svelte-add-firebase-hosting](https://github.com/babichjacob/svelte-add-firebase-hosting), [svelte-add-tailwindcss](https://github.com/babichjacob/svelte-add-tailwindcss), and [svelte-add-graphql](https://github.com/babichjacob/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
```sh
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](https://github.com/babichjacob/sapper-firebase-typescript-graphql-tailwindcss-actions-template).

### ⬇️ 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.

```sh
cd sapper-firebase-typescript-graphql-tailwindcss-actions-template
npm install  # pnpm also works
```

## 🛠 Usage

### 🧪 Development
```sh
npm run dev
```

### 🔥 Deployment to Firebase
This will create a production build for you before deploying.
```sh
npm run deploy
```

### 🔨 Testing Production Builds Locally
This probably pairs well with [Firebase Emulators](https://firebase.google.com/docs/rules/emulator-setup).
```sh
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](https://firebase.google.com/support/faq#expandable-15), but you can stay on the Spark Plan for a free and fast (no cold starts!) static site:
```sh
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:

```sh
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](https://console.firebase.google.com/)) ID.

For automatic building and deployment to work, you need to generate [a CI login token from Firebase](https://firebase.google.com/docs/cli#cli-ci-systems):
```sh
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](https://web.dev/app-shortcuts/#define-app-shortcuts-in-the-web-app-manifest). Once you change `theme_color`, update the `meta name="theme-color"` tag in `src/template.html` to match.

The [Apple touch icon](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html), 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](https://blog.teamtreehouse.com/introduction-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)
1. Remove all Tailwind imports in the `src/global.pcss` file
2. Remove these lines in `postcss.config.js`:
    1. ```js
       const tailwindcss = require("tailwindcss");
       ```
    3. ```js
       const tailwindcssConfig = require("./tailwind.config");
       ```
    3. ```js
       tailwindcss(tailwindcssConfig),
       ```
3. Delete the `tailwind.config.js` file
4. Uninstall the `tailwindcss` package

### 🕸 Optionally removing the GraphQL server
1. Remove these lines in `src/server.ts`:
    1. ```ts
       import { createApolloServer } from "./graphql";
       ```
    2. ```ts
       const apolloServer = await createApolloServer();
       ```
    3. ```ts
       apolloServer.applyMiddleware({ app, path: graphqlPath });
       ```

2. Remove the now-useless `graphqlPath` parameter to `createSapperAndApolloServer` in `src/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

3. Delete the `src/graphql` folder

4. Uninstall the `apollo-server-express`, `bufferutil`, `class-validator`, `graphql`, `reflect-metadata`, `type-graphql`, and `utf-8-validate` packages

5. Remove the now-error-causing
   ```yaml
   - 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](https://github.com/babichjacob/sapper-typescript-graphql-template/issues/new) and I'll try to help.

## 😡 Fix! There is something that needs improvement
[Create an issue](https://github.com/babichjacob/sapper-typescript-graphql-template/issues/new) or [pull request](https://github.com/babichjacob/sapper-typescript-graphql-template/pulls) 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](https://github.com/kefranabg/readme-md-generator)_