DEV Community

Build a Todo App with Node.Js, ExpressJs, MongoDB and VueJs – Part 2

Samuel James on February 11, 2018

In part 1 of this tutorial, we built APIs for a simple todo application and now we are here to put the front end together with VueJS. Dont worry if...
Collapse
 
pulkitgoel96 profile image
Pulkit Goel

Hi,
I was following your tutorial line by line, and just before the last step( npm run build), I got an error "No configuration file found and no output filename configured via CLI option. A configuration file could be named 'webpack.config.js' in the current directory."
Please help.

Collapse
 
markjohnson303 profile image
Mark Johnson 👔

I was able to get this up and running by doing a few things:

  1. make sure your public folder file structure matches what is in Samuels github repo here: github.com/abiodunjames/NodeJs-Tod...

Mine was off a little bit based on how I read the instructions. Make sure you check out the subfolders for consistency as well.

  1. Make sure you have a webpack.config.js in your root folder that looks like this: github.com/markjohnson303/vue-todo....

  2. Don't forget the last step of updating index.html to reference bundle.js

I had to make a couple changes to the webpack.config.js that Samuel has in his repo, but this should get you going.

Collapse
 
thuycis2018 profile image
thuycis2018 • Edited

Thanks Mark J. I got error when running 'npm run build'. So I followed your suggestions, checked for file structure and used your webpack.config.js.

I got passed this error. However, when I load the app, add/delete/all work but update function didn't work (.save callback function didn't fire).

So I made this change and it's now working:

todo.save({
function (error, todo) {
...
}
})

Changed to (removed {})

todo.save(
function (error, todo) {
...
}
)

Based on suggestions on best practice, I also changed file names to lowercase (todo.js, routes.js, config.js) and variable Todo -> todo.

Collapse
 
abiodunjames profile image
Samuel James

Hi,
Sorry for late my response. I think you are webpack.config.js. github.com/abiodunjames/NodeJs-Tod...

Collapse
 
vancass profile image
Van

I followed the steps, and it doesn't work. I think it's better to edit the article with necessary additional steps.

Things that don't work for me:

  1. The code uses Webpack, but there's no webpack.config.js. When calling npm run build, there will be an error about the Webpack config not being found. I had to follow the steps described in Mark Johnson's comment to get the Webpack to work.

  2. Tutorial part 1 uses Morgan in server.js, but in this part 2, Morgan is removed from the dependencies. As a result, running node server will have an error. I realized that Morgan is included in the source code, though. So it seems that the code in the article is not exactly the same with the source code?

Collapse
 
ashgale profile image
AshGale

Hi Samuel,
while running build i get: "ERROR in ./public/src/main.js
Module not found: Error: Can't resolve 'vue'"

I looked in the github and saw there is a Vue.js file. how did you add this to the project or did the build take care of this for you?

I have web pack issues too, but ended up manually creating webpack.cofig.js and c+p from git, but then got above error.

thanks again for content

Collapse
 
abiodunjames profile image
Samuel James • Edited

Hi AshGale,

We could import Vue using NPM without defining an alias in webpack.config.js. The problem is NPM provides runtime only build where template compiler is not available. One could fix this by downloading an official Vue package and defining an alias in webpack.config.js. Check this github.com/vuejs-templates/webpack...

Collapse
 
brianoh profile image
Brianoh

Thanks for this article Sam, I think it will be very useful to me in learning Vue etc. I haven't started studying the code yet, but can you or someone else advise me whether this is an isomorphic / SSR / universal app? TIA Brianoh.

Collapse
 
hardik2014 profile image
hardik2014

Hello Samuel,

Let me say it is a great article. Application is working. Except update functionality seems not working for me.

I have checked browser console. Update request remains in pending status.

Can you help me out here?

Collapse
 
mdoja profile image
Micah Dunson

I noticed that when updating the @keyup.enter is not working and the input remains in focus instead of returning to a blur state. I've tried some things but nothing has worked.is there a way to remove the focus when hitting the 'enter' button?

Collapse
 
gander profile image
Gander • Edited

I have enough programmers who write courses, although they can not do it and should never do it. The first part was quite understandable. But the second is a total failure. It's like a horse drawing course. Part one: draw circles where the head and torso will be. Part two: Draw the final details. It only saves you that you gave the sources...

Collapse
 
anekenonso profile image
kenneth okenwa

Hi am getting a blank webpage when I run " node server.js " but if I check my terminal it shows " GET /build/bundle.js 404 0.345 ms - 154 " each time I refresh the page

Collapse
 
mattosurf profile image
Matthew O’Leary

Hi Samuel, was this tutorial updated per comments below?

Collapse
 
abiodunjames profile image
Samuel James

The tutorial and the source code were updated a few months ago. You can check the source code on github to be sure.

Collapse
 
rguerreroc profile image
Raul Guerrero Carrasco

Hi,

Great tutorial. Thanks.

Only a doubt, it isn't finished, right?

Collapse
 
abiodunjames profile image
Samuel James

Thank you. Yes, it's finished. Part 2 is the last part of the series or do you have any topics you would want me to write on?