Full Stack Web App using Vue.js & Express.js: Part 1 – Intro



Welcome to part 1 of a new series where I will create a full stack web application using Vue.js and Express.js

00:00 Project description
6:35 Git Setup
17:47 Backend setup
36:40 Register page setup

GitHub repo: https://github.com/codyseibert/tab-tracker

Follow Cody on Twitter: https://twitter.com/CodyLSeibert

Learn to code for free and get a developer job: https://www.freecodecamp.com

Read hundreds of articles on programming: https://medium.freecodecamp.com

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

Related Posts
lit-HTML (Chrome Dev Summit 2017)

lit-HTML is a next-generation templating library that combines powerful web platform primitives – JavaScript tagged template literals and HTML templates Read more

The Truth about app development – how coding has changed in 2020.

Ex-Google TechLead explains why apps and websites are so hard to succeed. Check out http://curiositystream.com/techlead for unlimited access to the Read more

How to use Cordova to create an Android app

This example is for JavaScript beginners. We take a simple JavaScript web app that estimates paint cost and create an Read more

Display notifications – Progressive Web App Training

What's the best way to display popup notifications on mobile and desktop. This video shows how to use the Notification Read more

27 thoughts on “Full Stack Web App using Vue.js & Express.js: Part 1 – Intro”

  1. I'm new to ECMAScript 6 Javascript and struggled to get ${req.body.email} working until i realised that `backticks` are needed instead of 'single quotes'

    Reply
  2. I'm lost on axios part with all these services things. Too much different files, actions and concepts for doing just one thing at this pint for me. Maybe later.

    Reply
  3. Hi thank you for this tutorial, i got a prob with server script.
    this script its work for me:
    "scripts": {
    "start": "nodemon index",
    "start-dev": "nodemon –exec "npm run lint && node index"",
    },

    Reply
  4. For Win10 users, installing latest of eslint, standard, and plugins won't work. My devDependencies looks like this:

    "devDependencies": {

    "eslint": "^5.0.0",

    "eslint-config-standard": "^12.0.0",

    "eslint-plugin-import": "^2.13.0",

    "eslint-plugin-node": "^7.0.0",

    "eslint-plugin-promise": "^4.0.0",

    "eslint-plugin-standard": "^4.0.0"

    }

    If you use latest, chances are you'll get an error that import plugin is not found.

    Reply
  5. At 37:50, you wrote "import axios from 'axios'", is there any difference to the require function used earlier in the video? For example, "const axios = require('axios'). Thanks.

    Reply
  6. Hey ! I've got a issue after doing npm install –save exoress body-parser cors morgan"

    No files matching the pattern "node_modules/ipaddr.js"
    If i delete the folder its working…. tell me why pls…

    Reply
  7. Hey, thanks for the video! Im getting an error at the const express = require('express') and all the rest of those requires. Error is: error 'require' is not defined no-undef. Not really sure how to fix it

    Reply
  8. so i am following this tutorial now for 2 hours and could not get it to work. deep down in the comments i found a stackoverflow link which helped me.
    in order to get the console.log('hello') to work you need to install nodemon and eslint globally and then change the start and lint in the package.json.scripts to "start": "nodemon src/app.js",

    "lint": "./node_modules/.bin/eslint src/*.js"
    the i finally had it working

    Reply
  9. When I m running the nom run dev
    I am facing issue please suggest on this
    > client@1.0.0 dev /user/somename/Workspace/tab-tracker/client
    > webpack-dev-server –inline –progress –config build/webpack.dev.conf.js

    internal/modules/cjs/loader.js:605
    throw err;
    ^

    Error: Cannot find module 'webpack'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
    at Function.Module._load (internal/modules/cjs/loader.js:529:25)
    at Module.require (internal/modules/cjs/loader.js:657:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (/Users/panigrahirenuka/.npm-global/lib/node_modules/webpack-dev-server/bin/webpack-dev-server.js:26:17)
    at Module._compile (internal/modules/cjs/loader.js:721:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! client@1.0.0 dev: `webpack-dev-server –inline –progress –config build/webpack.dev.conf.js`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the client@1.0.0 dev script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in:
    npm ERR! /Users/panigrahirenuka/.npm/_logs/2019-01-31T01_18_50_982Z-debug.log

    Reply
  10. hey , really good tutorial , but i have one question , i didnt quite understand it why using axios , can someone explain , thanks in advance

    Reply

Leave a Comment