Client Side Development

Lecture Notes

Build a Vue App using the Vue CLI

Create the Default Vue App

Start VSC and open the csci432 workspace.  Next, open the terminal in VSC.

In the terminal, change your working directory to your projects directory, then enter vue create followed by the name of the new app.  Let’s call the app app1.

vue create app1

The Vue CLI will diplay a number of prompts.  Answer the prompts as follows.

Please pick a preset:

  • Arrow down to Manually select features and press enter.

Check the features needed for your project:

  • Arrow down to Linter / Formatter and press the space bar (to turn it off), then press enter.

Choose a version of Vue.js that you want to start the project with:

  • Keep 3.x and press enter.

Where do you prefer placing config for Babel, ESLint, etc.?

  • Keep In dedicated config files and press enter.

Save this as a preset for future projects?

  • Enter y and press enter.
  • Enter Basic App and press enter.

Browse the Project Files

The Vue CLI created various directories and files; all the files necessary for the one page default Vue app.  The directory structure looks as follows:

node_modules
public
src
    assets
    components

The node_modules directory contains modules (libraries) that Vue uses to build a Vue app.

The public directory contains static files that are used as is in the final distributed app.

The src directory contains the app’s source code.   The assets directory contains files (e.g. images) that are used in components.  The components directory contains Vue components which are reusable custom elements that can be inserted into the web app.  Each component consist of a segment of html code surrounded by <template> tags, JavaScript code that controls the elements in the template, and css code that stylizes the elements in the template.

Three source code files that tie the app together are public/index.html, src/App.js, and src/main.js.

  • The public/index.html file is a simple web page that has a div whose id is “app”.
  • The src/App.js file contains the primary Vue component named App.
  • The src/main.js file mounts the App component into the div in public/index.html whose id is “app”.

Build the App and View it with Live Server

Let’s first change the working directory to the projects/app1 directory.

When developing an app, we’ll build the app and test it locally using the server provided by the Live Server extension.  To build the app for testing we run the following command.

npm run serve

When completed, a local url will be displayed (http://localhost:8080/).  If you hover over the url, a link will appear, and if you click on the link, your browser will load the app using Live Server.

The default Vue app is a simple single page Vue app that displays a bunch of links.

Build the App for Distribution

Once you’re satisfied that your app is working properly, you can build the app for distribution and push the distribution code to GitHub.

First, terminate Live Server by pressing ctrl + c in the terminal.

Now, since we are hosting the app in public_html, let’s stay organized and create a subdirectory in public_html named app1.  This is where we’ll put the distribution code.

First change your working directory to the public_html directory, then create the new subdirectory.

cd ../../public_html 
mkdir app1

Next, we need to edit vue.config.js.  Vue is expecting that the app will be placed in the root directory of your web server.  Since we are putting the app in public_html/app1 we need to let Vue know this.  Open vue.config.js and edit it so that it reads as follows.  The new statement you’ll be adding uses the ?: operator to set process.env.NODE_ENV to either '/' (when testing locally), or to '/app1/' (when being distributed).

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: process.env.NODE_ENV === 'development'
    ? '/'
    : '/app1/'
})

To build the code for distribution, first change your working directory back to projects/app1 then issue the following npm command.

cd ../../projects/app1
npm run build

Vue will create a new directory named dist inside the projects/app1 directory.  It contains the following directories and files.

css
js
favicon.ico
index.html

Drag all of the directories and files that are in dist into public_html/app1.

Create a Link to the New App

In public_html/index.html add an anchor element (<a>) that links to app1/index.html so that we can get to your app from your website’s home page.

<a href="app1/index.html">App 1</a>

Deploy the App and Verify

Change your working directory back to public_html  (where your git repo resides) and add index.html and the app1 directory to your git change set, commit the changes, and push them to github.

cd ../../public_html
git add index.html app1
git commit -m 'deploying app1'
git push origin main

Give GitHub a minute or two to update your Azure site, then visit your Azure site to verify that your site contains a link to your first Vue app and the app works.

 

© 2023, Eric.