usagizmo / webapp-template Goto Github PK

View Code? Open in Web Editor NEW

107.0 2.0 11.0 5.62 MB

SvelteKit x Tailwind CSS x Supabase x Turborepo (pnpm)

Home Page: https://webapp-template.usagizmo.com

License: MIT License

JavaScript 14.70% Shell 0.87% PLpgSQL 7.30% CSS 1.69% HTML 21.81% Svelte 39.29% TypeScript 14.34%

typescript eslint graphql husky prettier tailwindcss lint-staged github-actions hasura pnpm

webapp-template's Introduction

WebApp Template

Monorepo template for creating a web application.

Caution

Currently, svelte-hmr, @markuplint, and prettier-plugin-svelte do not support Svelte 5. We have overridden pnpm-lock.yaml to forcibly upgrade to Svelte 5, which may cause issues during package updates. When updating dependencies, please refer to #6a5906 to correct pnpm-lock.yaml.

What's inside?

Uses

Turborepo x pnpm
Prettier (w/ prettier-plugin-svelte + prettier-plugin-tailwindcss)
ESLint / CSpell
lint-staged / husky
GitHub Actions (Linting + Testing (Validate href and src paths))
Execute eslint --fix and prettier when saving with VS Code

Apps and Packages

`apps/`

backend
A Supabase Local Dev / CLI.
mockup [Demo]
A starting point for building a static site.
Tailwind CSS + Vanilla JS + Vitest (Check links + file names)
web [Demo]
A starting point for building Svelte application.
SvelteKit (w/ Tailwind CSS)
Supabase / Vitest

`packages/`

eslint-config
ESLint 9 (flat) configuration for JavaScript and TypeScript. eslint-plugin-svelte + eslint-config-prettier

VS Code Extensions (Recommend)

Breaking changes

v2.0.0

Update Framework/Library Versions:
- Switch to Svelte 5 (integrated with TypeScript and using the Rune)
- Update to Tailwind CSS 4 (removed tailwind.config.js)
- Upgrade to ESLint 9 and implement Flat Config
Backend Change:
- Replace Nhost with Supabase for backend services

v1.9.0

Language and Compiler Changes:
- Migrated codebase from JavaScript to TypeScript
- Upgraded from Svelte 4 to Svelte 5 (Rune)
Package Naming and Structure:
- Custom package names now prefixed with @repo/
- Merged eslint-config-custom-typescript into eslint-config-custom

v1.6.0

Language Reversion and Documentation:
- Reverted codebase from TypeScript back to JavaScript, supplementing with JSDoc for documentation

v1.0.0

Frontend Framework Change:
- Switched from Next.js to SvelteKit for the frontend framework in apps/web
Repository Rebranding:
- Renamed nextjs-template repository to webapp-template

v0.23.0

Backend Services Integration:
- Replaced individual Firebase and Hasura applications with a unified Nhost application in apps/nhost

Commands

pnpm i  # Resolve dependency packages and prepare .env files
# Then set up /.env

pnpm build   # Build all apps and packages
pnpm dev     # Set up file monitoring builds and local servers for development
pnpm lint    # markuplint + eslint + prettier --check
pnpm test    # Testing
pnpm format  # eslint --fix + prettier --write + format project-words.txt

List of listening port numbers

apps/backend/ - Supabase Local Dev / CLI
- 54321: API / GraphQL / S3 Storage
- 54322: DB (Postgres)
- 54323: Studio
- 54324: Inbucket
apps/web/ - SvelteKit application
- 5173: Development server
apps/mockup/ - Static site
- 8000: BrowserSync server
- 49160: Express server

Registering environment variables for GitHub / Vercel

If you need to prepare GitHub / Vercel environment, you need to set all environment variables (.env items) in each service.

webapp-template's People

Contributors

Stargazers

Watchers

Forkers

danielacorner drosi94 shzawa jasonhiew chiol czq297297 memoriaxii ifeelbalanced timc3 israeldcastro sszne

webapp-template's Issues

Replace Firebase and Hasura Cloud with Nhost

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

chore(deps): update dependency houdini to v1.2.2
chore(deps): update dependency houdini-svelte to v1.2.2
chore(deps): update dependency lint-staged to v13.2.2
chore(deps): update dependency prettier to v2.8.8
chore(deps): update dependency storybook to v7.0.7
fix(deps): update dependency js-cookie to v3.0.5
chore(deps): update dependency eslint to v8.39.0
chore(deps): lock file maintenance

Detected dependencies

github-actions

.github/workflows/main.yml

actions/checkout v3

pnpm/action-setup v2.2.4

actions/setup-node v3

npm

apps/mockup/package.json

browser-sync ^2.29.1

image-size ^1.0.2

tailwindcss ^3.3.1

vitest ^0.30.1

apps/nhost/package.json

apps/story/package.json

svelte ^3.58.0

@storybook/addon-essentials ^7.0.6

@storybook/addon-interactions ^7.0.6

@storybook/addon-links ^7.0.6

@storybook/blocks ^7.0.6

@storybook/svelte ^7.0.6

@storybook/svelte-vite ^7.0.6

@storybook/testing-library ^0.1.0

@sveltejs/vite-plugin-svelte ^2.0.4

react ^18.2.0

react-dom ^18.2.0

storybook ^7.0.6

tailwindcss ^3.3.1

typescript ^5.0.4

vite ^4.3.1

apps/web/package.json

@nhost/nhost-js ^2.2.1

graphql ^16.6.0

graphql-ws ^5.12.1

js-cookie ^3.0.1

luxon ^3.3.0

@sveltejs/adapter-auto ^2.0.0

@sveltejs/kit ^1.15.7

@types/js-cookie ^3.0.3

@types/luxon ^3.3.0

autoprefixer ^10.4.14

graphql ^16.0.0

graphqurl ^1.0.1

houdini ^1.2.0

houdini-svelte ^1.2.0

postcss ^8.4.23

svelte ^3.58.0

svelte-check ^3.2.0

svelte-preprocess ^5.0.3

tailwindcss ^3.3.1

tslib ^2.5.0

typescript ^5.0.4

vite ^4.3.1

vitest ^0.30.1

package.json

@markuplint/svelte-parser ^3.6.1

concurrently ^8.0.1

cspell ^6.31.1

eslint ^8.38.0

husky ^8.0.3

lint-staged ^13.2.1

markuplint ^3.8.0

prettier ^2.8.7

prettier-plugin-svelte ^2.10.0

prettier-plugin-tailwindcss ^0.2.7

turbo ^1.9.3

pnpm 8.3.1

packages/eslint-config-custom/package.json

@typescript-eslint/eslint-plugin ^5.59.0

@typescript-eslint/parser ^5.59.0

eslint-config-prettier ^8.8.0

eslint-config-turbo ^1.9.3

eslint-plugin-import ^2.27.5

eslint-plugin-svelte3 ^4.0.0

eslint-plugin-unused-imports ^2.0.0

typescript ^5.0.4

packages/tailwind-preset-base/package.json

@tailwindcss/typography ^0.5.9

tailwindcss ^3.3.1

packages/ui/package.json

svelte ^3.58.0

Check this box to trigger a request for Renovate to run again on this repository

HASURA Key not found

I can't seem to find where this error is coming from. When I run the application I'm able to register a user where the meta is stored in firebase and the user information is then stored through HASURA. It seems though I'm still getting an error when trying to fetch articles and I cannot figure out why.

[next-auth][error][JWT_SESSION_ERROR]
https://next-auth.js.org/errors#jwt_session_error x-hasura-admin-secret/x-hasura-access-key required, but not found
message: 'x-hasura-admin-secret/x-hasura-access-key required, but not found',
stack: 'Error: x-hasura-admin-secret/x-hasura-access-key required, but not found\n' +
' at eval (webpack-internal:///(api)/../../packages/generated/dist/graphql-api.ts:29:19)\n' +
' at runMicrotasks (<anonymous>)\n' +
' at processTicksAndRejections (node:internal/process/task_queues:96:5)

I have the following variables in my ENV

HASURA_GRAPHQL_ENDPOINT=
HASURA_GRAPHQL_ADMIN_SECRET=
HASURA_GRAPHQL_API_PATHS_GRAPHQL=
HASURA_GRAPHQL_JWT_SECRET=
HASURA_GRAPHQL_UNAUTHORIZED_ROLE=