Deploying the Todo app to the web

1905072

I decided to upload both versions of the Todo List app to a web server, first the enhanced HTML version, and then the CLI version from the Traversy crash course.

Deploying the enhanced plain HTML Todo app

This application was built with all referenced JavaScript code loaded from the local hard disk. So prior to uploading to our web server, I did some adjustments, mostly to the HTML file: I edited the <script> tags to load the files from web CDNs:

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <!-- <script src="http://wzrd.in/standalone/uuid%2Fv4@latest"></script> -->
  <script src="uuidv4latest.js"></script>

I had to upload uuidv4latest.js and reference it in the same server directory, as when I used the “standalone” URL, nothing happened when I wanted to submit a new item in the application: On the browser console, I saw an error that uuidv4() was not defined. As for the JS file I just changed the location of the PHP script, and within the PHP script the location of the SQLite database. The CSS remained mainly as it was before.

The app worked fine on the desktop using Firefox. But when I tested with Windows Phone 8.1, it didn’t work so fine in IE, UC Browser, Opera-Mini: Only the header area up to the menu bar showed and the menu items didn’t work as links. It was as if Vue wasn’t working on the Windows Phone browsers.

Then I used an Android phone to check the app at the website and it worked fine on three browsers tested—Chrome, Opera, Firefox.

Deploying the CLI Todo app

To deploy the “compiled” version of Traversy’s CLI app to the web, I just copied the files to a directory on the server, since it was built to work from wherever it was, whether root or not. And it worked in varying degrees on Windows Phone 8.1: Opera-Mini displayed the todo items, but adding a new item wasn’t possible. Delete didn’t work but marking item completed worked. Adding was possible on UC Browser but deleted item didn’t go off the screen immediately, until I tapped the screen. Marking item completed worked. And on IE: Everything worked fine. So making sure the code is browser-compatible is one good advantage of using Vue CLI to build an application.