johnpapa/heroes-vue

Tour of Heroes app written with Vue

Tour of Heroes

This project was created to help represent 4 fundamental apps, each written with Angular, React, Svelte, and Vue (respectively). The heroes and villains theme is used throughout the app.

by John Papa

Why

I love JavaScript and the Web! One of the most common questions I hear is "which framework is best?". I like to flip this around and ask you "which is best for you?". The best way to know this is to try it for yourself. I'll follow up with some articles on my experiences with these frameworks but in the meantime, please try it for yourself to gain your own experience with each.

Live Demos

Hosted in Azure

• Tour of Heroes with Angular
• Tour of Heroes with React
• Tour of Heroes with Svelte - coming soon!
• Tour of Heroes with Vue

Getting Started

1. Go to the folder where your preferred web framework is located, and open it's readme

Web Framework	Folder
Vue	vue-app

What's in the App

Each of these apps contain:

Each of the apps written in the various frameworks/libraries has been designed to have similar features. While consistency is key, I want these apps to be comparable, yet done in an way authentic to each respective framework.

Each project represents heroes and villains. The user can list them and edit them.

Here is a list of those features:

• Start from the official quick-start and CLI
• Client side routing
  • Three main routes Heroes, Villains, About
  • Handles an erroneous route, leading to a PageNotFound component
  • Active route is highlighted in the nav menu
  • Routing should use html5 mode, not hash routes
• API
  • JSON server as a backend
  • App served on one port which can access API on another port proxy or CORS)
  • HTTP - Uses most common client http libraries for each framework
• Styling
  • Bulma
  • SASS
  • Font Awesome
  • Same exact css in every app
• Editing - Heroes and Villains will be editable (add, update, delete)
• State/Store - Uses a store for state management
• Web development server handles fallback routing
• Generic components
  • Modal
  • Button Tool
  • Card
  • Header bar
  • List header
  • Nav bar
• Props in and emit events out
• Environment variable for the API location

Why Cypress?

Cypress.io makes it easy to run all three apps simultaneously in end to end tests, so you can watch the results while developing.

Why abstracted CSS?

The goal of the project was to show how each framework can be designed to create the same app. Each uses their own specific techniques in a way that is tuned to each framework. However the one caveat I wanted to achieve was to make sure all of them look the same. While I could have used specific styling for each with scoped and styled components, I chose to create a single global styles file that they all share. This allowed me to provide the same look and feel, run the same cypress tests, and focus more on the HTML and JavaScript/TypeScript.

Optional JSON Server

The app uses an API with Azure Functions by default. But you can setup a JSON server for a backend. This allows you to run the code without needing any database engines or cloud accounts. Enjoy!

Problems or Suggestions

Open an issue here

Thank You

Thank you to Sarah Drasner, Brian Holt, Chris Noring, Craig Shoemaker, and Ward Bell for providing input and reviewing the code in some of the repos for the Angular, React, Svelte, and Vue apps:

• heroes-angular
• heroes-react
• heroes-svelte
• heroes-vue

Resources

• VS Code
• Azure Free Trial
• VS Code Extension for Node on Azure
• VS Code Extension Marketplace
• VS Code - macOS keys
• VS Code - Windows keys

Debugging Resources

• Debugging Angular in VS Code
• Debugging React in VS Code
• Debugging Vue in VS Code

heroes-vue's Issues

The list dosnt show up!

Proxy error: Could not proxy request /api/heroes from localhost:9626 to http://localhost:5000/.
[1] See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

Tutorial?

Please could you share a step-by-step tutorial on how to carry out this project. It is very interesting.

Thanks

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

Cannot find module 'vue-loader-v16/package.json'

Hi, I've followed your "Getting Started" steps, but I'm getting the following error when I run "npm run serve":

PS C:\build\heroes-vue\vue-app> npm run serve

> [email protected] serve C:\build\heroes-vue\vue-app
> vue-cli-service serve

 INFO  Starting development server...
 ERROR  Error: Cannot find module 'vue-loader-v16/package.json'
Require stack:
- C:\build\heroes-vue\vue-app\node_modules\@vue\cli-service\lib\config\base.js
- C:\build\heroes-vue\vue-app\node_modules\@vue\cli-service\lib\Service.js
- C:\build\heroes-vue\vue-app\node_modules\@vue\cli-service\bin\vue-cli-service.js
Error: Cannot find module 'vue-loader-v16/package.json'
Require stack:
- C:\build\heroes-vue\vue-app\node_modules\@vue\cli-service\lib\config\base.js
- C:\build\heroes-vue\vue-app\node_modules\@vue\cli-service\lib\Service.js
- C:\build\heroes-vue\vue-app\node_modules\@vue\cli-service\bin\vue-cli-service.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)
    at Function.Module._load (internal/modules/cjs/loader.js:687:27)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at C:\build\heroes-vue\vue-app\node_modules\@vue\cli-service\lib\config\base.js:114:23
    at C:\build\heroes-vue\vue-app\node_modules\@vue\cli-service\lib\Service.js:236:40
    at Array.forEach (<anonymous>)
    at Service.resolveChainableWebpackConfig (C:\build\heroes-vue\vue-app\node_modules\@vue\cli-service\lib\Service.js:236:26)
    at Service.resolveWebpackConfig (C:\build\heroes-vue\vue-app\node_modules\@vue\cli-service\lib\Service.js:240:48)
    at PluginAPI.resolveWebpackConfig (C:\build\heroes-vue\vue-app\node_modules\@vue\cli-service\lib\PluginAPI.js:132:25)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

I can workaround this by installing the "vue-loader-v16" package, and then the app is functional, but I'm just wondering if there's something I'm missing?

Unable to start up

C:\Users\User-PC\vue-learn\heroes-vue>npm --version
6.14.6

C:\Users\User-PC\vue-learn\heroes-vue>vue --version
@vue/cli 4.5.3

C:\Users\User-PC\vue-learn\heroes-vue>node --version
v12.18.3

C:\Users\User-PC\vue-learn\heroes-vue>npm install

npm WARN [email protected] requires a peer of json-server@^0.15 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

audited 1718 packages in 20.62s

48 packages are looking for funding
  run `npm fund` for details

found 416 vulnerabilities (397 low, 4 moderate, 15 high)
  run `npm audit fix` to fix them, or `npm audit` for details

---

C:\Users\User-PC\vue-learn\heroes-vue>npm run quick

> [email protected] quick C:\Users\User-PC\vue-learn\heroes-vue
> concurrently "npm run backend" "npm run serve"

[1]
[1] > [email protected] serve C:\Users\User-PC\vue-learn\heroes-vue
[1] > vue-cli-service serve
.....

[1] <s> [webpack.Progress] 95% emitting
[1] <s> [webpack.Progress] 95% emitting HtmlWebpackPlugin
[1] <s> [webpack.Progress] 95% emitting CopyPlugin
[1] <s> [webpack.Progress] 98% after emitting
[1] <s> [webpack.Progress] 98% after emitting CopyPlugin
[1]  ERROR  Failed to compile with 1 errors07:32:42
[1]
[1]  error  in ./src/main.js
[1]
[1] Module build failed (from ./node_modules/babel-loader/lib/index.js):
[1] Error: [BABEL] C:\Users\User-PC\vue-learn\heroes-vue\src\main.js: Cannot find module '@babel/compat-data/corejs3-shipped-proposals'
[1] Require stack:
[1] - C:\Users\User-PC\vue-learn\heroes-vue\node_modules\@babel\preset-env\lib\polyfills\corejs3\usage-plugin.js
[1] - C:\Users\User-PC\vue-learn\heroes-vue\node_modules\@babel\preset-env\lib\index.js
[1] - C:\Users\User-PC\vue-learn\heroes-vue\node_modules\@vue\babel-preset-app\index.js
[1] - C:\Users\User-PC\vue-learn\heroes-vue\node_modules\@vue\cli-plugin-babel\preset.js
[1] - C:\Users\User-PC\vue-learn\heroes-vue\node_modules\@babel\core\lib\config\files\plugins.js
[1] - C:\Users\User-PC\vue-learn\heroes-vue\node_modules\@babel\core\lib\config\files\index.js
[1] - C:\Users\User-PC\vue-learn\heroes-vue\node_modules\@babel\core\lib\index.js
[1] - C:\Users\User-PC\vue-learn\heroes-vue\node_modules\@vue\cli-plugin-babel\index.js
[1] - C:\Users\User-PC\vue-learn\heroes-vue\node_modules\@vue\cli-service\lib\Service.js
[1] - C:\Users\User-PC\vue-learn\heroes-vue\node_modules\@vue\cli-service\bin\vue-cli-service.js (While processing: "C:\\Users\\User-PC\\vue-learn\\heroes-vue\\node_modules\\@vue\\cli-plugin-babel\\preset.js")
[1]     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15)
[1]     at Function.Module._load (internal/modules/cjs/loader.js:841:27)
[1]     at Module.require (internal/modules/cjs/loader.js:1025:19)
[1]     at require (internal/modules/cjs/helpers.js:72:18)
[1]     at Object.<anonymous> (C:\Users\User-PC\vue-learn\heroes-vue\node_modules\@babel\preset-env\lib\polyfills\corejs3\usage-plugin.js:10:55)
[1]     at Module._compile (internal/modules/cjs/loader.js:1137:30)
[1]     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
[1]     at Module.load (internal/modules/cjs/loader.js:985:32)
[1]     at Function.Module._load (internal/modules/cjs/loader.js:878:14)
[1]     at Module.require (internal/modules/cjs/loader.js:1025:19)
[1]     at require (internal/modules/cjs/helpers.js:72:18)
[1]     at Object.<anonymous> (C:\Users\User-PC\vue-learn\heroes-vue\node_modules\@babel\preset-env\lib\index.js:29:44)
[1]     at Module._compile (internal/modules/cjs/loader.js:1137:30)
[1]     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
[1]     at Module.load (internal/modules/cjs/loader.js:985:32)
[1]     at Function.Module._load (internal/modules/cjs/loader.js:878:14)
[1] <s> [webpack.Progress] 100%
[1]
[1]
[1]  @ multi (webpack)-dev-server/client?http://192.168.0.108:9626/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
[1]

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.