@ -6,7 +6,7 @@ The project was created with vite.js (vue3). Then I created a sub-directory call
The frontend code build into "dist" directory. The server (express.js) exposes the "dist" directory as root of the endpoint. This is how production is working.
The frontend code build into "dist" directory. The server (express.js) exposes the "dist" directory as root of the endpoint. This is how production is working.
# Key Technical Skills
## Key Technical Skills
- Node.js (You should know what are promise, async/await and arrow function etc.)
- Node.js (You should know what are promise, async/await and arrow function etc.)
- Socket.io
- Socket.io
@ -15,7 +15,7 @@ The frontend code build into "dist" directory. The server (express.js) exposes t
- Bootstrap
- Bootstrap
- SQLite
- SQLite
# Directories
## Directories
- data (App data)
- data (App data)
- dist (Frontend build)
- dist (Frontend build)
@ -25,41 +25,41 @@ The frontend code build into "dist" directory. The server (express.js) exposes t
- src (Frontend source code)
- src (Frontend source code)
- test (unit test)
- test (unit test)
# Can I create a pull request for Uptime Kuma?
## Can I create a pull request for Uptime Kuma?
Generally, if the pull request is working fine and it do not affect any existing logic, workflow and perfomance, I will merge into the master branch once it is tested.
Generally, if the pull request is working fine and it do not affect any existing logic, workflow and perfomance, I will merge into the master branch once it is tested.
If you are not sure, feel free to create an empty pull request draft first.
If you are not sure, feel free to create an empty pull request draft first.
## Pull Request Examples
### Pull Request Examples
### ✅ High - Medium Priority
#### ✅ High - Medium Priority
- Add a new notification
- Add a new notification
- Add a chart
- Add a chart
- Fix a bug
- Fix a bug
- Translations
- Translations
### *️⃣ Requires one more reviewer
#### *️⃣ Requires one more reviewer
I do not have such knowledge to test it.
I do not have such knowledge to test it.
- Add k8s supports
- Add k8s supports
### *️⃣ Low Priority
#### *️⃣ Low Priority
It changed my current workflow and require further studies.
It changed my current workflow and require further studies.
- Change my release approach
- Change my release approach
### ❌ Won't Merge
#### ❌ Won't Merge
- Duplicated pull request
- Duplicated pull request
- Buggy
- Buggy
- Existing logic is completely modified or deleted
- Existing logic is completely modified or deleted
- A function that is completely out of scope
- A function that is completely out of scope
# Project Styles
## Project Styles
I personally do not like something need to learn so much and need to config so much before you can finally start the app.
I personally do not like something need to learn so much and need to config so much before you can finally start the app.
@ -68,32 +68,32 @@ I personally do not like something need to learn so much and need to config so m
- Settings should be configurable in the frontend. Env var is not encouraged.
- Settings should be configurable in the frontend. Env var is not encouraged.
- Easy to use
- Easy to use
# Coding Styles
## Coding Styles
- 4 spaces indentation
- 4 spaces indentation
- Follow `.editorconfig`
- Follow `.editorconfig`
- Follow ESLint
- Follow ESLint
# Name convention
## Name convention
- Javascript/Typescript: camelCaseType
- Javascript/Typescript: camelCaseType
- SQLite: underscore_type
- SQLite: underscore_type
- CSS/SCSS: dash-type
- CSS/SCSS: dash-type
# Tools
## Tools
- Node.js >= 14
- Node.js >= 14
- Git
- Git
- IDE that supports ESLint and EditorConfig (I am using Intellji Idea)
- IDE that supports ESLint and EditorConfig (I am using Intellji Idea)
- A SQLite tool (SQLite Expert Personal is suggested)
- A SQLite tool (SQLite Expert Personal is suggested)
# Install dependencies
## Install dependencies
```bash
```bash
npm ci
npm ci
```
```
# How to start the Backend Dev Server
## How to start the Backend Dev Server
(2021-09-23 Update)
(2021-09-23 Update)
@ -103,7 +103,7 @@ npm run start-server-dev
It binds to `0.0.0.0:3001` by default.
It binds to `0.0.0.0:3001` by default.
## Backend Details
### Backend Details
It is mainly a socket.io app + express.js.
It is mainly a socket.io app + express.js.
@ -116,24 +116,26 @@ express.js is just used for serving the frontend built files (index.html, .js an
- scoket-handler (Socket.io Handlers)
- scoket-handler (Socket.io Handlers)
- server.js (Server main logic)
- server.js (Server main logic)
# How to start the Frontend Dev Server
## How to start the Frontend Dev Server
1. Set the env var `NODE_ENV` to "development".
1. Set the env var `NODE_ENV` to "development".
2. Start the frontend dev server by the following command.
2. Start the frontend dev server by the following command.
```bash
```bash
npm run dev
npm run dev
```
```
It binds to `0.0.0.0:3000` by default.
It binds to `0.0.0.0:3000` by default.
You can use Vue.js devtools Chrome extension for debugging.
You can use Vue.js devtools Chrome extension for debugging.
## Build the frontend
### Build the frontend
```bash
```bash
npm run build
npm run build
```
```
## Frontend Details
### Frontend Details
Uptime Kuma Frontend is a single page application (SPA). Most paths are handled by Vue Router.
Uptime Kuma Frontend is a single page application (SPA). Most paths are handled by Vue Router.
@ -143,24 +145,23 @@ As you can see, most data in frontend is stored in root level, even though you c
The data and socket logic are in `src/mixins/socket.js`.
The data and socket logic are in `src/mixins/socket.js`.
## Database Migration
# Database Migration
1. Create `patch-{name}.sql` in `./db/`
1. Create `patch-{name}.sql` in `./db/`
2. Add your patch filename in the `patchList` list in `./server/database.js`
2. Add your patch filename in the `patchList` list in `./server/database.js`
# Unit Test
## Unit Test
It is an end-to-end testing. It is using Jest and Puppeteer.
It is an end-to-end testing. It is using Jest and Puppeteer.
```
```bash
npm run build
npm run build
npm test
npm test
```
```
By default, the Chromium window will be shown up during the test. Specifying `HEADLESS_TEST=1` for terminal environments.
By default, the Chromium window will be shown up during the test. Specifying `HEADLESS_TEST=1` for terminal environments.
# Update Dependencies
## Update Dependencies
Install `ncu`
Install `ncu`
https://github.com/raineorshine/npm-check-updates
https://github.com/raineorshine/npm-check-updates
@ -172,8 +173,8 @@ npm install
Since previously updating vite 2.5.10 to 2.6.0 broke the application completely, from now on, it should update patch release version only.
Since previously updating vite 2.5.10 to 2.6.0 broke the application completely, from now on, it should update patch release version only.
Patch release = the third digit
Patch release = the third digit ([Semantic Versioning](https://semver.org/))
Adam Stachowicz
3 years ago