DEV Community: CodeForStartUp

[4][DEV NOTE] NextJS server actions and Prisma

CodeForStartUp — Mon, 04 Sep 2023 02:36:52 +0000

Server actions

React Hook Form

Create

Get

Update

Delete

[3][DEV NOTE] Create a form with tiptap and react-textarea-autosize

CodeForStartUp — Mon, 04 Sep 2023 02:04:18 +0000

This is dev note for this project: turbo - nextjs - prisma - postgres blog

Target of this part:

Integrate shadcn-ui
Minor update for postcss and tailwindcss
Create a form with react-textarea-autosize and tiptap

Install

Integrate `shadcn-ui`

shadcn-ui is one of the most famous UI libraries now. So that I decide to integrate with my project.
Just a simple command we can integrate shadcn as follow:

cd app/web
npx shadcn-ui@latest init

After initial shadcn-ui, we can see a lot of changes as this commit: Initial shadcn-ui
.
These are some important changes:

tailwind.config.js and globals.css are overrided
folded @/ is added

Install `react-textarea-autosize` and `tiptap`

In the root folder, we will install: react-textarea-autosize, and tip-tap as follow:

pnpm add react-textarea-autosize --filter web
pnpm add @tiptap/extension-character-count @tiptap/extension-highlight @tiptap/extension-placeholder @tiptap/extension-task-item @tiptap/extension-task-list @tiptap/pm @tiptap/react @tiptap/starter-kit --filter web

I aslo will use remixicon for icons:

pnpm add remixicon --filter web

Update post-css and tailwindcss

PostCss for build-time imports and postcss-nesting for nested declarations:

pnpm add -D postcss-nesting postcss-import

Add Input title with `react-textarea-autosize`

apps/web/@/molecules/InputTitle.tsx

"use client";

import TextareaAutosize from "react-textarea-autosize";

type InputTitleProps = {
  title?: string;
  placeholder?: string;
};

const InputTitle: React.FunctionComponent<InputTitleProps> = ({
  title = "",
  placeholder = "",
}) => {
  return (
    <div className="w-full">
      <TextareaAutosize
        autoFocus
        value={title}
        placeholder={placeholder}
        className="w-full h-16 px-3 py-2 text-4xl font-bold text-gray-700 border-none placeholder-gray-500 border border-gray-300 rounded-md focus:outline-none"
      />
    </div>
  );
};

export default InputTitle;

Add `tiptap` to nextjs

To integrate tip to nextjs we need to have many step, you can refer in apps/web/@/molecules/Editor folder,

apps/web/@/molecules/Editor/index.tsx

"use client";

import React from "react";

import CharacterCount from "@tiptap/extension-character-count";
import { EditorContent, useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Placeholder from "@tiptap/extension-placeholder";

import "./index.css";
import MenuBar from "./MenuBar";

type EditorProps = {
  content?: string;
  placeholder?: string;
};

export default ({ content = "", placeholder = "" }: EditorProps) => {
  const editor = useEditor({
    extensions: [
      StarterKit,
      CharacterCount.configure({
        limit: 10000,
      }),
      Placeholder.configure({
        placeholder,
      }),
    ],
    content,
  });

  return (
    <div className="w-full editor p-3 h-full">
      {editor && <MenuBar editor={editor} />}
      <EditorContent editor={editor} />
    </div>
  );
};

Create post page

apps/web/app/user/post/create/page.tsx

"use client";

import React from "react";

import CharacterCount from "@tiptap/extension-character-count";
import { EditorContent, useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Placeholder from "@tiptap/extension-placeholder";

import "./index.css";
import MenuBar from "./MenuBar";

type EditorProps = {
  content?: string;
  placeholder?: string;
};

export default ({ content = "", placeholder = "" }: EditorProps) => {
  const editor = useEditor({
    extensions: [
      StarterKit,
      CharacterCount.configure({
        limit: 10000,
      }),
      Placeholder.configure({
        placeholder,
      }),
    ],
    content,
  });

  return (
    <div className="w-full editor p-3 h-full">
      {editor && <MenuBar editor={editor} />}
      <EditorContent editor={editor} />
    </div>
  );
};

Reference:

[1] Tiptap: I follow this example collaborative-editing
[2] react-textarea-autosize: Quite simple, just follow the example here
[3] Post css preprocessor

You can find the result in this PR: [feat][UI] Create post page

[2][DEV NOTE] Integrate prisma and postgres database

CodeForStartUp — Tue, 22 Aug 2023 14:33:04 +0000

This is dev note for this project: turbo - nextjs - prisma - postgres blog

[1][DEV NOTE] Initial turbo project and add tailwindcss library

Add prisma by add new database package
Docker postgres database
Import and use database package inside web app

1. Environment

In this project, I will use postgres database. I used docker to install postgres database on my local machine as follow:
Create docker-compose.yml in the root folder:

# Use postgres/example user/password credentials
version: "3.1"

services:
  db:
    image: postgres
    restart: always
    environment:
      POSTGRES_PASSWORD: example
    ports:
      - 5432:5432

  adminer:
    image: adminer
    restart: always
    ports:
      - 8080:8080

It's including postgres database and adminer.

In the next sections, I mainly follow this tutorial: Using Prisma with Turborepo

So that you can skip this part :]]]

Create `database` package

Create packages/database/package.json:

{
  "name": "database",
  "version": "0.0.0",
  "dependencies": {
    "@prisma/client": "latest"
  },
  "devDependencies": {
    "prisma": "latest"
  },
  "scripts": {
    "db:generate": "prisma generate",
    "db:push": "prisma db push --skip-generate"
  },
  "main": "./index.ts",
  "types": "./index.ts"
}

Create packages/database/index.ts:

export * from "@prisma/client";

Create packages/database/prisma/schema.prisma:

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

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

model Post {
  id        Int      @id @default(autoincrement())
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  title     String   @db.VarChar(255)
  content   String?
  published Boolean  @default(false)
  author    User     @relation(fields: [authorId], references: [id])
  authorId  Int
}

model Profile {
  id     Int     @id @default(autoincrement())
  bio    String?
  user   User    @relation(fields: [userId], references: [id])
  userId Int     @unique
}

model User {
  id      Int      @id @default(autoincrement())
  email   String   @unique
  name    String?
  posts   Post[]
  profile Profile?
}

Create packages/database/.gitignore:

node_modules
# Keep environment variables out of version control
.env

Important: You need to update the DATABASE_URL variable in your .env file example.

Run prisma init

cd to database package

cd packages/database

After that, it will generate these files:

packages/database/.gitignore
packages/database/prisma/schema.prisma
packages/database/.env

Add database's scripts to turbo.json

{
  "$schema": "https://turbo.build/schema.json",
  "globalDependencies": ["**/.env.*local"],
  "pipeline": {
    "build": {
      "dependsOn": ["^db:generate", "^build"],
      "outputs": [".next/**", "!.next/cache/**"]
    },
    "lint": {},
    "dev": {
      "dependsOn": ["^db:generate"],
      "cache": false,
      "persistent": true
    },
    "db:generate": {
      "cache": false
    },
    "db:push": {
      "cache": false
    },
    "db:migrate": {
      "cache": false
    }
  }
}

Then we can migrate the database as follow

turbo db:migrate -- --name init

After run this command line, prisma will generate a migration.sql file and create a database in the postgres.

Install `packages/database` into `web` app

Like part 1, we can install packages/database into web app by:

pnpm add --save-dev database@workspace --fitler web

At this time, we installed prisma and configured database packaged successfully.
Now we continue to next part: Read/Write data with prisma

Finally

Now, you can import and use Prisma in the web app:

Example:

import { PrismaClient } from "database";

export default async function Page() {
  const prisma = new PrismaClient();

  const allPosts = await prisma.post.findMany();

  return (
    <div className="h-full flex justify-center items-center">
      <h1 className="text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-pink-400 to-red-600">
        CODE FOR STARTUP.
      </h1>

      {allPosts.map((post) => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

Next part, I will implement the creating and listing posts with Prisma.

Reference

[1] Mainly on this tutorial: Using Prisma with Turborepo
[2] Prisma getting started

[1][DEV NOTE] Initial turbo project and add tailwindcss library

CodeForStartUp — Tue, 22 Aug 2023 12:58:17 +0000

This is dev note for this project: turbo - nextjs - prisma - postgres blog

Prepare environments

ENV: node v16.20.1
In this project, I use pnpm. So that we need to install pnpm by:

npm install pnpm -g

Init project

Firstly, we need to create project by this command:
pnpm dlx create-turbo@lasted

Enter project name: "codeforstartup"

Start project

turbo dev

Add `tailwindcss`

Add `tailwind-config` package

Under packages folder, create tailwind-config folder.
Under tailwind-config folder create: File packages/tailwind-config/package.json

{
  "name": "tailwind-config",
  "version": "0.0.0",
  "private": true,
  "main": "index.js",
  "devDependencies": {
    "tailwindcss": "^3.2.4"
  }
}

File packages/tailwind-config/tailwind.config.js

const colors = require("tailwindcss/colors");

module.exports = {
    content: [
        // app content
        "./app/**/*.{js,ts,jsx,tsx}"
        // include packages if not transpiling
        // "../../packages/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};

Nice. You added tailwind-config successfully. Now we need to install it by:
pnpm install

Install `tailwindcss` and `tailwind-config` for web app

To config tailwindcss for web app, we need to install following package:
pnpm add tailwindcss postcss autoprefixer --filter web

To install tailwind-config package for web, we can use this command:
pnpm add --save-dev tailwind-config@workspace --filter web

Create apps/web/postcss.config.js:

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

Create apps/web/tailwind.config.js:

const sharedConfig = require("tailwind-config/tailwind.config.js");

module.exports = {
    presets: [sharedConfig],
};

Create apps/web/app/global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

In the apps/web/app/layout.tsx, import this line:

import "./global.css";

Now, we install tailwind css successfully for turbo project.

Reference

[1] For more detail, you can referent this Pull request: [feat] Add tailwind css package
[2] Turbo official example
[3] Create new turbo project
[4] Install package for turbo project

DEV Community: CodeForStartUp

[4][DEV NOTE] NextJS server actions and Prisma

React Hook Form

Create

Get

Update

Delete

[3][DEV NOTE] Create a form with tiptap and react-textarea-autosize

Install

Integrate shadcn-ui

Install react-textarea-autosize and tiptap

Update post-css and tailwindcss

Add Input title with react-textarea-autosize

Add tiptap to nextjs

Create post page

Reference:

[2][DEV NOTE] Integrate prisma and postgres database

1. Environment

Create database package

Run prisma init

Add database's scripts to turbo.json

Install packages/database into web app

Finally

Reference

[1][DEV NOTE] Initial turbo project and add tailwindcss library

Prepare environments

Init project

Start project

Add tailwindcss

Add tailwind-config package

Install tailwindcss and tailwind-config for web app

Reference

Integrate `shadcn-ui`

Install `react-textarea-autosize` and `tiptap`

Add Input title with `react-textarea-autosize`

Add `tiptap` to nextjs

Create `database` package

Install `packages/database` into `web` app

Add `tailwindcss`

Add `tailwind-config` package

Install `tailwindcss` and `tailwind-config` for web app