When we run the stack of a Makerkit application, we will need to run a few commands before:
- Next.js: First, we need to run the Next.js development server
- Supabase: We need to run the Supabase local environment using Docker
- Stripe CLI (optional): If you plan on interacting with Stripe, you are also required to run the Stripe CLI, which allows us to test the webhooks from Stripe against our local server.
Running the Next.js development server
Run the following command from your IDE or from your terminal:
npm run dev
This command will start the Next.js server at localhost:3000. If you navigate to this page, you should be able to see the landing page of your application:
Running the Supabase Local environment
To run the Supabase local environment, we need to first run Docker. Then, open a new terminal (or, better, from your IDE) and run the following command:s
npm run supabase:start
If everything is working correctly, you will see the output below:
> supabase start
Applying migration 20221215192558_schema.sql...
Seeding data supabase/seed.sql...
Started supabase local development setup.
API URL: http://localhost:54321
DB URL: postgresql://postgres:postgres@localhost:54322/postgres
Studio URL: http://localhost:54323
Inbucket URL: http://localhost:54324
JWT secret: super-secret-jwt-token-with-at-least-32-characters-long
anon key: ****************************************************
service_role key: ****************************************************
Now, we need to copy the anon key and service_role key values and add
them to the .env.local file:
NEXT_PUBLIC_SUPABASE_ANON_KEY=****************************************************
SUPABASE_SERVICE_ROLE_KEY=****************************************************
When you need to stop the development environment, you can run the following command:
npm run supabase:stop
Supabase Studio UI
To access the Supabase Studio UI, open a new tab in your browser and navigate to http://localhost:54323.
Makerkit's template adds some data to your project by default for testing reasons. In fact, the data you see is used to run the Cypress E2E tests. This is why you'll see some pre-populated data in your project.
Running the Stripe CLI (optional)
Optionally, if you want to run Stripe locally (e.g., sending webhooks to your local server), you will also need to run the following command:
npm run stripe:listen
This command requires Docker, but you can alternatively install Stripe on your OS and change the command to use stripe directly.
The above command runs the Stripe CLI and will route webhooks coming from Stripe to your local endpoint. For example, in the Makerkit starter, this endpoint is /resources/stripe/webhook.
When running the command, it will print a webhook key used to sign the messages from Stripe. You will need to add this key to your local environment variables file as below:
STRIPE_WEBHOOK_SECRET=<KEY>
The webhook printed should not change, so you may only need to do this the first time.
Signing In for the first time
You should now be able to sign in. To quickly get started, use the following credentials:
email = test@makerkit.dev
password = testingpassword
Email Confirmations
When signing up, Supabase sends an email confirmation to a testing account. You can access the InBucket testing emails using the following link, and can follow the links to complete the sign up process.