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