A full stack webapp boilerplate project with VueJS + ExpressJS + MongoDB

by Vue.js Examples

vueapp

Vue-express-mongo-boilerplate

Vue, Express, MongoDB full-stack JS Boilerplate

This is a full stack webapp boilerplate project with VueJS + ExpressJS + MongoDB. It is NOT an out-of-box project.
I make it in order to create an up-to-date starter repo which contains all important functions (user signup, login, oauth, profile, …etc) except the business-logic. So when neccessary I can create a new webapp and only need to develop the business logic.

This is just my personal boilerplate, it may or may not be a good fit for your project(s).
Inspired by dstroot/skeleton and sahat/hackathon-starter

If you like my work, please donate. Thank you!

Live Demo (login: test/test1234 or sign-up)

Usage

Install dependencies

$ npm install

or

yarn

For development

$ npm run dev

Build web app scripts and styles:

$ npm run build

For production

$ npm start

Docker

Building the images for the first time

$ docker-compose build

Starting the images

$ docker-compose up

Screenshots

Login screen

Index page after login

Devices page

Directory structure

+---build
+---client
|   +---app
|   |   +---core
|   |   +---modules
|   |       +---demo
|   |       +---devices
|   |       +---home
|   |       +---posts
|   |       +---session
|   |                   
|   +---frontend
|   +---images
|   +---scss
|                   
+---data
+---logs
+---server
|   |   bundle.js
|   |   dev.js
|   |   index.js
|   +---applogic
|   |   +---libs
|   |   +---modules
|   |       +---counter
|   |       +---devices
|   |       +---posts
|   |       +---session
|   +---config
|   |       default.js
|   |       index.js
|   |       prod.js
|   |       test.js
|   |       
|   +---core
|   +---libs
|   +---locales
|   |   +---en
|   |   +---hu
|   +---models
|   |       user.js
|   +---public
|   +---routes
|   +---schema
|   +---services
|   +---views
+---tests
|
|   package.json
|   secrets.json

Bundled server-side

If you want to bundle your NodeJS server-side code run webpack on server code with npm run build && npm run build:server command. It if was success, run the server: npm run start:bundle

If you want to export bundled version copy these folders & files to the new place:

- server
	- locales
	- public
	- views
	- bundle.js
- package.json
- config.js (optional)

Before start, you have to install production dependencies with npm: npm install --production

Obtaining API keys for social signup/login

These are the instructions for Google:

  • Visit Google Cloud Console
  • Click on the Create Project button
  • Enter Project Name, then click on Create button
  • Then click on APIs & auth in the sidebar and select API tab
  • Click on Google+ API under Social APIs, then click Enable API
  • Next, under APIs & auth in the sidebar click on Credentials tab
  • Click on Create new Client ID button
  • Select Web Application and click on Configure Consent Screen
  • Fill out the required fields then click on Save
  • In the Create Client ID modal dialog:
  • Application Type: Web Application
  • Authorized Javascript origins: http://localhost:3000
  • Authorized redirect URI: http://localhost:3000/auth/google/callback
  • Click on Create Client ID button
  • Copy and paste Client ID and Client secret keys into config.js file

These are the instructions for Facebook:

  • Visit Facebook Developers
  • Click My Apps, then select *Add a New App from the dropdown menu
  • Select Website platform and enter a new name for your app
  • Click on the Create New Facebook App ID button
  • Choose a Category that best describes your app
  • Click on Create App ID button
  • In the upper right corner click on Skip Quick Star
  • Copy and paste App ID and App Secret keys into config.js file
  • Note: App ID is clientID, App Secret is clientSecret
  • Click on the Settings tab in the left nav, then click on + Add Platform
  • Select Website
  • Enter http://localhost:3000 under Site URL

Note: After a successful sign in with Facebook, a user will be redirected back to home page with appended hash #_=_ in the URL. It is not a bug. See this Stack Overflow discussion for ways to handle it.

Update: Added a commented workaround to App.vue, otherwise the FB users may end up on a blank page on redirect.

These are the instructions for GitHub:

  • Go to Account Settings
  • Select Applications from the sidebar
  • Then inside Developer applications click on Register new application
  • Enter Application Name and Homepage URL
  • For Authorization Callback URL: http://localhost:3000/auth/github/callback
  • Click Register application
  • Now copy and paste Client ID and Client Secret keys into config.js file

These are the instructions for Twitter:

  • Sign in at https://apps.twitter.com/
  • Click Create a new application
  • Enter your application name, website and description
  • For Callback URL: http://127.0.0.1:3000/auth/twitter/callback
  • Go to Settings tab
  • Under Application Type select Read and Write access
  • Check the box Allow this application to be used to Sign in with Twitter
  • Click Update this Twitter’s applications settings
  • Copy and paste Consumer Key and Consumer Secret keys into config.js file

GitHub

View Github