Setting Up the Development Environment

This document will provide detailed instructions on how to set up your development environment, including the installation of prerequisite software and dependencies, as well as how to start the server.

Prerequisites

Before you start working with the Next.js SaaS Starter Kit, ensure that you have the following software installed on your machine:

1. VSCode (or any other IDE of your choice)

If you have not already, please install Visual Studio Code (VSCode) (opens in a new tab) on your machine. If you prefer to use a different integrated development environment (IDE), you can use that. Within the SaaS World documentation, we will be showing steps and examples in VSCode. However, you can follow along with any other IDE of your choice.

2. Node.js and npm

Node.js is a JavaScript runtime that is necessary for running Next.js applications. npm (Node Package Manager) is included with Node.js and is used to manage project dependencies.

Installation:
- Visit the Node.js website (opens in a new tab) and download the latest LTS (Long Term Support) version.
- Follow the installation instructions for your operating system.
- Verify the installation by running the following commands in your terminal:
```
node -v
npm -v
```

3. Git

Git is a version control system that allows you to manage your project code and collaborate with others.

Installation:
- Visit the Git website (opens in a new tab) and download the appropriate installer for your operating system.
- Follow the installation instructions.
- Verify the installation by running the following command in your terminal:
```
git --version
```

Cloning the Repository

Once you have the prerequisites installed, you can clone the Next.js SaaS Starter Kit repository to your local machine.

Open your terminal.
Navigate to the directory where you want to clone the repository.

Run the following command:

git clone https://github.com/saas-world/saasworld_starter_kit.git

Navigate into the project directory:
```
cd saasworld_starter_kit
```

Installing Dependencies

Next, you need to install the project dependencies using npm.

Ensure you are in the project directory.
Run the following command to install all required dependencies:
```
npm install
```

Adding environment Variables

The SaaS World Starter Kit will require environment variables for configuration. Create a .env file in the root of your project and add the necessary variables. Replace the placeholder values with your configurations.

Env variables for Clerk and Stripe integration

The following secrets and public keys will be required by the app to be able to communicate with these services.

# Clerk env variables
CLERK_SECRET_KEY=<your_clerk_secret_key>
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<your_clerk_publishable_key>

# Stripe env variables
STRIPE_SECRET_KEY=<your_stripe_secret_key>
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=<your_stripe_publishable_key>
STRIPE_WEBHOOK_SECRET=<your_stripe_webhook_secret>

Generally, when you're in the app development phase, it is recommended to use the secrets and keys from Test Mode in Clerk and Stripe.

Env variables for local database

The following environment variable will be required to point to a local SQLite database for development purposes.

DATABASE_URL="file:/tmp/dev.db"

If you would like to use a different database for development or production, you can point DATABASE_URL to that database, as long as, it is compatible with Prisma ORM. Refer to Prisma Docs (opens in a new tab) for more information.

Initializing the database

For this section, we are going to make use of the npx (part of npm CLI) package executor to migrate our database using the included schema.prisma file.

In the root of the repository, run the following commands. You will have to run these commands when first setting up the project development environment, as well as, everytime you make a change to the database schema.

Format the prisma file

npx prisma format

Map your data model to the database schema

npx prisma migrate dev

Ensure Prisma Client is up-to-date

npx prisma generate

Start prisma studio (Optional - for dev purposes)

npx prisma studio

Starting the Development Server

After installing the dependencies, setting up environment variables and the database, you can start the development server.

Run the following command in a new terminal:
```
npm run dev
```
Open your web browser and navigate to http://localhost:3000 (opens in a new tab) to see your application in action.

Additional Commands

The below are some additional commands that you can use when you want to build the app, run the production server or execute tests that you may add in the future. However, you don't need to run these at the moment for local development.

Build the application:
```
npm run build
```
Run the production server:
```
npm run start
```
Run tests:
```
npm test
```

Troubleshooting

If you encounter any issues during the setup process, here are a few common solutions:

Dependencies not installed: Ensure you are in the correct project directory and run npm install again.
Environment variables not set: Double-check your .env.local file for any typos or missing variables.
Port already in use: If port 3000 is already in use, you can specify a different port when starting the server:
```
PORT=3001 npm run dev
```

Conclusion

By following these steps, you should have your development environment set up and your SaaS World Starter Kit application running locally. If you encounter any issues or have questions, feel free to reach out to us at support@saasworld.org. Happy coding!

Step 2 - Set up Clerk & Stripe services Project name, logo and other fields