This is a boilerplate project. The project contains Node.js REST API and frontend/backend developed by Vue.js with BootstrapVue.
- API
- Node.js, Express, Webpack, Express Validator, JWT, Bunyan, Promise MySQL, Node Mailer, Jest, Supertest, Nodemon
- Frontend
- Vue.js, Vuex, Vue Router, Vue Draggable, Vuelidate, BootstrapVue, Jest, Cypress
- Backend
- Vue.js, Vuex, Vue Router, Vuelidate, BootstrapVue, Jest, Cypress
Service | Endpoint |
---|---|
API | https://nvm-boilerplate.chrislee.kr/api/ |
Frontend | https://nvm-boilerplate.chrislee.kr/frontend/ |
Backend | https://nvm-boilerplate.chrislee.kr/backend/ |
Mailhog | https://nvm-boilerplate.chrislee.kr/mailhog/ |
![](https://user-images.githubusercontent.com/5715919/70433695-7f57b780-1ad6-11ea-9596-da8e7c651387.jpg)
![](https://user-images.githubusercontent.com/5715919/70433697-7f57b780-1ad6-11ea-8849-6a4f72b89412.jpg)
![](https://user-images.githubusercontent.com/5715919/70433699-7f57b780-1ad6-11ea-94a1-19d578eaf53d.jpg)
![](https://user-images.githubusercontent.com/5715919/70433700-7ff04e00-1ad6-11ea-8f18-68b4a283e829.jpg)
![](https://user-images.githubusercontent.com/5715919/70433701-7ff04e00-1ad6-11ea-996e-87dd9cc0b922.jpg)
![](https://user-images.githubusercontent.com/5715919/70433703-7ff04e00-1ad6-11ea-8e8e-6349d66de647.jpg)
![](https://user-images.githubusercontent.com/5715919/70433704-8088e480-1ad6-11ea-8e37-380e2fe3a29b.jpg)
![](https://user-images.githubusercontent.com/5715919/70433707-8088e480-1ad6-11ea-995f-7298ac177889.jpg)
![](https://user-images.githubusercontent.com/5715919/70433709-81217b00-1ad6-11ea-82ba-35972dbfaf31.jpg)
![](https://user-images.githubusercontent.com/5715919/70433710-81217b00-1ad6-11ea-9207-f72419b96217.jpg)
![](https://user-images.githubusercontent.com/5715919/70433712-81ba1180-1ad6-11ea-81e4-0a408d8382a6.jpg)
![](https://user-images.githubusercontent.com/5715919/70433714-8252a800-1ad6-11ea-9a14-c64a2d9a2d2b.jpg)
![](https://user-images.githubusercontent.com/5715919/70433715-8252a800-1ad6-11ea-93ee-827ebd24ce4f.jpg)
![](https://user-images.githubusercontent.com/5715919/70433716-82eb3e80-1ad6-11ea-80de-3418e4c6890e.jpg)
![](https://user-images.githubusercontent.com/5715919/70433717-82eb3e80-1ad6-11ea-9664-37c69d0a895f.jpg)
![](https://user-images.githubusercontent.com/5715919/70433718-8383d500-1ad6-11ea-96b2-46660dd569db.jpg)
![](https://user-images.githubusercontent.com/5715919/70433720-841c6b80-1ad6-11ea-8213-53e01587a930.jpg)
![](https://user-images.githubusercontent.com/5715919/70433722-84b50200-1ad6-11ea-8797-bbb75e22986b.jpg)
![](https://user-images.githubusercontent.com/5715919/70433723-84b50200-1ad6-11ea-997d-cda5d001a58f.jpg)
![](https://user-images.githubusercontent.com/5715919/70433726-85e62f00-1ad6-11ea-9228-17e046420915.jpg)
$ docker-compose up -d
Once docker containers are up, then you can access services with below URL.
Service | Endpoint |
---|---|
API | http://localhost/api |
Frontend | http://localhost/frontend |
Backend | http://localhost/backend |
Mailhog | http://localhost/mailhog |
MySQL | localhost:3307 |
There are three users in the database initially. You can use them to login Frontend/Backend.
Service | Username | Password | |
---|---|---|---|
Backend | admin | [email protected] | 123456 |
Backend | staff | [email protected] | 123456 |
Frontend | user | [email protected] | 123456 |
API docker container will be launched as development mode with nodemon. However, it won't detect any changes unless uncomment volumes.
To enable live change for the API, simply uncomment following lines in docker-compose.yml
volumes:
- ./api:/srv
Please make sure you run npm install
in the api
folder.
Currently, Frontend and Backend docker container is configured to serve production mode due to the limitation of setting development environment of Vue.js in sub directory.
If you want to have Hot Reload feature, then you should launch the Frontend separately by npm run serve
.
cd frontend
npm run serve
# or
cd backend
npm run serve
Then access Frontend with http://localhost:8080
and Backend with http://localhost:8081
via your browser.
Currently, API is configured to point Mailhog to send an email. Any email sent by the API can be viewed in Mailhog web interface.
Access via your browser http://localhost/mailhog
In the folder mysql/sql
, there is a SQL file called inital.sql
, which will become initial database table/rows.
MySQL port is mapped to 3307.
-
Frontend
- User registration
- Confirm user email address
- Reset user password
- User login/logout
- Manage todo
- Manage account information
-
Backend
- Staff login/logout
- Staff permission management
- List todo
- Manage users
- Manage staffs
- Manage settings
-
CI/CD
- Gitlab: .gitlab-ci.yml
- Github: .github/workflows/main.yml
- Unit tests
- E2E tests