vuejsdevelopers/vuejs-poster-shop

Source code for "The Ultimate Vue.js Developers Course"

Ultimate Vue.js Developers Course

Source code for the Ultimate Vue.js Developers Course.

Project 1: Vue.js Poster Shop

Demo

See the completed project here: http://vuejs-poster-shop.vuejsdevelopers.com/

Pre-installation

1. Ensure Node.js >=6.4, NPM and git are installed on your system

2. Register Oauth 2 access to the Imgur API.

   Register for OAuth 2 authorization without a callback URL. You can name your application anything you like and you don't need a callback URL. The important thing is that you get a client ID.

Installation

1. Install this code on your local system

   1. Fork this repository (click 'Fork' button in top right corner)

   2. Clone the forked repository on your local file system

      cd /path/to/install/location
      
      git clone https://github.com/[your_username]/vuejs-poster-shop.git
      

2. Change directory into the local clone of the repository

   cd vuejs-poster-shop
   

3. Install dependencies

   npm install
   

4. Create a .env file by copying the sample

   cp .env_sample .env
   

   Or for Windows:

   copy .env_sample .env
   

   Now edit the .env file and replace the IMGUR_CLIENT_ID with the client ID provided in the pre-installation

5. Start project

   npm run start
   

6. Your site will be available at localhost:[PORT] where PORT is whatever value is set in your .env file.

Lecture branches

Note that branches in the repo named lecture/xxx correspond to course lectures.

It's not working!

Here are some common mistakes people make, check these before filing an issue:

• ENOENT: no such file or directory, open '.env'. You forgot to make a .env file. See step 3.
• EADDRINUSE :::3000. You already have another application using port 3000. Either end it, or change your port to something else in the .env file to resolve the conflict e.g. 3001
• Error: Request failed with status code 403. You didn't create an Imgur API key, or didn't paste it into your .env file. See pre-installation step 2.
• Ensure you have a version of Node >= 6.4

node -v

Sponsors

Support Vue.js Developers to get your logo here.

vuejs-poster-shop's Issues

Installation: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

Following the instructions I was getting an error running npm install. To proceed, I had to delete npm-shrinkwrap.json and then do the npm install. What is the advantage of keeping the shrinkwrap version in the repository? It seems it might be better for non-darwin users to simply remove that file. Peace -Anthony

Demo App is not working.

http://vuejs-poster-shop.vuejsdevelopers.com/

Leads to an Application Error.

index.js doesn't start up in either nodemon or node

Anthony,
I'm on Mac Sierra, and I'm running into the exception problem when running npm run start. Nodemon thinks the problem is in your index.js. I have already tried deleting the node_modules folder and reinstalling. In addition, running node ./index.js produces the same error message. My Webstorm syntax linter is flagging the same => in your code. I'm not sure if this is nodemon, node, or a problem with your code.

/Users/Stephen/WebstormProjects/vuejs-poster-shop/index.js:26 res.send(result.data.data.filter(item => !item.is_album && !item.nsfw && ^^ SyntaxError: Unexpected token => at exports.runInThisContext (vm.js:73:16) at Module._compile (module.js:443:25) at Object.Module._extensions..js (module.js:478:10) at Module.load (module.js:355:32) at Function.Module._load (module.js:310:12) at Function.Module.runMain (module.js:501:10) at startup (node.js:129:16) at node.js:814:3

Here is the nodemon dump.

`node: v0.12.11
nodemon: 1.11.0
command: node /Users/Stephen/WebstormProjects/vuejs-poster-shop/node_modules/.bin/nodemon --dump
cwd: /Users/Stephen/WebstormProjects/vuejs-poster-shop
OS: darwin x64

{ run: false,
system: { cwd: '/Users/Stephen/WebstormProjects/vuejs-poster-shop' },
required: false,
dirs: [ '/Users/Stephen/WebstormProjects/vuejs-poster-shop' ],
timeout: 1000,
options:
{ dump: true,
ignore:
[ '.git',
'.nyc_output',
'.sass-cache',
'bower_components',
'coverage',
'node_modules',
re: /.git|.nyc_output|.sass-cache|bower_components|coverage|node_modules/ ],
watch: [ '.', re: /.../ ],
ignoreRoot:
[ '.git',
'.nyc_output',
'.sass-cache',
'bower_components',
'coverage',
'node_modules' ],
restartable: 'rs',
colours: true,
execMap: { py: 'python', rb: 'ruby' },
stdin: true,
runOnChangeOnly: false,
verbose: false,
stdout: true,
execOptions:
{ script: 'index.js',
exec: 'node',
args: [],
scriptPosition: 0,
nodeArgs: undefined,
ext: 'js,json',
env: {},
execArgs: [] },
monitor:
[ '.',
'!/Users/Stephen/WebstormProjects/vuejs-poster-shop/.git//*',
'!.nyc_output',
'!.sass-cache',
'!bower_components',
'!coverage',
'!/Users/Stephen/WebstormProjects/vuejs-poster-shop/node_modules//*' ] },
signal: 'SIGUSR2',
load: [Function],
reset: [Function: reset],
lastStarted: 0,
loaded: [],
watchInterval: null,
command:
{ raw: { executable: 'node', args: [ 'index.js' ] },
string: 'node index.js' } }`

why is different with your demo page?

Where can i find complited source code?

Where can i find completed source code?

I have bought course in udemy.com, but i can't find completed source code.

why i can't find this source code?
(sorry for my English)

best regards Robert.

App Keeps Crashing

I forked the repo, cloned it to my local, installed all necessary modules ran it and it just crashes. Here's what I get after typing 'npm run start'

[email protected] start /Users/paul-macbook/GIT/udemy-vuejs-poster-store-app/vuejs-poster-shop
nodemon ./index.js --ignore node_modules/ -e js,html,css

[nodemon] 1.12.1
[nodemon] to restart at any time, enter rs
[nodemon] watching: .
[nodemon] starting node ./index.js
/Users/paul-macbook/GIT/udemy-vuejs-poster-store-app/vuejs-poster-shop/node_modules/reload/lib/reload.js:37
for (let conn of connections) {
^^^

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object. (/Users/paul-macbook/GIT/udemy-vuejs-poster-store-app/vuejs-poster-shop/index.js:38:3)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
[nodemon] app crashed - waiting for file changes before starting...

NPM module security vulnerabilities

I've just updated the repo to replace NPM packages in this repo which have security issues.

If you forked from this repo, you need to sync your fork. Here's a guide:

https://help.github.com/articles/syncing-a-fork/

With that done, run git fetch and git pull in your project directory to pull the changes locally. Then run npm install and the packages will be updated.

If you cloned this repo, run git fetch and git pull in your project directory to pull the changes locally. Then run npm install and the packages will be updated.