Building a Complete Web App

This exercise builds a complete web app that connects a separate back-end project (to send JSON data) to a front-end project (to receive and display the JSON data).

• Back-end: uses basic JavaScript modules and the package Express to respond to requests for specific URLs to act as a simple web server
• Front-end: uses the Vue CLI to allow for more cleanly writing web components as well as setting up, organizing, and finally transpiling our code for display in a browser

To setup, run, and manage both projects, we will use

• NodeJS: a program that runs JavaScript outside a browser (like the command line for local development and for servers for responding to URL requests)
• NPM: program that accesses a registry of shared JavaScript code packages, making it easy to include them, and any packages they depend on, in your code

We will go through the following steps to build a very basic web app:

• Front-end Project
  • Create and configure it using the Vue CLI
  • Editing and running it on a local self-updating Server
  • Deploying it to standard JavaScript
• Back-end Project
  • Create and configure it using NodeJS
  • Editing and running it on a (different) local self-updating Server
  • Connecting it to the front-end using a proxy

Once complete, you will get another chance to practice the process by updating a previous example into two separate back- and front-end projects.

Install Vue CLI and Vetur Plugin

Vue CLI is a command-line tool which generates a Vue project from a number of templates (we will use the default template for this course), providing you with a pre-configured starting point that you can build on, rather than starting everything from scratch. The directory structure it creates is the expected structure of a standard Vue project so you should not change the names of the folders and top-level files it creates since some tasks depend on those names (in this way, it is said to be opinionated and ESLint is said to very opinionated).

Node Package Manager, NPM, is installed when you install Node.js and provides access to its registry of JavaScript code packages using the file package.json to declare your project’s dependencies. Packages your code needs are saved in the project's folder node_modules so you do not need to change anything in that folder manually (and you can also delete it if necessary at some point because it can always be recreated automatically by NPM).

1. To get started, create a folder to hold the two different projects using your preferred tool (the File Explorer or the Terminal as shown below) and go into that new folder:

mkdir cli_links_lab
cd cli_links_lab

Note, at this point, you can open this empty folder as a separate project within VS Code and use its Terminal to complete the rest of the tasks since it will automatically open in the correct folder.

 

2. To work more easily with vue files in VS Code
• Install the Vetur plugin using the plugin sidebar (make sure it is the one by Pine Wu)

 

3. To complete this exercise you will need to work in a Terminal of your choice:
• Mac/Linux: built-in just search for the program Terminal
• Windows: provided with GIT as Git bash or you can download a Terminal app from Microsoft (and choose the Ubuntu option) or install the Windows Subsystem for Linux (WSL)
• Both: use VS Code's built-in Terminal window

 

4. To install the Vue CLI globally (so it is available for all your projects), you need to run the following command in your Terminal:
• Mac/Linux: sudo npm install -g @vue/cli
  This will prompt you to enter your local account password to authenticate the command, like when you install many apps for your computer (there are ways to avoid using sudo, but they are beyond what we can cover here, so only check it out if you have reasonable Terminal experience or already use Homebrew)
  In general, be very careful running commands using sudo, because it provides administrative access to your computer.
• Windows: npm install -g @vue/cli
Note, running this command will generate a LOT of output, including many warnings about deprecated packages, but that is okay.

Note, on a Mac you will also need to install Xcode if you have not already done so (in order to get its command-line tools). You will prompted when necessary when running the commands below, but it is a multi-Gigabyte download so best to do it before starting. You can do this through the App Store or in your Terminal with the command: xcode-select --install

Front-end Project

Creation and Configuration using the Vue CLI

In the overall project folder, use your Terminal to run the following commands:

1. vue create links_ui
   • Press ENTER to use the default option (Default ([Vue 2] babel, eslint)) which we will use for our projects in this course.
     
   • Running this command will again generate a LOT of output, possibly including some warnings, but that is okay.
     
   • It will also create a folder structure for your project populated with working code (likely will not need to modify the public/index.html or src/main.js files for most of your projects in this course):
     

 

2. cd links_ui
   • Basically, we are simply following the commands recommended at the end of creating the project to see the default site.
     
     

 

3. npm run serve
   • This starts a special local web server running to display your Vue projects.
     
   • To see the resulting page, click on the URL displayed or copy and paste it into Chrome (if it is not your default browser).
     
     

 

4. vue add bootstrap-vue
   • This adds the BootstrapVue components so they are accessible automatically within your project.
   • Press ENTER to use the default option (babel/polyfill) which we will use for our projects in this course.
     
   • You should see the font and links change automatically on the web page (without having to refresh the browser page)!
     
   • This step will add a plugins folder with code to add BootstrapVue to the global Vue instance:
     

 

5. Ctrl-C
   • This will stop the the local server running — we will run it from within VS Code's GUI for the rest of the lab.

Note, this process also created the file package-lock.json and added the folder node_modules (with 833 modules!) to your project. These were generated by the contents of the file package.json and should not be modified manually since any changes will likely be lost the next time new packages are installed.

Note, this process also makes this folder a GIT repository, but we will remove that since our projects will likely already be inside of a GIT repository:

rm -rf .git

Edit the Front-end Project in VS Code

Within the links_ui folder in VS Code, do the following:

1. Run the local server again, either using NPM Scripts → serve or opening package.json and pressing the Play button above the word scripts and choosing serve
   
2. Click on the URL displayed or copy and paste it into Chrome (if it is not your default browser) to see the resulting page (which should look exactly the same as before).
3. Make a change to the msg attribute to the HelloWorld component in the App.vue file and see it reflected as soon as you save!
4. Make a change to the template in the HelloWorld.vue file and see it reflected as soon as you save!
5. Make a change to the template in the HelloWorld.vue file to use a BootstrapVue component, like using b-list-group and b-list-group-item, and see it reflected as soon as you save!

Take as much time as you need to explore this basic starter project and understand how all the pieces in the src folder work together to deliver the page you see:

• public/index.html
• main.js
• App.vue
• components/HelloWorld.vue
• assets/logo.png

Deploy the Front-end Project

To turn this nice, manageable, code into unreadable (mini-fied), vanilla, JavaScript suitable for standard browsers, we need to build it:

1. Edit the file .gitignore to remove line /dist (so you can push the contents of this folder to Gitlab to submit your work)
   
2. Save this vue.config.js file into this links_ui folder to configure how links are resolved in the distributed website so it does not have to the only one and at the top-level.
3. Build the project, either using NPM Scripts → build or opening package.json and pressing the Play button above the word scripts and choosing build
4. Wait for a while ...
5. Open the newly created folder dist and run that index.html file (rather than the one in the folder public), either dragging it over to browser or selecting and choosing Run → Start Debugging → Chrome
   It should look the same as the one still running in the other window but without using Vue's special dev-server.

Note, you can open and look at the any of the files in the folder dist, but they will be minimized for the web and very hard to read and, since they are generated like the package files, you should not modify them.

In general, this dist/index.html file is the one you will link to publicly (such as on Gitlab) to represent your overall project.

---

Back-end Project

Now we will create a separate folder in the overall cli_links_lab project folder to hold the back-end project's files using your preferred tool (the File Explorer, VS Code, or the Terminal as shown below) and go into that new folder:

mkdir links_server
cd links_server

This will be a much simpler project so the structure and required packages will be correspondingly simpler as well.

Creation and Configuration Using NPM

In the newly created, empty, folder links_server use your Terminal to run the following commands:

1. npm init
   Press ENTER to answer the questions with the defaults (except your name!), including the final OK.
   
   

 

2. In VS Code, modify the newly created file package.json (not the front-end's version!) beyond the default set up for you to add the following to the scripts field:
   

   "start": "nodemon index.js",

   and the following package dependencies:

     "dependencies": {
       "express": "^4.17.1",
       "nodemon": "^2.0.7"
     }

   

 

3. npm install
   This will download a different set of packages that will be saved in this folder's node_modules folder (with 250 modules!)
   

Edit the Back-end Project in VS Code

Within the links_server folder in VS Code, do the following:

1. Save this index.js file into your links_server folder, which is the simplest Express server possible.
   
2. Run this different local server, either using NPM Scripts → serve or opening package.json and pressing the Play button above the word scripts and choosing serve
3. Click on the URL displayed or copy and paste it into Chrome (if it is not your default browser) to see the resulting page
   
   
4. Now modify your index.js file to match this version, which just adds a new get response that returns JSON instead of simple text (and creates a link for those that come only to the main page).
5. Refresh the page (to cause your server to respond with a new version of the page) and click on the link to see the returned JSON data.
   
   

Connecting the two projects using a proxy

Now we would like the front-end to display the Duke links given from the server instead of its hardcoded Vue links. We will make these changes in the front-end project's links_ui folder.

1. Modify the file vue.config.js to add the following field and restart both servers (Ctrl-C in each Terminal and then re-run each NPM Script):
   

   devServer: {
     proxy: {
       "^/api": {
         "target": "http://localhost:3000",
         changeOrigin: true
       }
     }
   }

2. Test that it is working by going to this link in your browser: http://127.0.0.1:8080/api/links.json
Note the port (8080) is the one for your front-end project, but the data shown is as it is coming from the back-end port (3000) — which it is because VS Code is connecting them behind the scenes.
   
3. Modify the file App.vue to add the following:
   • Add the data field (to hold the loaded links) and an implementation of the mounted() method (to fetch the links) using the proxied URL:
     

     data () {
       return {
         links: []
       };
     },
     async mounted () {
       const response = await fetch('api/links.json');
       this.links = await response.json();
     }

   • Add an attribute when creating the HelloWorld component to pass it the links data:
     

<HelloWorld msg="Welcome to my AWESOME Vue.js App" :links="links" />

4. Modify the file HelloWorld.vue in the following ways:
   • Add a field to accept the links as a prop:
     

   props: {
       msg: String,
       links: {
         type: Array,
         default: () => []
       }
   }

   • Replace one of the simple UL lists with a v-for to display the links instead:
     

   <b-list-group>
     <b-list-group-item
       v-for="(link, i) in links"
       :key="i"
     >
       <a :href="link.url" target="_blank" rel="noopener">{{ link.name }}</a>
     </b-list-group-item>
   </b-list-group>

5. When you go back to the main front-end page (using the back button) you should see that the links are now Duke links served from the back-end project!
   

Take as much time as you need to explore these connected projects to understand how all the pieces work together to deliver the page you see.

Deploy the Back-end Project

While the front-end can be easily hosted on any site (like Gitlab) because it is just returning existing files, the back-end cannot be because it needs a secure environment in which to run, so we will look at how to deploy and interact with the server (on a free service like Heroku) in a future lab.

More Practice

Once you have completed this first complete web app, practice making another one by modifying the Vue component Shopping Cart example so that the catalog JSON data is served by the back-end to a front-end written using Vue CLI components instead of browser based components.

To get started, study

• how the code is loaded in Vue so that your changes are focused on the App.vue and component files rather than the changing the default index.html and main.js files provided by Vue's CLI
• the changes between how Vue CLI components and browser based components are defined and used (especially importing/exporting) from the Whack-a-Mole example

Finally, since our servers are going to be fairly basic (for now, but they can do any non-interactive thing you have written so far in JavaScript), you should be able to simply replace the JavaScript data structure returned in this example with the one defined here.