Fullstack Development

261497: Fullstack Development

Preflight project - frontend

Github Repo

261497: Fullstack Development

Frontend framework

Tool that enables you to develop the frontend of your applications

Why?

  • You don’t have to everything code from scratch.
  • You can collaborate with others more easily.
261497: Fullstack Development

Frontend JS framework

261497: Fullstack Development

Frontend tooling

  • Code bundler ("build tools")
  • Development server
    • Hot module replacement (HMR)
261497: Fullstack Development

Frontend tooling

  • Vite
  • Webpack
  • Parcel
  • Rollup
261497: Fullstack Development

Setup

  • React
    • pnpm create vite@latest (Follow the instruction)
  • Additional libraries
    • pnpm i dayjs axios @picocss/pico
261497: Fullstack Development

Files

261497: Fullstack Development

Minimal example

  • ./src/App.ts (Link)
  • Start dev
    • npm run dev
261497: Fullstack Development

Full example

  • ./src/App.ts (Link)
  • Build
    • npm run build
  • Preview
    • npm run preview
261497: Fullstack Development

Why reverse proxy?

  • No need to expose your backend to the internet.
  • No issues with CORS and cookies.
261497: Fullstack Development

Without reverse proxy

261497: Fullstack Development

Wtih reverse proxy

261497: Fullstack Development

Containerization

261497: Fullstack Development

261497: Fullstack Development

Steps

  • 💾 Make ./.env.test from ./.env.test.example (Link)
  • 💾 ./Dockerfile (Link)
  • 💾 ./.dockerignore (Link)
  • 💾 ./nginx.conf.template (Link) (Why)
  • 💾 ./docker-compose.yml (Link)
  • ⌨️ docker compose --env-file ./.env.test up -d --force-recreate --build
261497: Fullstack Development

261497: Fullstack Development

Push to Dockerhub

  • Create an account at https://hub.docker.com.
  • Create repository called preflight-frontend.
  • Tag image
    • ⌨️ docker tag preflight-frontend [DOCKERHUB_ACCOUNT]/preflight-frontend:latest
  • Login (if you have not done so)
    • ⌨️ docker login -u [DOCKERHUB_ACCOUNT]
  • Push image
    • ⌨️ docker push [DOCKERHUB_ACCOUNT]/preflight-frontend:latest
261497: Fullstack Development