B2B-88: fix README and add package manager restriction
This commit is contained in:
@@ -9,7 +9,6 @@
|
||||
|
||||
## Project Structure
|
||||
```
|
||||
/apps/web/
|
||||
/app
|
||||
/home # protected routes
|
||||
/(user) # user workspace
|
||||
|
||||
133
README.md
133
README.md
@@ -1,104 +1,47 @@
|
||||
<a href="https://demo-nextjs-with-supabase.vercel.app/">
|
||||
<img alt="Next.js and Supabase Starter Kit - the fastest way to build apps with Next.js and Supabase" src="https://demo-nextjs-with-supabase.vercel.app/opengraph-image.png">
|
||||
<h1 align="center">Next.js and Supabase Starter Kit</h1>
|
||||
</a>
|
||||
|
||||
<p align="center">
|
||||
The fastest way to build apps with Next.js and Supabase
|
||||
</p>
|
||||
## Prerequisites
|
||||
"node": ">=20.0.0",
|
||||
"pnpm": ">=9.0.0"
|
||||
|
||||
<p align="center">
|
||||
<a href="#features"><strong>Features</strong></a> ·
|
||||
<a href="#demo"><strong>Demo</strong></a> ·
|
||||
<a href="#deploy-to-vercel"><strong>Deploy to Vercel</strong></a> ·
|
||||
<a href="#clone-and-run-locally"><strong>Clone and run locally</strong></a> ·
|
||||
<a href="#feedback-and-issues"><strong>Feedback and issues</strong></a>
|
||||
<a href="#more-supabase-examples"><strong>More Examples</strong></a>
|
||||
</p>
|
||||
<br/>
|
||||
## Project structure
|
||||
```
|
||||
/ app - pages
|
||||
/ components - custom components, helper components that not provided by any package. Place to extend an redefine components from packages
|
||||
/ config - bunch of configs, that are provided by starter kit.
|
||||
/ content - (temporary?) - to be removed when cleaned all dependencies
|
||||
/ fonts - (temporary) - contains fonts, should be relocated to another place (maybe public)
|
||||
/ lib - diffirent libs, services, utils
|
||||
- fonts.ts - project fonts setup, which becomes available as a global css variable
|
||||
/ i18n - translations/localization setup
|
||||
/ public - public assets
|
||||
/ locales - translations under a corresponding local - at a specific namespace
|
||||
/ styles - all styles of the projects, including tailwind variable setup
|
||||
- global.css - Global styles for the entire application, a place where should apply variables to global selectors
|
||||
- shadcn-ui.css - A place where all global variables are defined for color, sizes and etc, that are used in theme.css. Variables defined here and in theme.css are available as tailwindcss property-class
|
||||
- theme.css - more specific variables, available as tailwindcss property-class
|
||||
- makerkit.css - Makerkit-specific global styles
|
||||
- markdoc.css - Styles for Markdoc Markdown files.
|
||||
-
|
||||
/ supabase - primary supabase
|
||||
/ supabase copy - (temporary) a folder from starter with bunch of settings for database and emailing, that should be migrated to the primary supabase to enable some functionality like mfa, super-admin and etc. After it is done, the folder will be removed
|
||||
/ tooling - a workspace package, used for generation packages in node_modules and provides global links for its data. The most important is typescript config
|
||||
/ utils
|
||||
|
||||
## Features
|
||||
|
||||
- Works across the entire [Next.js](https://nextjs.org) stack
|
||||
- App Router
|
||||
- Pages Router
|
||||
- Middleware
|
||||
- Client
|
||||
- Server
|
||||
- It just works!
|
||||
- supabase-ssr. A package to configure Supabase Auth to use cookies
|
||||
- Styling with [Tailwind CSS](https://tailwindcss.com)
|
||||
- Components with [shadcn/ui](https://ui.shadcn.com/)
|
||||
- Optional deployment with [Supabase Vercel Integration and Vercel deploy](#deploy-your-own)
|
||||
- Environment variables automatically assigned to Vercel project
|
||||
```
|
||||
|
||||
## Demo
|
||||
|
||||
You can view a fully working demo at [demo-nextjs-with-supabase.vercel.app](https://demo-nextjs-with-supabase.vercel.app/).
|
||||
## Migration from old structure
|
||||
```bash
|
||||
pnpm clean
|
||||
pnpm i
|
||||
```
|
||||
|
||||
## Deploy to Vercel
|
||||
## Adding new dependency
|
||||
|
||||
Vercel deployment will guide you through creating a Supabase account and project.
|
||||
```bash
|
||||
pnpm add <pacakge-name> -w
|
||||
```
|
||||
|
||||
After installation of the Supabase integration, all relevant environment variables will be assigned to the project so the deployment is fully functioning.
|
||||
|
||||
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fwith-supabase&project-name=nextjs-with-supabase&repository-name=nextjs-with-supabase&demo-title=nextjs-with-supabase&demo-description=This+starter+configures+Supabase+Auth+to+use+cookies%2C+making+the+user%27s+session+available+throughout+the+entire+Next.js+app+-+Client+Components%2C+Server+Components%2C+Route+Handlers%2C+Server+Actions+and+Middleware.&demo-url=https%3A%2F%2Fdemo-nextjs-with-supabase.vercel.app%2F&external-id=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fwith-supabase&demo-image=https%3A%2F%2Fdemo-nextjs-with-supabase.vercel.app%2Fopengraph-image.png)
|
||||
|
||||
The above will also clone the Starter kit to your GitHub, you can clone that locally and develop locally.
|
||||
|
||||
If you wish to just develop locally and not deploy to Vercel, [follow the steps below](#clone-and-run-locally).
|
||||
|
||||
## Clone and run locally
|
||||
|
||||
1. You'll first need a Supabase project which can be made [via the Supabase dashboard](https://database.new)
|
||||
|
||||
2. Create a Next.js app using the Supabase Starter template npx command
|
||||
|
||||
```bash
|
||||
npx create-next-app --example with-supabase with-supabase-app
|
||||
```
|
||||
|
||||
```bash
|
||||
yarn create next-app --example with-supabase with-supabase-app
|
||||
```
|
||||
|
||||
```bash
|
||||
pnpm create next-app --example with-supabase with-supabase-app
|
||||
```
|
||||
|
||||
3. Use `cd` to change into the app's directory
|
||||
|
||||
```bash
|
||||
cd with-supabase-app
|
||||
```
|
||||
|
||||
4. Rename `.env.example` to `.env.local` and update the following:
|
||||
|
||||
```
|
||||
NEXT_PUBLIC_SUPABASE_URL=[INSERT SUPABASE PROJECT URL]
|
||||
NEXT_PUBLIC_SUPABASE_ANON_KEY=[INSERT SUPABASE PROJECT API ANON KEY]
|
||||
```
|
||||
|
||||
Both `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_ANON_KEY` can be found in [your Supabase project's API settings](https://app.supabase.com/project/_/settings/api)
|
||||
|
||||
5. You can now run the Next.js local development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
The starter kit should now be running on [localhost:3000](http://localhost:3000/).
|
||||
|
||||
6. This template comes with the default shadcn/ui style initialized. If you instead want other ui.shadcn styles, delete `components.json` and [re-install shadcn/ui](https://ui.shadcn.com/docs/installation/next)
|
||||
|
||||
> Check out [the docs for Local Development](https://supabase.com/docs/guides/getting-started/local-development) to also run Supabase locally.
|
||||
|
||||
## Feedback and issues
|
||||
|
||||
Please file feedback and issues over on the [Supabase GitHub org](https://github.com/supabase/supabase/issues/new/choose).
|
||||
|
||||
## More Supabase examples
|
||||
|
||||
- [Next.js Subscription Payments Starter](https://github.com/vercel/nextjs-subscription-payments)
|
||||
- [Cookie-based Auth and the Next.js 13 App Router (free course)](https://youtube.com/playlist?list=PL5S4mPUpp4OtMhpnp93EFSo42iQ40XjbF)
|
||||
- [Supabase Auth and the Next.js App Router](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs)
|
||||
## Supabase
|
||||
TODO
|
||||
@@ -102,5 +102,9 @@
|
||||
"last 1 versions",
|
||||
"> 0.7%",
|
||||
"not dead"
|
||||
]
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=20.0.0",
|
||||
"pnpm": ">=9.0.0"
|
||||
}
|
||||
}
|
||||
@@ -8,7 +8,6 @@
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
|
||||
--font-sans: var(--font-sans) -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
--font-heading: var(--font-heading);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user