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

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.

7 Likes

Also created a vue component for exploring fractals
repo | demo

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.

1 Like

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
2 Likes

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?

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

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

If you’re getting the error during installation, try

npm cache clean

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

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

Updated project to Vue CLI 3.
Updated dependencies.

if my backend is in Java SpringBoot, how can I enable CORS ??

On front-end, my senior used proxyTable configuration using webpack to resolve it. No need to modify it from backend.
Though I don’t understand it properly.