mirror of
https://github.com/supabase/supabase.git
synced 2026-10-07 18:35:07 +03:00
138 lines
3.9 KiB
Plaintext
138 lines
3.9 KiB
Plaintext
import Layout from '~/layouts/DefaultGuideLayout'
|
|
import StepHikeCompact from '~/components/StepHikeCompact'
|
|
|
|
export const meta = {
|
|
title: 'Install Supabase with Create React App',
|
|
subtitle: 'Setting up supabase-js client library in a Create React App project.',
|
|
breadcrumb: 'Framework Quickstarts',
|
|
}
|
|
|
|
The fastest way to get started with supabase and create-react-app is to use the supabase-js client library, which provides a convenient interface for working with supabase from a React app. To use supabase-js with create-react-app, you can follow these steps:
|
|
|
|
<StepHikeCompact>
|
|
|
|
<StepHikeCompact.Step step={1}>
|
|
|
|
<StepHikeCompact.Details title="Install Create Next App">
|
|
|
|
To create a new Create React App project, you will first need to ensure that you have the Create React App CLI installed on your machine. You can do this by running the following command:
|
|
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
|
|
```bash Terminal
|
|
npm install -g create-react-app
|
|
```
|
|
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={2}>
|
|
<StepHikeCompact.Details title="Create create-react-app app">
|
|
|
|
Once you have the CLI installed, you can create a new React project by running the following command, replacing my-app with the name you want to give your project:
|
|
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
|
|
```bash Terminal
|
|
create-react-app my-app
|
|
```
|
|
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={3}>
|
|
<StepHikeCompact.Details title="Start your app">
|
|
|
|
This will create a new directory with the name you specified, and scaffold a new React project inside it. You can then navigate to the new project directory and start the dev server by running the following commands:
|
|
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
|
|
```bash Terminal
|
|
cd my-app
|
|
npm start
|
|
```
|
|
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={4}>
|
|
<StepHikeCompact.Details title="Install Supabase client library">
|
|
|
|
To install the `@supabase/supabase-js` package, you will need to run the following command:
|
|
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
|
|
```bash Terminal
|
|
npm install @supabase/supabase-js
|
|
```
|
|
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={5}>
|
|
<StepHikeCompact.Details title="Create some sample data">
|
|
|
|
To create a table of countries with their timezones, you will first need to create a table in your Supabase database using SQL. You can use the following SQL statement to create a table called countries:
|
|
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
|
|
```sql SQL_EDITOR
|
|
-- this creates the table
|
|
CREATE TABLE countries (
|
|
id SERIAL PRIMARY KEY,
|
|
name VARCHAR(255) NOT NULL
|
|
);
|
|
-- insert some sample data into new table
|
|
INSERT INTO countries (name) VALUES ('United States');
|
|
INSERT INTO countries (name) VALUES ('Canada');
|
|
INSERT INTO countries (name) VALUES ('Mexico');
|
|
````
|
|
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={6}>
|
|
<StepHikeCompact.Details title="Create client in app">
|
|
|
|
You can select from the countries table in your Supabase server by doing the following:
|
|
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
|
|
```js src/index.js
|
|
import { createClient } from '@supabase-js'
|
|
|
|
const supabase = createClient('https://<username>.<project>.supabase.co', '<your-anon-key>')
|
|
|
|
async function getCountries() {
|
|
const countries = await supabase.from('countries').select('*')
|
|
console.log(countries)
|
|
}
|
|
```
|
|
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
</StepHikeCompact>
|
|
|
|
export const Page = ({ children }) => <Layout meta={meta} children={children} />
|
|
|
|
export default Page
|