Este es un proyecto full stack con bulma VueJS + ExpressJS + MongoDB.

Este es un fork tomado del proyecto https://github.com/icebob/vue-express-mongo-boilerplate

El objetivo es crear un repo de arranque actualizado que contenga todas las funciones importantes (registro de usuario, inicio de sesión, perfil etc.), excepto la lógica de negocios, al igual que el proyecto original, pero usando bulma en vez de boilerplate.

Voy a dejar mis experiencias en el siguiente blog https://yungol.tumblr.com/

Así que esto les puede servir para crear una nueva webapp y sólo necesitarán dedicarse a la lógica de negocio.

Paciencia no soy un programador profesional, lo que hago es copiar y pegar cosas que encuentro en google.

Lado del Servidor

• 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

Lado del Cliente

• 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

Servicios de logging soportados

• Papertrail
• Graylog
• LogEntries
• Loggly
• Logsene
• Logz.io

Antes de instalar debe tener node.js y mongo.js

Un editor de Código.

Para tirar código he pasado por varios ide de desarrollo, desde Dreamweaver, sublime, atom y webstorm pero actualmente el que más me gusta es Visual Studio Code https://code.visualstudio.com/ es de Microsoft, es gratis y se puede instalar en todos los sistemas operativos.

Programo en Ubuntu y Mac, no me gusta en Windows.

Clonar el Repositorio

$ git clone https://github.com/yungol/vue-express-mongo-bulma.git

Instalar las dependencias.

$ npm install

Para hacer development

$ npm run dev

Para construir la app los scripts y los estilos:

$ npm run build

Para producción

$ npm start

.... Mas adelante pongo los Sreenshots

+---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

Si desea construir el código del lado del servidor NodeJS, corra webpack en el servidor con el siguiente comando npm run build && npm run build:server. Si fue exitoso, corra la aplicación así: npm run start:bundle

Si quiere exportar la versión construida copie y pegue los siguientes directorios en un nuevo lugar:

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

Antes de empezar, debe instalar las dependencias de producción con npm: npm install --production

Estas son las instrucciones para 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

Estas son las instrucciones para 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.

Estas son las instrucciones para 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

Estas son las instrucciones para 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

vue-express-mongo-bulma esta disponible bajo MIT license.

Copyright (C) 2017 yungol