- Blazin' fast 2020 Modern Vue.js + Node.js app starter .
- Chinese, Hindi, French, English, German, Spanish, Japanese, Russian, Arabic...
- Easy to understand CRUD(create,read,update,delete) back end files reminding about the Php or Java style.
- If you're bored writing cruds files, simply query generic_crud.js !
- Pictures are stored on Cloudinary, Files are FTP stored .
- Working Mocha Chai unit components testing for Vue.js .
- This starter is suitable for JS data science, linear regressions, neural networks, Kmeans.. .
- Git Commits are automatically Heroku synced .
- Style is switchable to https://www.creative-tim.com/templates/vuejs?page=1 templates
- Sessions based authentication (No JWT token)
This 2020 starter aims is to be able to start any web-app, with all ready generics components, the starter is plugged to a node.js + mongoDb Atlas back end .
15-01-2023 : Due to new Heroku costs, the Heroku live demo is now disabled.
03-21-2022: Warning, this starter now has heroku server global variables, so a simple clone will maybe fail, you'll have to refill config.json
31-10-2020 : Nice Node-Mysql routes and cruds generator : https://github.com/o1lab/xmysql : I will do another vue-node-mysql starter only using xmysql real fast, it is great and so impressive, no need to write routes or cruds files no more in a relational env I can't believe my eyes!. Also this is also nice : https://github.com/johnroers/dbCRUD
30-10-2020 : All of theses queries are very important : https://docs.mongodb.com/manual/reference/operator/aggregation-pipeline/ , for example, $geoNear query is really cool
26-10-2020 : Refactoring groups crud using mongoose populate joints
25-10-2020 : Nice documents : JWT auth vs Sessions auth : https://medium.com/@sherryhsu/session-vs-token-based-authentication-11a6c5ac45e4
19-10-2020 : Currently converting the standard node cruds to a reusable generic node CRUD generic_crud.js: 10 * fasters dev comin soon ... All mongoose schemas will be centralized in models.js !
19-10-2020 : Another Generic CRUD doc : https://medium.com/@bvodola/crud-routes-generator-with-node-express-js-mongoose-30a16538e16a
18-10-2020 : The users Filters "localstorage memory" must be stored in the centralized VUEX store, App logs have to be centralized in the middleware.js file
10-10-2020: A Nice generic backend Controller there : https://github.com/DavideViolante/Angular-Full-Stack/blob/master/server/controllers/base.ts
10-10-2020 : Ftp files are now downloadable from public users profiles - Coming soon : Social networking on each publics profiles, infinite scrolls, mooving duplicated AXIOS functions to VUEX
05-10-2020 :Currently installing Mongoose , and refactoring all cruds files.
05-10-2020 : Very nice article : https://developer.mongodb.com/article/mongoose-versus-nodejs-driver
02-10-2020 : Finally, Mongoose is needed, because the datas models aren't well described
01-10-2020 : Added VueX , When a user logs in, his JSON object is now stored in the VUEX store (main.js).
09-26-2020 : next dev step is resolving the user front end storing problem(Actually both stored as global $user for navbar displaying and in localstorage, this duplicate is bad), I will probably install Vuex
09-26-2020 : Trying to get new ideas from this starter : https://github.com/christopherliedtke/vueX_nodeExpress_mongoDB_wAuth_starter
09-26-2020 : Users Filters are now localstorage stored .
09-26-2020 : an app logStream is now installed.
09-19-2020 : The app is now blazin' fast ! We can moove forward now !!
09-19-2020 : The group query was slowing the readUsers web service a lot ! Disabled and making it a background task theses days! ReadUsers is now immediate ! The app will be blazin' fast
09-10-2020 : The infinity free FTP policy is limiting and blocking at a certain point : 230-Your bandwidth usage is restricted... I am currently searching for another FTP - reading and downloading from FTP is now working
09-17-2020 : Uploading multiples files to the FTP server is now working, next step is reading files from FTP ...
08-05-2020 : Uploadings pics is now active on heroku, switching to the tmp directory. next step is activating the ftp files uploading
08-04-2020 : I'm currently focused on performance issues ( initial loading is too slow)
08-04-2020 : This app is now automatically synced to heroku, when commiting, its so easy to use !
08-04-2020 : Pictures are now stored on cloudinary, i'm trying to use the lazy loading module
08-04-2020 : I'm on files uploading code refactoring , untill its finished, uploading wont work.
- CONFIG.JSON This is the app configuration , db connexion, ftp connexion, choosing dev or prod, etc ...
- SERVER.js This is the node.js server: Includes the node.js params, node session module loading and the MIDDLEWARE and CRUDS web services loading.
- \SRC : This is where you develop the front end vue.js application, this is basically the complete VUE.JS FRONT END application.
- \DIST : This is where the built appears when you type NPM RUN BUILD, This is the final front end vue.js app ready for production.
- \MODELS : Model your Json objects using MonGoose in this directory
- \CRUDS : Each file is a CRUD WEBS SERVICES( create , read, update , delete).
- \APPSYSTEM : There, you can find the MongoDb ATLAS Authentication web service (auth.js), and the middleware functions used for webs services middleware control (middleware.js)
- \TMP : This is a mandatory directory , used for Heroku files uploads.
- \SRC\App.vue : There, you can find the global medias queries CSS styles, making the app fully responsive on all medias, this is an important part ! .
- VUEX data store
- Users CRUD
- MongoDb atlas Auth system
- Middleware file dedicated to the web services (middleware.js)
- Mongoose schema modeler and POPULATE features Json Objects joints
- Permissions and Role store
- FTP Files management
- Dashboard with some graphicals libs (Apex charts)
- Form validator : (https://vuelidate.js.org/#getting-started)
- Internal Messenger system
- Calendar lib
- V-dialog lib
- Notifier https://github.com/euvl/vue-notification
- multi selector : https://vue-multiselect.js.org/
- vue-range-slider : https://github.com/xwpongithub/vue-range-slider
- logStream file for connexions logs, actions logs, etc ...
I am looking for collabs and can give you access to the depot !!
- NEW ! Social network on each user public profiles, allowing all users to share stories, pics etc ...
- NEW ! Ability to share documents, and getting users comments ( Like in Facebook)
- Instead of sessions, another version using JWT login, Register Email confirmation.
- Trello inspired project management vue.js module, using drag and drop .
- SOCKET.IO realtime evolutive system + 1 vue component, allowing several cams at the same time eventually
- Gps positionning lib
- Drag n drop lib, including a new project allowing users to order files by drag and dropping them ( Saving positions)
- Node worker-thread ready to go system, allowing slow big data treatments.
- Node.js Emailing system
- Anti Flooding by IP System
- File session store, allowing a better users sessions management
- Generic reusable Infinite Scrool code
- Automatic filters generation module, when using a data model ( Like in Java)
- Linear solver lib : https://www.npmjs.com/package/javascript-lp-solver and/or https://github.com/jvail/glpk.js
- Linear multiple regression lib : https://github.com/luccastera/shaman
- Neural network : https://github.com/BrainJS/brain.js
- Probability distribution lib : https://www.npmjs.com/package/probability-distributions
- Kmeans lib : https://www.npmjs.com/package/node-kmeans
- Random forest lib : https://github.com/mljs/random-forest
- AJAX call some to some python matplot scripts - pictures generators from a FLASK server.
Ce starter est directement mis à jour sur HEROKU quand je commite des mises à jour.
Le but de ce starter est de pouvoir commencer n'importe quel application Node.js + Vue.js + MongoDb Atlas , avec tous les modèles de données génériques déjà prêts (utilisateurs, messages, middleware, gestion de fichiers, temps réel avec socket.io, calendriers ...), ainsi que des libs de data science déjà prêtes à être utilisées pour réaliser des régressions mathématiques, un petit réseau de neurone, et des graphiques .
Si vous clonez ce dépot, l'app doit normalement fonctionner instantanément chez vous ... Il peut vous donner des idées, bien sur, il existe peut être de meilleures architectures... Mais au moins, celle ci FONCTIONNE
- CONFIG.JSON On trouve la configuration de l'app dans ce fichier : Connexion à la db, au ftp, à cloudinary ...
- SERVER.js Il s'agit du serveur node.js: Inclut les paramètres node.js, le chargement du module de gestion des sessions utilisateur et le chargement des services Web CRUDS.
- \ SRC: C'est ici que vous développez l'application front-end vue.js, c'est fondamentalement l'application VUE.JS FRONT END complète.
- \ DIST: C'est là que le build apparaît lorsque vous tapez NPM RUN BUILD, c'est l'application compressée et optimisée pour la production par webpack.
- \ CRUDS: Chaque fichier est un CRUD WEBS SERVICES (créer, lire, mettre à jour, supprimer) un peu comme en java ou en php, sauf que c'est du NODE.JS.
- \MODELS : On modélise nos objets JSON avec Mongoose dans ce répertoire, on y spécifie les types des variables.
- \ APPSYSTEM: Vous y trouverez le service Web d'authentification sur MongoDb Atlas (auth.js) et les fonctions middleware utilisées pour le contrôle des autorisations des services Web (middleware.js)
- \ TMP: C'est un répertoire obligatoire pour les téléchargements de fichiers sur Héroku.
- \SRC\App.vue : Dans ce fichier, vous pouvez trouver les CSS Medias queries de l'app qui permettent de régler les styles css pour que cela passe sur tous les matériels .
- \TESTS : On execute NPM RUN TEST dans ce rep pour tester tous les components de l'app vue.js
npm install
Clone the depot using smargit, then install the node modules at the root of the app
Clonez ce dépot avec Smartgit, puis installez les modules nodes , en tapant le code précédent à la racine de l'application.
Create a mongoDbAtlas account, Create a cloudinary account, Create and ftp account, then fill config.json
# Starting the vue.js dev env on port 8080, Axios queries are forwarded to port 80 using vue.config.js
# Open a cmd window on WINDOWS then enter:
npm run serve
# Starting the node server on port 80
# Open another CMD window then enter :
node server.js
When you want to develop the vue.js application, run these 2 commands in 2 differents windows CMD, at the root of the app.
Then, go in your browser to localhost: 8080, and modify the files in the \ SRC directory
To modify the BACK END, it is rather in the CRUDS directory
Quand vous voulez developper l'application vue.js, executez ces 2 commandes dans 2 fenêtres différentes CMD sous windows, à la racine de l'application.
Ensuite, rendez vous dans votre navigateur à localhost:8080, et modifiez les fichiers dans le répertoire \SRC
Pour modifier le BACK END, c'est plutôt dans le répertoire CRUDS
npm run build
When you are satisfied with your development, you generate a BUILD of your vue.js app which is compressed and optimized, it then appears in the \ DIST directory.
Quand vous êtes satisfait de votre développement, vous générez un BUILD de votre app vue.js qui est compressé et optimisé, il apparait alors dans le répertoire \DIST.
npm run start
To test your BUILD on port 80, just type localhost: 80 in your browser! In fact, there is only one node server running all the time!
Pour tester votre BUILD sur le port 80 , tapez juste localhost:80 dans votre navigateur ! En fait, il n'y a qu'un seul serveur node qui tourne en permanence !
It is so simple and automatic, 1. Clone this depot in your github, 2. Simply go to heroku and go to the deploy tab then manually deploy your app. 3. Don't even sync the \dist directory when commiting, Heroku does it for you !
C'est tellement simple et automatique, 1. Clonez ce dépôt dans votre github, 2. Allez simplement sur heroku et allez dans l'onglet de déploiement puis déployez manuellement votre application. 3. Même pas besoin de taper NPM RUN BUILD, Heroku le fait automatiquement pour vous. Pour gérer cela, c'est sous l'onglet DEPLOY, c'est trop pratique, tout se fait tout seul, on peut même paramétrer en SYNC automatique dès qu'on fait un commit, l'app se mets à jour toute seule !.
npm run test:unit
npm run lint
const UserSchema = new Schema({
_id: ObjectId,
prenom: { type: String, required: true },
nom: { type: String, required: true },
email: { type: String, required: true },
password: { type: String, required: true },
role: String,
permissions: Array,
filenames: Array,
groups: Array,
last_update: String,
img: String,
birthday: String,
age: String,
job: String,
mentra: String
});