Basic Full Stack App

mkdir PROJECT_NAME
cd PROJECT_NAME

npm create vite@latest fe -- --template react-ts

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

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

npm install json-server --save-dev

{
  "posts": [
    { "id": "1", "title": "a title", "views": 100 },
    { "id": "2", "title": "another title", "views": 200 }
  ],
  "comments": [
    { "id": "1", "text": "a comment about post 1", "postId": "1" },
    { "id": "2", "text": "another comment about post 1", "postId": "1" }
  ],
  "profile": {
    "name": "typicode"
  }
}

{
  posts: [
    { id: "1", title: "a title", views: 100 },
    { id: "2", title: "another title", views: 200 },
  ],
  comments: [
    { id: "1", text: "a comment about post 1", postId: "1" },
    { id: "2", text: "another comment about post 1", postId: "1" },
  ],
  profile: {
    name: "typicode",
  },
}

"server": "json-server -p3001 --watch db.json"

npm run server

npm install axios

import axios from "axios";
const baseUrl = "http://localhost:3000/cards";

const getAll = () => {
  const request = axios.get(baseUrl);
  return request.then((response) => response.data);
};

// ...

export default { getAll, create, update };

npm init

{
  "name": "be",
  "version": "0.0.1",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "MY NAME",
  "license": "UNLICENSED",
  "description": ""
}

"start": "node index.js",

npm install express

const express = require("express");
const app = express();

app.use(express.json());

let cards = [];

app.get("/", (request, response) => {
  response.send("<h1>Hello World!</h1>");
});

app.get("/api/cards", (request, response) => {
  response.json(cards);
});

app.get("/api/cards/:id", (request, response) => {
  const id = request.params.id;
  const card = cards.find((card) => card.id === id);
  if (card) {
    response.json(card);
  } else {
    response.status(404).end();
  }
});

app.delete("/api/cards/:id", (request, response) => {
  const id = request.params.id;
  cards = cards.filter((card) => card.id !== id);
  response.status(204).end();
});

function generateId() {
  const maxId =
    cards.length > 0 ? Math.max(...cards.map((card) => +card.id)) : 0;
  return String(maxId + 1);
}

app.post("/api/cards", (request, response) => {
  const body = request.body;
  if (!body.front || !body.back) {
    return response.status(400).json({ error: "front or back missing" });
  }
  const card = {
    front: body.front,
    back: body.back,
    id: generateId(),
  };
  cards = cards.concat(card);
  response.json(card);
});

const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

npm install --save-dev nodemon

 "dev": "nodemon index.js",

### GET cards
GET http://localhost:3001/api/cards

### GET card
GET http://localhost:3001/api/cards/1

### DELETE card
DELETE http://localhost:3001/api/cards/1

### POST card
POST http://localhost:3001/api/cards/ HTTP/1.1
content-type: application/json
{
    "front": "what is 1 + 1",
    "back": "2"
}

npm install morgan

const morgan = require("morgan");

app.use(morgan("tiny"));

npm install cors

const cors = require("cors");

app.use(cors());

const baseUrl = "http://localhost:3001/api/cards";

fly auth login

fly launch --no-deploy

[build]

[env]
  PORT = "3000" # add this

fly deploy

fly apps open

app.use(express.static("dist"));

const baseUrl = "/api/notes";

"build:ui": "rm -rf dist && cd ../fe && npm run build && cp -r dist ../be",
"deploy": "fly deploy",
"deploy:full": "npm run build:ui && npm run deploy",
"logs:prod": "fly logs"

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:3001",
        changeOrigin: true,
      },
    },
  },
});