Merge pull request #203 from devforth/next

Next

Author: ivictbor

adminforth/documentation/blog/2024-10-01-ai-blog/index.md

@@ -40,14 +40,16 @@ nvm use 20
 ## Step 1: Create a new AdminForth project
 
 ```bash
-mkdir ai-blog
-cd ai-blog
-npm init -y
-npm i adminforth @adminforth/upload @adminforth/rich-editor @adminforth/chat-gpt \
- express slugify http-proxy @types/express typescript tsx @types/node -D
-npx --yes tsc --init --module NodeNext --target ESNext
+npx adminforth create-app ai-blog
 ```
 
+Add modules:
+
+```bash
+npm i @adminforth/upload @adminforth/rich-editor @adminforth/text-complete
+```
+
+
 ## Step 2: Prepare environment
 
 ### OpenAI
@@ -95,24 +97,35 @@ Go to bucket settings, Permissions, Object ownership and select "ACLs Enabled" a
 6. Go to Security credentials and create a new access key. Save `Access key ID` and `Secret access key`.
 
 
-### Create .env file in project directory
+### Edit .env file in project directory
 
 Create `.env` file with the following content:
 
 ```bash title=".env"
-DATABASE_URL=file:./db/db.sqlite
-ADMINFORTH_SECRET=<some random string>
 OPENAI_API_KEY=...
 AWS_ACCESS_KEY_ID=your_access_key_id
 AWS_SECRET_ACCESS_KEY=your_secret_access_key
+```
+
+Edit `.env.local` file and add:
+
+```bash title=".env.local"
+AWS_S3_BUCKET=my-ai-blog-bucket
+AWS_S3_REGION=us-east-1
+```
+
+In same way edit `.env.prod` file and add:
+
+```bash title=".env.prod"
 AWS_S3_BUCKET=my-ai-blog-bucket
 AWS_S3_REGION=us-east-1
 ```
 
 
-## Step 3: Initialize database
 
-Create `./schema.prisma` and put next content there:
+## Step 3: Add prisma models
+
+Open `./schema.prisma` and put next content there:
 
 
 ```yaml title="./schema.prisma" 
@@ -122,78 +135,85 @@ generator client {
 
 datasource db {
   provider = "sqlite"
-  url      = env("DATABASE_URL")
+  url      = env("PRISMA_DATABASE_URL")
 }
 
-model User {
-  id           String     @id
-  createdAt    DateTime 
-  email        String   @unique
+model adminuser {
+  id            String     @id
+  email         String     @unique
+  password_hash String
+  role          String
+  created_at    DateTime
+//diff-add
   avatar       String?
-  publicName   String?
-  passwordHash String
+//diff-add
+  public_name  String?
+//diff-add
   posts        Post[]
 }
 
+//diff-add
 model Post {
+//diff-add
   id          String     @id
+//diff-add
   createdAt   DateTime 
+//diff-add
   title       String
+//diff-add
   slug        String
+//diff-add
   picture     String?
+//diff-add
   content     String
+//diff-add
   published   Boolean  
+//diff-add
   author      User?    @relation(fields: [authorId], references: [id])
+//diff-add
   authorId    String?
+//diff-add
   contentImages ContentImage[]
+//diff-add
 }
 
+//diff-add
 model ContentImage {
+//diff-add
   id         String     @id
+//diff-add
   createdAt  DateTime 
+//diff-add
   img        String
+//diff-add
   postId     String
+//diff-add
   resourceId String
+//diff-add
   post       Post      @relation(fields: [postId], references: [id])
+//diff-add
 }
 ```
 
-Create database using `prisma migrate`:
+Create a migration:
 
 ```bash
-npx -y prisma migrate dev --name init
+npm run makemigration -- --name add-posts
 ```
 
-> in future if you will need to update schema, you can run `npx prisma migrate dev --name <name>` where `<name>` is a name of migration.
 
 ## Step 4: Setting up AdminForth
 
 
-Open `package.json`, set `type` to `module` and add `start` script:
 
-```json title="./package.json"
-{
-  ...
-//diff-add
-  "type": "module",
-  "scripts": {
-    ...
-//diff-add
-    "start": "NODE_ENV=development tsx watch --env-file=.env index.ts",
-//diff-add
-    "startLive": "NODE_ENV=production APP_PORT=80 tsx index.ts"
-  },
-}
-```
-
-Create `index.ts` file in root directory with following content:
+Open `index.ts` file in root directory and update it with the following content:
 
 ```ts title="./index.ts"
 import express from 'express';
 import AdminForth, { Filters, Sorts } from 'adminforth';
-import userResource from './res/user.js';
-import postResource from './res/posts.js';
-import contentImageResource from './res/content-image.js';
+import userResource from './resources/user.js';
+import postResource from './resources/posts.js';
+import contentImageResource from './resources/content-image.js';
 import httpProxy from 'http-proxy';
 
 declare var process : {
@@ -264,11 +284,8 @@ if (import.meta.url === `file://${process.argv[1]}`) {
   app.use(express.json());
   const port = 3500;
 
-  // needed to compile SPA. Call it here or from a build script e.g. in Docker build time to reduce downtime
-  if (process.env.NODE_ENV === 'development') {
-    await admin.bundleNow({ hotReload: true });
-  }
-  console.log('Bundling AdminForth done. For faster serving consider calling bundleNow() from a build script.');
+  await admin.bundleNow({ hotReload: process.env.NODE_ENV === 'development' });
+  console.log('Bundling AdminForth SPA done.');
 
   // api to server recent posts
   app.get('/api/posts', async (req, res) => {
@@ -325,11 +342,11 @@ if (import.meta.url === `file://${process.argv[1]}`) {
 }
 ```
 
-## Step 5: Create resources
+## Step 5: Edit resources
 
-Create `res` folder. Create `./res/adminuser.ts` file with following content:
+Open `./resources/adminuser.ts` file with following content:
 
-```ts title="./res/adminuser.ts"
+```ts title="./resources/adminuser.ts"
 import AdminForth, { AdminForthDataTypes } from 'adminforth';
 import { randomUUID } from 'crypto';
 import UploadPlugin from '@adminforth/upload';
@@ -439,7 +456,7 @@ export default {
 
 Create `posts.ts` file in res directory with following content:
 
-```ts title="./res/post.ts"
+```ts title="./resources/post.ts"
 import { AdminUser, AdminForthDataTypes } from 'adminforth';
 import { randomUUID } from 'crypto';
 import UploadPlugin from '@adminforth/upload';
@@ -588,7 +605,7 @@ export default {
 
 Also create `content-image.ts` file in `res` directory with following content:
 
-```ts title="./res/content-image.ts"
+```ts title="./resources/content-image.ts"
 
 import { AdminForthDataTypes } from 'adminforth';
 import { randomUUID } from 'crypto';
@@ -650,7 +667,7 @@ export default {
 Now you can start your admin panel:
 
 ```bash
-npm start
+npm run dev
 ```
 
 Open `http://localhost:3500/admin` in your browser and login with `[email protected]` and `adminforth` credentials.
@@ -660,8 +677,8 @@ Set up your avatar (you can generate it with AI) and public name in user setting
 
 ## Step 5: Create Nuxt project
 
-
-Now let's initialize our seo-facing frontend:
+Now let's initialize our seo-facing frontend.
+In the root directory of your admin app (`ai-blog`) and create a new folder `seo` and run:
 
 ```bash
 npx nuxi@latest init seo
@@ -921,28 +938,19 @@ Go to `http://localhost:3500/admin` to add new posts.
 
 ## Step 6: Deploy
 
-We will dockerize app to make it easy to deploy with many ways. We will wrap both Node.js adminforth app and Nuxt.js app into single container for simplicity using supervisor. However you can split them into two containers and deploy them separately e.g. using docker compose. 
+We will use Docker to make it easy to deploy with many ways. We will wrap both Node.js adminforth app and Nuxt.js app into single container for simplicity using supervisor. However you can split them into two containers and deploy them separately e.g. using docker compose. 
 
 Please note that in this demo example we routing requests to Nuxt.js app from AdminForth app using http-proxy. 
 While this will work fine, it might give slower serving then if you would route traffik using dedicated reverse proxies like traefik or nginx.
 
 
-### Dockerize in single container
-
-Create `bundleNow.ts` file in root project directory:
+### Dockerize AdminForth and Nuxt in single container
 
-```ts title="./bundleNow.ts"
-import { admin } from './index.js';
-
-await admin.bundleNow({ hotReload: false});
-console.log('Bundling AdminForth done.');
-```
 
-
-Create `Dockerfile` in root project directory:
+Open `Dockerfile` in root project directory (`ai-blog`) and put in the following content:
 
 ```dockerfile title="./Dockerfile"
-FROM node:20-alpine
+FROM node:20-slim
 EXPOSE 3500
 WORKDIR /app
 RUN apk add --no-cache supervisor
@@ -952,15 +960,15 @@ COPY seo/package.json seo/package-lock.json seo/
 RUN cd seo && npm ci
 COPY . .
 
-RUN npx tsx bundleNow.ts
+RUN npx adminforth bundle
 RUN cd seo && npm run build
 
 RUN cat > /etc/supervisord.conf <<EOF
 [supervisord]
 nodaemon=true
 
 [program:app]
-command=npm run startLive
+command=npm run prod
 directory=/app
 autostart=true
 autorestart=true
@@ -976,7 +984,7 @@ stdout_logfile=/dev/stdout
 stderr_logfile=/dev/stderr
 
 [program:prisma]
-command=npx --yes prisma migrate deploy
+command=npm run migrate:prod
 directory=/app
 autostart=true
 stdout_logfile=/dev/stdout
@@ -987,7 +995,7 @@ EOF
 CMD ["supervisord", "-c", "/etc/supervisord.conf"]
 ```
 
-Create `.dockerignore` file in root project directory:
+Open `.dockerignore` file in root project directory (`ai-blog`) and put in the following content:
 
 ```bash title=".dockerignore"
 .env
@@ -1005,7 +1013,8 @@ terraform*
 Build and run your docker container locally:
 
 ```bash
-sudo docker run -p80:3500 -v ./prodDb:/app/db --env-file .env -it $(docker build -q .)
+sudo docker build -t my-ai-blog .
+sudo docker run -p80:3500 -v ./prodDb:/app/db --env-file .env -it --name my-ai-blog -d my-ai-blog
 ```
 
 Now you can open `http://localhost` in your browser and see your blog.
@@ -1138,13 +1147,35 @@ resource "aws_instance" "docker_instance" {
     systemctl start docker
     systemctl enable docker
     usermod -a -G docker ec2-user
+
+    echo "done" > /home/ec2-user/user-data-done
   EOF
 
   tags = {
     Name = "my-ai-blog-instance"
   }
 }
 
+resource "null_resource" "wait_for_user_data" {
+  provisioner "remote-exec" {
+    inline = [
+      "echo 'Waiting for EC2 software install to finish...'",
+      "while [ ! -f /home/ec2-user/user-data-done ]; do sleep 2; done",
+      "echo 'EC2 software install finished.'"
+    ]
+
+    connection {
+      type        = "ssh"
+      user        = "ubuntu"
+      private_key = file("~/.ssh/id_rsa")
+      host        = aws_instance.docker_instance.public_ip
+    }
+  }
+
+  depends_on = [aws_instance.app_instance]
+}
+
+
 resource "null_resource" "build_image" {
   provisioner "local-exec" {
     command = "docker build -t blogapp . && docker save blogapp:latest -o blogapp_image.tar"
@@ -1155,7 +1186,7 @@ resource "null_resource" "build_image" {
 }
 
 resource "null_resource" "remote_commands" {
-  depends_on = [aws_instance.docker_instance, null_resource.build_image]
+  depends_on = [null_resource.wait_for_user_data, null_resource.build_image]
 
   triggers = {
     always_run = timestamp()
@@ -1188,8 +1219,6 @@ resource "null_resource" "remote_commands" {
 
   provisioner "remote-exec" {
     inline = [
-      "while ! command -v docker &> /dev/null; do echo 'Waiting for Docker to be installed...'; sleep 1; done",
-      "while ! sudo docker info &> /dev/null; do echo 'Waiting for Docker to start...'; sleep 1; done",
       "sudo docker system prune -af",
       "docker load -i /home/ec2-user/blogapp_image.tar",
       "sudo docker rm -f blogapp || true",