Skip to content

Latest commit

 

History

History
141 lines (114 loc) · 3.9 KB

08-1-W-Install-Vue.adoc

File metadata and controls

141 lines (114 loc) · 3.9 KB
Raw

Installation Instructions: Vue.js

Vue.js is a popular web frontend for building user interfacs in Javascript, which is considered to be easier to learn compared to React and Angular.

Install Vue.js

  1. Open a shell (or run cmd.exe in Windows)

  2. Check that you successfully installed node.js and npm e.g. by checking their versions:

    $ node -v
v8.10.0
$ npm -v
3.5.2

  3. Install the command line interface (CLI) for Vue: sudo npm install --global vue-cli

Generate initial Vue.js project content

  1. Navigate to your local Git repository of the Event Registration System

    $ cd ~/git/eventregistration

  1. Generate initial content as follows

    • Hit Enter after each line if not indicated otherwise

    • Detailed instructions at https://github.com/vuejs-templates/webpack and https://bootstrap-vue.js.org/docs

      $ vue init bootstrap-vue/webpack eventregistration-frontend
? Project name (EventRegistration-Frontend) EventRegistration-Frontend
? Project description (A Vue.js project) A Vue.js frontend for Event Registration App
? Author (varrodan <[email protected]>)
? Vue build (Use arrow keys):
> Runtime + Compiler
  Runtime-only
? Install vue-router (Y/n): Y
? Use ESLint to lint your code (Y/n): n
? Setup unit tests with Karma + Mocha (Y/n) n
? Setup e2e tests with Nightwatch (Y/n) Y

vue-cli · Generated "EventRegistration-Frontend".

  2. Now execute the following commands (one after the other)

    $ cd EventRegistration-Frontend
$ npm install
$ npm run dev

  3. As a result A sample web page should appear at http://localhost:8080/

  4. You can stop this development server by pressing Ctrl+C in the shell

Install additional dependencies

  1. Install JQuery and Axios (we will use these dependencies for issuing REST API calls):

npm install --save axios
npm install --save jquery

Setting up your development server

  1. We change the default port to 8087 (instead of the default 8080) and the default IP address by using a configuration file. The rationale behind this step is that other Tomcat servers may already listen at the default localhost:8080 port which may clash with our development server.

  2. Open ./config/index.js and add port: 8087 to module.exports (both build and dev part)

    • The development server is set up at localhost, i.e. http://127.0.0.1:8087

    • The production server is set up in accordance with the virtual machines

    • We also store the host IP address and port of the backend server in similar environment variables (backendHost and backendPort).

      module.exports = {
  build: {
    env: require('./prod.env'),
    host: 'eventregistration-frontend-123.herokuapp.com',
    port: 443,
    backendHost: 'eventregistration-backend-123.herokuapp.com',
    backendPort: 443,
    //...
  },
  dev: {
    env: require('./dev.env'),
    host: '127.0.0.1',
    port: 8087,
    backendHost: '127.0.0.1',
    backendPort: 8080,
    //...
  }
}

  3. Open ./build/dev-server.js, and change the uri assignment as follows:

    • The original line of code can be commented or deleted.

      //var uri = 'http://localhost:' + port
var host = config.dev.host
var uri = 'http://' + host + ':' + port

  4. Start again your development server by npm run dev. The same web application should now appear at http://127.0.0.1:8087/

  5. Stop the development server by Ctrl+C.

Commit your work to Github

  1. If everything works then commit your work to your Github repository.

  2. Notice that many libraries and files are omitted, which is intentional. Check the .gitignore file for details.