Fullstack Course: Next.js + Strapi + Docker + Postgres

1. ติดตั้งเครื่องมือ เช่น Docker Desktop, Node.JS, VSCode, Git
VS Code Extension
- Color Picker
- Material Icon Theme
- ES7 React/Redux/GraphQL/React-Native snippet
- html to JSX
- Prettier - Code formatter
- Docker
- Rainbow Brackets 2
- Auto Import
- One Dark Pro

การตั้งค่า Workspace บน VS Code ด้วยโฟลเดอร์ .vscode

.vscode/extensions.json

{
 "recommendations": [
   "anseki.vscode-color",
   "pkief.material-icon-theme",
   "rodrigovallades.es7-react-js-snippets",
   "riazxrazor.html-to-jsx",
   "esbenp.prettier-vscode",
   "ms-azuretools.vscode-docker",
   "tejasvi.rainbow-brackets-2",
   "steoates.autoimport",
   "zhuangtongfa.material-theme"
 ]
}

.vscode/settings.json

{
  "emmet.syntaxProfiles": {
    "javascript": "jsx"
  },

  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },

  "emmet.showAbbreviationSuggestions": true,
  "emmet.showExpandedAbbreviation": "always"
}

Additional: GitHub Account

2. สร้าง Workshop โปรเจ็กต์ React 18 ด้วย Vite ทำงานบน Docker Container

VITE

สร้างโปรเจคค # Vite requires Node.js version 18+, 20+

npm create vite@latest

yarn create vite

pnpm create vite

Vite Shortcut

# npm 6.x
npm create vite@latest my-react-app --template react

# npm 7+, extra double-dash is needed:
npm create vite@latest my-react-app -- --template react

# yarn
yarn create vite my-react-app --template react

# pnpm
pnpm create vite my-react-app --template react

Docker Desktop
- Windows / Mac / Linux

Docker

สร้างไฟล์ Dockerfile

# Pull the base image
FROM node:18.16.0-alpine
# Set the working directory
WORKDIR /usr/app
# Copy app dependencies to container
COPY ./package*.json ./
# Install dependencies
RUN npm install
# Copy code from host to container
COPY . .
# Expose Port
EXPOSE 5173
# Deploy app for local development
CMD [ "npm","run","dev" ]

Docker Compose

สร้างไฟล์ docker-compose.yml

version: '3.9'
# Network
networks:
    web_network:
        name: reactdockervite
        driver: bridge

services:
# React App Service
    reactapp:
        build:
            context: .
            dockerfile: Dockerfile
        container_name: reactapp_vite
        restart: always
        volumes:
            - ./:/usr/app
            - /usr/app/node_modules
        ports:
            - 5173:5173
        environment:
            - CHOKIDAR_USEPOLLING=true
        networks:
            - web_network

Docker Command

Description	Command
Check valid docker-compose file	`docker-compose config -q`
Create Container	`docker-compose up -d`
Remove Container	`docker-compose down --rmi all`
Follow Logs in container	`docker-compose logs -f [service_name]`
List Container Status	`docker-compose ps`
Stop/Start Container	`docker-compose stop/start`
Restart Container	`docker-compose restart`
Exec to container	`docker exec -it [container_name] sh`

3. ใช้ React ออกแบบ UI ด้วย material UI(MUI))

Installation

ติดตั้ง MUI

npm

npm install @mui/material @emotion/react @emotion/styled

yarn

yarn add @mui/material @emotion/react @emotion/styled

pnpm

pnpm add @mui/material @emotion/react @emotion/styled

ติดตั้ง Sass

npm install sass -D
npm install sass -D

สร้างไฟล์ Style.scss

.myStyle {
color: teal;
font-size: 30px;
border:2px solid #61dafb;
border-radius: 10px;
padding: 10px;
text-align: left;
}

เรียกใช้งาน Style.scss

import React from "react";
import "./Style.scss";
function App() {
  return (
    <div>
      <p>
        คนจะเจ้าชู้ต้องดูที่อะไร <br />
        คนจะหลายใจต้องดูอะไรบ้างหนา
        <br />
        ดูที่รอยยิ้มหรือดูที่ใบหน้า
        <br />
        ดูที่ดวงตาหรือดูที่อะไร
      </p>
    </div>
  );
}

4. สร้าง Workshop Rest API ด้วย Strapi CMS V.4

ติดตั้ง Strapi

npm

npx create-strapi-app@latest my-project --quickstart

yarn

yarn create strapi-app my-project --quickstart

pnpm

pnpm create strapi-app my-project --quickstart

ลงทะเบียนผู้ดูแลระบบรายแรก

jakkph / nextjs-docker-strapi-postgres

Fullstack Course: Next.js + Strapi + Docker + Postgres

Installation

About

Languages