Initializing the Project

This is just a document to remind me how I created this project.

We will use Create T3 App to create the scaffolding for our application.

Run the command npm create t3-app@latest and select typescript. Give your project a name and then press a to select all 4 dependencies.

Create a new github repo and then run the following commands to push the code to the repo:

git add .
git commit -m "initial commit"
git remote add origin https://github.com/<username>/<repo-name>.git
git branch -M main
git push -u origin main

We now want to deploy our app to vercel, but we first have to set up our database.

Database Urls

For development we will use a local Postgres database and for production we will use an Amazon RDS database. Make sure to make your AWS database publicly accessible. You may also have to edit inbound rules and allow all traffic from all ips so that vercel can access it.

In the .env file of your code include the local database url with the following information:

Once you have your url set up, go to the schema.prisma file and change the provider to postgresql:

datasource db {
    provider = "postgresql"
    url      = env("DATABASE_URL")
}

Also uncomment the @db.Text in the Account model.

Now go to vercel and import your github repo. Then add the connection url of your AWS database as an environment variable.

Setting up Nexauth

We are not yet ready to deploy because next auth isn't set up.
Create t3 app automatically configures sign-in with discord, but I would rather use sign in with google so I will get that set up.

Get your credentials by following these steps:

Make sure to add localhost and your vercel url to authorized urls.

Once you have your client ID and Secret, add them to your .env file like this:

GOOGLE_CLIENT_ID="*******"
GOOGLE_CLIENT_SECRET="******"

Next, navigate to the server directory and open the auth.ts file. Replace the discord provider with the Google Provider.

  // auth.ts
  providers: [
    GoogleProvider({
      clientId: env.GOOGLE_CLIENT_ID,
      clientSecret: env.GOOGLE_CLIENT_SECRET,
    }),
  ],

You might be getting a type error so go to the env.mjs file in the src directory and replace discord with google in two locations.

  GOOGLE_CLIENT_ID: z.string(),
  GOOGLE_CLIENT_SECRET: z.string(),

and

const processEnv = {
  DATABASE_URL: process.env.DATABASE_URL,
  NODE_ENV: process.env.NODE_ENV,
  NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
  NEXTAUTH_URL: process.env.NEXTAUTH_URL,
  GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
  GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET,
};

You can now start your server with npm run dev and you should be able to sign in with google. Make sure to use one of the users that you defined as a test user earlier.

Deploying to Vercel

We want to deploy our project as early as possible so that if there are any problems they are much easier to spot than later down the line.

Now that we have all of our Next-auth environment variables set up we need to push our code to the repo and add the environment variables in vercel.

Go to the vercel site and try logging in, it should work.

Now you can start building up your website with all of this stuff configured.