Skip to content

Chris' Laboratory

chrislee.kr – Personal blog as bookshelves

Menu
  • Home
  • Github
  • Contact Me
Menu

Node.js (REST API) + Vue.js/Nuxt.js (Frontend/Backend) + MySQL Boilerplate

Posted on 10/10/201929/08/2020 by Chris Lee
Read Time:2 Minute, 18 Second

Github: https://github.com/chrisleekr/nodejs-vuejs-mysql-boilerplate

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 – Nuxt.js
    • Nuxt.js, Vue.js, Vuex, Vuelidate, BootstrapVue, Jest
  • Frontend – Vue.js
    • Vue.js, Vuex, Vue Router, Vue Draggable, Vuelidate, BootstrapVue, Jest, Cypress
  • Backend
    • Vue.js, Vuex, Vue Router, Vuelidate, BootstrapVue, Jest, Cypress

Demo

ServiceEndpoint
APIhttps://nvm-boilerplate.chrislee.kr/api/
Frontend – Nuxt.jshttps://nvm-boilerplate.chrislee.kr/frontend-nuxt/
Frontend – Vue.jshttps://nvm-boilerplate.chrislee.kr/frontend-vue/
Backendhttps://nvm-boilerplate.chrislee.kr/backend/
Mailhoghttps://nvm-boilerplate.chrislee.kr/mailhog/

                   

How to start in your local environment

$ docker-compose up -d

Once docker containers are up, then you can access services with below URL.

ServiceEndpoint
APIhttp://localhost/api
Frontend – Nuxt.jshttp://localhost/frontend-nuxt
Frontend – Vue.jshttp://localhost/frontend-vue
Backendhttp://localhost/backend
Mailhoghttp://localhost/mailhog
MySQLlocalhost:3307

There are three users in the database initially. You can use them to login Frontend/Backend.

ServiceUsernameEmailPassword
Backendadminadmin@boilerplate.local123456
Backendstaffstaff@boilerplate.local123456
Frontenduseruser@boilerplate.local123456

API

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.

Frontend & Backend

Currently, Frontend (Nuxt.js/Vue.js) 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-vue
npm run serve

# or

cd frontend-nuxt
npm run dev

# or

cd backend
npm run serve

Then access Frontend – Nuxt.js with http://localhost:3000, Frontend – Vue.js with http://localhost:8080 and Backend with http://localhost:8081 via your browser.

Mailhog

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

MySQL

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.

Features

  • Frontend – Vue.js
    • User registration
    • Confirm user email address
    • Reset user password
    • User login/logout
    • Manage todo
    • Manage account information
  • Frontend – Nuxt.js
    • Support all features that “Frontend – Vue.js”
    • Server Side Render (SSR)
  • 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

Share

Facebook
Twitter
LinkedIn
Email

Related

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Categories

  • Databases (11)
    • MongoDB (4)
    • MS-SQL (1)
    • MySQL (6)
  • E-Commerce (8)
    • Magento (8)
  • Finance (2)
  • Frameworks (84)
    • Adobe Flex (1)
    • Angular (ngx) (3)
    • Codeigniter (6)
    • CSS (5)
    • Django (2)
    • Javascript (13)
    • Node.js (6)
    • PHP (17)
    • React Native (4)
    • React.js (1)
    • Sencha Touch (4)
    • Terraform (1)
    • Vue.js (1)
    • WordPress (4)
    • Yii2 (3)
  • General Documents (15)
  • Marketing (3)
  • Mobile Development (33)
    • Android (20)
    • iPhone (13)
  • Platforms (21)
    • Arduino (2)
    • Docker (5)
    • Google App Engine (5)
    • Raspberry Pi (5)
    • Samsung Smart TV (4)
  • Security (17)
  • Server (30)
    • Linux (12)
  • Tools (14)
    • SVN (7)
  • Uncategorized (2)

Search

Recent Posts

  • Taint all resources in the one module
  • Alpine – Plugin caching_sha2_password could not be loaded
  • npm link with peerDependencies
  • How to setup Gitlab runner with KVM enabled
  • Failed to transform bcprov-jdk15on-1.68.jar

Recent Comments

  • Obayed on Binance Auto Trading Bot – Buy low/Sell high with stop loss limit/Trade multiple coins
  • Ari on How to install memcache.so/memcached.so for MAMP Pro (Mac)
  • Mida ali on Binance Auto Trading Bot – Buy low/Sell high with stop loss limit/Trade multiple coins
  • Chris Lee on How to install memcache.so/memcached.so for MAMP Pro (Mac)
  • Chris Lee on Setting Up A VPN Server On OSX 10.6

Tags

1 ajax amazon android android-addpart browser chrislee-kr codeigniter codeigniter-tcpdf com-apple-net-racoon CSS CSS history hack delpaigmail-com entity-addpart-double exception-printing-is-disabled-by-default-for-security-reasons ext-plugins-listpagingplugin ext-plugins-listpagingplugin-example f iphone javascript jquery-defaultchecked jquery-samsung-smart-tv listpagingplugin mac magento-exception-printing-is-disabled-by-default-for-security-reasons magento-sample-data-exception-printing-is-disabled-by-default-for-security-reasons nu-vot null-core-errors-confignotfound-config-mk9engine-ini php samsung-smart-tv-jquery samsung-smart-tv-sdk-ajax samsung-smart-tv-sdk-jquery samsung-tv-sdk samsung-tv-sdk-jquery samsung tv sencha-smart-tv sencha-touch-list-paging smart-tv-jquery sqlite subversion svn tcedook tcpdf-codeigniter uilinebreakmodecharacterwrap-is-deprecated unknown-column-link-area

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org
© 2023 Chris' Laboratory | Powered by Minimalist Blog WordPress Theme