vue-express-mongo-boilerplate
This project is under heavy development!!!
This is a VueJS webapp boilerplate project with ExpressJS + Mongo server. Not an out-of-box webapp.
Inspired by dstroot/skeleton and sahat/hackathon-starter
This is just my personal boilerplate, it may or may not be a good fit for your project(s).
If you like my work, please donate. Thank you!
Live Demo (login: test/test1234)
Features
Server-side
- Node.JS v6.x.x
- Express
- MongoDB with Mongoose
- NodeMailer with SMTP, MailGun or SendGrid
- Helmet
- Express-validator
- winston + 6 transports
- GraphQL with Apollo stack
- i18next as the internationalization ecosystem
- HTTP/2 Server Push with netjet
- Bundled server-side code with Webpack 2
Client-side
- VueJS 2.x
- Vuex
- Vue-router
- axios
- socket.io connection with namespaces & authorization
- vue-websocket
- Jade
- Webpack 2
- SCSS
- PostCSS with precss and autoprefixer
- Babel
- Passwordless mode
- Passport.JS
- Social signup/login with Facebook, Google, Twitter and Github
- API key authentication for REST API calls
- Toastr
- vue-form-generator
Supported remote logging services
Usage
Install dependencies
$ npm install
or
yarn
For development
$ npm run devBuild web app scripts and styles:
$ npm run buildFor production
$ npm startScreenshots
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
- Visit [Google Cloud Console](https://cloud.google.com/console/project)
- 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
- Visit [Facebook Developers](https://developers.facebook.com/)
- 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.
- Go to [Account Settings](https://github.com/settings/profile)
- 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
- Sign in at [https://apps.twitter.com/](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
License
vue-express-mongo-boilerplate is available under the MIT license.
Contact
Copyright (C) 2016 Icebob
