Follow the instructions in this section to run the app locally.
Start by copying the .env.example
file to .env
.
cd backend
cp .env.example .env
Then, fill in the MONGO_URL
field in .env
with your MongoDB connection string and fill in the PORT
field with the port you want to use. After that, you're .env
file should look like this. If you don't want to use MongoDB Atlas, you can also run a local MongoDB server with Docker. You can find the instructions here.
PORT=8000
MONGO_URL="mongodb+srv://<username>:<password>@<cluster>.example.mongodb.net/?retryWrites=true&w=majority"
Start by copying the .env.example
file to .env
.
cd frontend
cp .env.example .env
Then, fill in the VITE_API_URL
field in .env
with the url of your backend server. After that, you're .env
file should look like this. Note that the port should be the same as the one you set in the backend .env
file.
VITE_API_URL="http://localhost:8000/api"
cd backend
yarn dev
cd frontend
yarn dev
Visit http://localhost:5173
to see the app in action. That's it, you're done! If you want to set up the whole project from scratch, you can follow the instructions below.
The setup process is very similar to the one in the previous project. However, please keep in mind that we use different configuration files this time, frontend configuration is also different from that of backend, this may effect your homework grade. The required plugins can be found in package.json
, if you can't run the linter or formatter, make sure you have all of the plugins installed correctly.
The lint
script is required in homeworks, please add these lines in your package.json
.
{
...
"scripts": {
"lint": "eslint src",
"format": "prettier --write src"
}
...
}
yarn create vite
will create a new directory, which is the frontend
directory, for you with everything set up. You'll need to answer a few questions to set up the project. If you don't understand some of them, don't worry, just follow the suggestions listed below. You'll (hopefully) understand all these questions as the course progresses.
$ cd frontend
$ yarn create vite
yarn create v1.22.19
[1/4] π Resolving packages...
[2/4] π Fetching packages...
[3/4] π Linking dependencies...
[4/4] π¨ Building fresh packages...
success Installed "create-vite@4.4.1" with binaries:
- create-vite
- cva
? Project name: βΊ vite-project # type `frontend` here
? Select a framework: βΊ - Use arrow-keys. Return to submit.
Vanilla
Vue
β― React # choose React
Preact
Lit
Svelte
Solid
Qwik
Others
? Select a variant: βΊ - Use arrow-keys. Return to submit.
β― TypeScript # choose TypeScript
TypeScript + SWC
JavaScript
JavaScript + SWC
That's it, you're done. You can now start the dev server by running yarn dev
.
mkdir backend
cd backend
yarn init -y
yarn add express cors mongoose dotenv body-parser
yarn add -D ts-node typescript @types/cors @types/node @types/express
-D
flag means that the package is a dev dependency. It is only used during development and not in production.
Then we create a tsconfig.json
file
yarn tsc --init
We want to use the types defined in the lib
folder. To make our lives easier, we can add the following line to tsconfig.json
. Now we can import from @lib/*
instead of ../../../lib/*
.
{
"compilerOptions": {
...
"@lib/*": ["../lib/*"],
...
}
}
mkdir src
touch src/index.ts
"scripts": {
"dev": "nodemon src/index.ts",
"start": "ts-node src/index.ts",
"lint": "eslint src",
"format": "prettier --write src"
}
- request body
no body
- response
[
{
"id": "a4d603bc-5fcf-4f0d-9765-5430ac8e2602",
"title": "Card 1",
"description": "This is card 1",
"list_id": "d31df21d-e9ad-4b18-998a-564614599aa2"
},
{
"id": "a4d603bc-5fcf-4f0d-9765-5430ac8e2602",
"title": "Card 2",
"description": "This is card 2",
"list_id": "d31df21d-e9ad-4b18-998a-564614599aa2"
}
]
- request body
no body
- response
{
"id": "a4d603bc-5fcf-4f0d-9765-5430ac8e2602",
"title": "Card 1",
"description": "This is card 1",
"list_id": "d31df21d-e9ad-4b18-998a-564614599aa2"
}
- requst body
{
"title": "Card 1",
"description": "This is card 1",
"list_id": "d31df21d-e9ad-4b18-998a-564614599aa2"
}
- response
{
"id": "a4d603bc-5fcf-4f0d-9765-5430ac8e2602"
}
- requst body
{
"title": "Card 1",
"description": "This is card 1",
"list_id": "d31df21d-e9ad-4b18-998a-564614599aa2"
}
- response
OK
- request body
no body
- response
OK
- request body
no body
- response
[
{
"id": "d31df21d-e9ad-4b18-998a-564614599aa2",
"name": "List 1"
}
]
- request body
no body
- response
{
"id": "d31df21d-e9ad-4b18-998a-564614599aa2",
"name": "List 1",
"cards": [
{
"id": "a4d603bc-5fcf-4f0d-9765-5430ac8e2602",
"title": "Card 1",
"description": "This is card 1",
"list_id": "d31df21d-e9ad-4b18-998a-564614599aa2"
}
]
}
- requst body
{
"name": "List 1"
}
- response
{
"id": "d31df21d-e9ad-4b18-998a-564614599aa2"
}
- requst body
{
"name": "List 1"
}
- response
OK
- request body
no body
- response
OK