00:00:00 Intro
00:02:29 Demo
00:04:54 Setup
Download and install Node from https://nodejs.org/en/
node -v
v18.12.1
00:11:26 ChatGPT Frontend
- Create client using Vite
npm create vite@latest client --template vanilla
# select framework=Vanilla
# select variant = JavaScript
cd client
npm install
npm run dev
copy assets*.svg, style.css
create index.html
create script.js
to replace main.js
00:25:58 Create server to call OpenAI API
mkdir server
cd server
npm init -y # create package.json
npm install cors dotenv express nodemon openai
create server.js
npm run server
00:50:57 Deployment
- At GitHub, create a repo called
codex
- go to
client/server
parent folder locally
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/<userid>/codex.git
Add and ensure .gitignore
file having .env
and node_modules
listed
git status # .env and node_modules are not listed
git push -u origin main
Render is a unified cloud to build and run all your apps and websites with free TLS certificates, a global CDN, DDoS protection, private networks, and auto deploys from Git
-
select github
codex
repo -
make sure to get server endpoint URL
Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration
- make sure to update fetch URL with deployed
render
URL inscript.js
and push to github.
Launch your development career with project-based coaching - https://www.jsmastery.pro
- JS mastery
- Filmpire Movie React app