Sure, here's a quick overview of the steps for more experienced users:
- Clone the Project: Clone the project repository from GitHub.
- Install Extensions: Install any extensions that you'd like to use for this project.
- Enable Prettier Formatting: Enable Prettier formatting in your code editor.
- Set Up Environment Variables: Create a copy of the
.env.example
file and rename it to.env
. Fill in the necessary environment variables, includingNEXTAUTH_SECRET
andNEXTAUTH_URL
. - Set Up Local PostgreSQL Database: Install PostgreSQL and create a new database for the project.
- Link Database to Project: Update the
DATABASE_URL
in the.env
file with your database connection string. - Start the Local Server: Run
npm run dev
in the terminal to start the local development server.
Please refer to the detailed steps below if you need more information on any of these steps.
First, you need to clone the project repository from GitHub. You can do this by running the following command in your terminal:
git clone <repository_url>
Replace <repository_url>
with the URL of our GitHub repository.
Next, install any extensions that you'd like to use for this project, I've added some extensions as recommended for the tools we're using here, it is optional to install any but they could be helpful depending on what you're working on.
For formatting however, you would need to install the Prettier extension. To enable Prettier formatting in VS Code, open the settings (File > Preferences > Settings), search for "Prettier", and make sure "Editor: Format On Save" is checked. This will automatically format your code whenever you save a file.
We force this to have a consistent code style across the project, to avoid any merge conflicts due to formatting and avoid any unnecessary changes to the codebase when simply saving a file later on down the line.
If you don't like it you can always suggest something else, or disable it and work on your own style, however, before any branch can be merged into main, it should be formatted properly to match the rest of the codebase.
If you're disabling it, you can run the following command to format the codebase before pushing your changes to GitHub, this will format all files in the project that are not ignored by .prettierignore
:
npm run format
Create an exact copy of the .env.example
file in the project root directory and rename it to .env
. This file will contain all the environment variables needed for your local setup.
For NextAuth, you need to set up two environment variables: NEXTAUTH_SECRET
and NEXTAUTH_URL
.
This is a secret used to encrypt session data. You can generate a new secret on the command line with the following command:
openssl rand -base64 32
Copy the output and set it as the value of NEXTAUTH_SECRET
in the .env
file:
NEXTAUTH_SECRET="<your-secret>"
Replace <your-secret>
with the secret you generated.
This is the base URL of your site. For local development, this will be http://localhost:3000
. Set it as the value of NEXTAUTH_URL
in the .env
file:
NEXTAUTH_URL="http://localhost:3000"
First, you need to install PostgreSQL (or psql) on your machine. If you don't have it installed, you can follow the detailed steps in this guide.
Once you've installed PostgreSQL, you can create a new database for the project. Open your terminal and run the following commands:
# Sign in using username "postgres" or whatever you named it
psql -U postgres
# Create a local database "mydatabase" (name whatever)
CREATE DATABASE mydatabase;
Replace mydatabase
with the name you want to give to your database.
To find your user, host, or port, you can run the following command:
\conninfo
The result should look something like this:
You are connected to database "postgres" as user "postgres" on host "localhost" (address "::1") at port "5432".
Next, you need to link your local PostgreSQL database to the project. Open the .env
file you created earlier and find the line that starts with DATABASE_URL
. Replace the value with your database connection string in the following format:
DATABASE_URL="postgresql://<username>:<password>@localhost:5432/<database-name>"
Replace <username>
, <password>
, and <database-name>
with your PostgreSQL username, password, and database name, respectively.
Now, you're all set with the database setup!
Finally, you can start the local server by running the following command in the terminal:
npm run dev
This will start the local development server. You can now open your browser and navigate to http://localhost:3000
to see the project running.
Since this project is a boilerplate provided by the T3 Stack, there's already a lot of quick and to the point documetation on their website
If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our Discord and ask for help.
To learn more about the T3 Stack, take a look at the following resources:
- Documentation
- Learn the T3 Stack — Check out these awesome tutorials
You can check out the create-t3-app GitHub repository — your feedback and contributions are welcome!
Follow our deployment guides for Vercel, Netlify and Docker for more information.