Next.Js Example

Simple TODO app using the Next.js React framework.

March 10th, 2023

Simple TODO app using the Next.js React framework.'s picture

About:

Simple TODO app using the Next.js React framework.

This application is meant to be some kind of boilerplate for me to learn about the various tools used in web development.

Technologies Used:

README.md:

nstallation and Build

Install nvm (https://github.com/nvm-sh/nvm/blob/master/README.md)

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

Install node

nvm install v16.12.0

Install npm modules

npm install --production

Build

npm run build

Run the built application in production mode

npm start

Development

Start development server:

$ npm run dev

The application is accessible at http://localhost:3000.

Linting

$ npm run lint

Run integration (e2e) tests (macOS)

Start podman VM:

$ podman machine start

Build container image using the Containerfile in folder postgresql:

$ podman build -t postgresdb:latest .

Run test PostgreSQL database container:

$ podman run -d --rm --name postgres -p 15432:5432/tcp postgresdb:latest

Initialize database with Prisma

$ npx prisma db push

Troubleshooting the database (from host)

$ psql -h localhost -p 15432 -U testuser -d testdb

Build on different versions of Node.js locally (example)

$ nvm ls $ nvm use v16.14.2 $ npm ci $ npm run build --if-present

Deployment

  • Environment variables to configure:
    • DATABASE_URL=postgresql://<username>:<password>@<database server URL>:5432/<database name>
    • NEXTAUTH_URL=https://example.com/api/auth
    • GITHUB_ID
    • GITHUB_SECRET
    • NEXTAUTH_SECRET that can be generated using $ openssl rand -base64 32
    • CORS_ALLOWED_ORIGIN to set the HTTP header Access-Control-Allow-Origin to something else than *

Share this:

Nedx ยฉ 2023