A full stack (MEVN) application with Vue.js on the front-end


#1

Repo | Demo

Hi guys,

Last year I wrote a simple application to keep track of some events I completed. It’s kind of a ‘ledger’ that stores info about books and films in the MongoDb. The application is implemented as a SPA with the node.js in back-end and Angular2 in front. Recently, I decided that Angular2 is too ‘heavy’ for such a simple project, so I rewrote front-end on Vue.js. In addition, I added the ability to share data between users.

Probably there could be several points of interest I want to share:

  • JWT authentication (so far the token is not refreshing).
  • Google’s reCaptcha in a Vue.js component.
  • Two-ways binding (v-model) in a custom component (DateInput).
  • Using ‘vuelidate’ package for validation.
  • Moving all angular services and async operations to vuex’ store.
  • Keeping back-end and front-end in two separate npm projects but in one git repo.

When building application for production, the files, produced by webpack, are copied to the public folder on back-end. Then I commit the changes into local repo and deploy the back-end part on heroku. In dev mode my backend is hosted locally (with enabled CORS).

To do: Planning to add progress indicator: considerable delays, when heroku is waken up from the sleep.

Please excuse my poor design. I’m not much of a designer )
Thanks for feedbacks.


Where to put server side code in a vue-cli webpack project?
#2

Also created a vue component for exploring fractals
repo | demo


#3

Hi!! how you can enabled CORS in order to communicate Vuejs and the backed lets say Express? How do I serve Vuejs files without rebuild every time I make a change? Thanks in advanced.


#4

Hi, @iHaventSleep

  1. To enable CORS you can:
    a. Use the cors package
    b. Use a middleware of your own, like this:
module.exports = (server) => {
    server.use((req, res, next) => {
        res.header('Access-Control-Allow-Origin', '*');
        res.header('Access-Control-Allow-Methods', 'PUT, DELETE');
        res.header('Access-Control-Allow-Headers',
            'Origin, X-Requested-With, Content-Type, Accept, Authorization');

        if (req.method === 'OPTIONS') {
            res.sendStatus(200);
            return;
        }

        next();
    });
};
  1. I scaffolded my app with the vue-cli and webpack template.
    In the dev mode (npm run dev), the special script dev-server.js automates all tasks

#5

Is there a way that I can I build my own project folder structure instead of using the vue-cli webpack templates? I mean making from scracth you don’t have to all of this that you are saying?


#6

Of course, there is. Look into this, as an example. Also, the following blog can be helpful.


#7

Hello iurii-kyrylenko, please must I deploy the back-end on only heroku? Can I do that locally? Just for the test? when I try starting the server locally, I get an error. I can start the front-end locally.
error is: error code EJSONPARSE


#8

If you’re getting the error during installation, try

npm cache clean


#10

Just updated the application:

  1. Upgraded node.js version on back-end: now using native calls async/await for /users endpoint.
  2. For /users endpoint on backend applied new mongoDB’s feature aggregate/lookup to join data of different collections.
  3. Vue.js application: People page renders items counts along with user names

#11

Не сильно понял смысла темы…Как по мне так давно пора популяризировать MEVN, идея не нова и имеет огромную кучу классных реализаций, может и меньше чем в связке с пыхой, но все же


#12

Updated project to Vue CLI 3.
Updated dependencies.