Setup for Next.js SaaS Dev in Local

Prerequisites

NGROK Setup

1. Create an NGROK account.
2. On the NGROK Dashboard (Cloud Edge > Domains), generate a new domain (the first one is free).
3. Run the following command to set up your domain:

   ngrok http --domain=your-personal-domain.ngrok-free.app 3000

4. Download and install NGROK on your local machine, and set it as an environment variable.
5. Verify the installation by running the NGROK command in the terminal.

Clerk Setup

1. Create a Clerk account.
2. Create an application (give it any relevant name).
3. Enable organization creation under Configure > Organization Settings.
4. Customize the session token under Configure > Sessions, click Edit, and set the value as:

   {"metadata": "{{user.public_metadata}}"}

5. Create a webhook under Configure > Webhooks.

6. Set the custom URL to:

   https://<Serverdomain>/en/api/clerk

   (This is the domain generated by NGROK.)

7. Subscribe to "Organization" and "User" events.
8. Temporary Super Admin Access needs to be granted as of now.

Enode Setup

1. Create an Enode account.
2. Create an organization.
3. Create a client on the Enode Dashboard. Set the client environment to Sandbox, and ensure the client and link UI names are the same.

SQL Setup

1. Download and install MySQL server.
2. Set up and start the server (create a user if it's new).
3. Create a database.

Code Setup

1. Install all dependencies:

   npm i

Setting Environment Variables

Set the following environment variables in your .env file:

• DATABASE_URLSet your local MySQL connection URL:

  mysql://host_name:host_password@localhost:port_number/db_name

• NEXT_PUBLIC_DEMO_MODESet to true.
• NEXT_PUBLIC_CLERK_WEBHOOK_SECRETCopy the Signing Secret from Clerk > Configure > Webhooks.
• NEXT_PUBLIC_ROOT_DOMAINCopy your NGROK domain (the text between --domain= and port_number).
• NEXT_PUBLIC_CLERK_PUBLISHABLE_KEYCopy from Clerk > Developers > API Keys.
• CLERK_SECRET_KEYCopy from Clerk > Developers > API Keys.
• ENODE_OAUTH_URLCopy from Enode Dashboard > client_name > Settings > API Credentials.
• ENODE_CLIENT_IDCopy from Enode Dashboard > client_name > Settings > API Credentials.
• ENODE_CLIENT_SECRETCopy from Enode Dashboard > client_name > Settings > API Credentials.

• ENODE_BASE_URLSet as:

  https://enode-api.sandbox.enode.io

• ENODE_VEHICLE_ADD_REDIRECT Set as:

  http://localhost:3000/en/home/vehicles

Starting the App (In Sequence)

1. Start NGROK Local Server

Open the terminal and run:

ngrok http --domain=your-personal-domain.ngrok-free.app 3000

2. Update the Local Database

1. Open the terminal in the app folder.
2. Install Prisma globally if necessary:

   npm i prisma -g

3. Populate the database:

   npx prisma migrate dev --name init

3. Set Environment Variables (Windows Only - If Required)

Open the terminal and set all environment variables from the .env file:

set variable_name=value

4. Start the App

Open the terminal and run:

npm run dev

Prisma Migration Guide

This guide outlines the steps to manage database migrations using Prisma in both development and production environments.

Development Environment

1. Set Up Your Development Environment

• Ensure that your development environment is set up with the appropriate database.
• Update your .env file to point to your development database.

2. Make Changes to Your Prisma Schema

• Edit the schema.prisma file to reflect any changes to your database schema.

3. Create a Migration

• Run the following command to create a new migration:

  npx prisma migrate dev --name descriptive_migration_name

• Replace descriptive_migration_name with a meaningful name that describes the changes.

4. Apply the Migration

• The above command will automatically apply the migration to your development database.

5. Generate Prisma Client

• After applying the migration, generate the Prisma Client to reflect the changes:npx prisma generate

  npx prisma generate

6. Test Your Application

• Test your application in the development environment to ensure everything works as expected.

Production Environment

1. Prepare Your Production Environment

• Ensure your production database is configured and accessible.
• Update your environment variables to point to the production database.

2. Create Migrations for Production

• First, create the migration files in your development environment using the same command as before:

 npx prisma migrate dev --name descriptive_migration_name

• This will generate the migration files in the prisma/migrations directory.

3. Apply Migrations in Production

• When you're ready to apply the migrations to your production database, run the following command:

 npx prisma generate

• This command will apply any pending migrations without creating new migration files.

4. Generate Prisma Client in Production

• After deploying the migrations, ensure the Prisma Client is up to date with:

npx prisma generate

5. Test in Production

• Test your application in the production environment to ensure everything is functioning correctly after the migration.

6. Backup Your Database (Optional but Recommended)

• Always consider backing up your production database before applying migrations to protect against any potential issues.

Transitioning from Development to Production

1. Develop and Test Locally : Make and test your changes in the development environment.
2. Create Migration Files : Use the migrate dev command to create migration files.
3. Deploy to Production : When ready, transition to production by using the migrate deploy command.
4. Generate Client : Ensure the Prisma Client is generated after deploying migrations.
5. Validate : Test your application in production to confirm that all features work as intended.

Notes:

• Make sure to replace descriptive_migration_name with appropriate names that describe the migration purpose.
• Adjust any environment variable configurations specific to your project as needed.
• You can add this section to your existing README file to help guide future contributors or yo </code></div>``</div></pre>