Orange Wheel: Connecting Vue and Flask Routes

For this part, I used the tutorial Full-stack single page application with Vue.js and Flask by Oleg Agapov. I chose this tutorial because:

  • Separation of frontend and backend into separate directories.
  • Sets up the project to use vue-router with Flask.
  • Sets up the config file so that when static assets are bundled, the output directory is at the root directory level. As a result, if I cd into my project, the first layer is frontend, backend, and dist. Both the frontend and backend were configured to connect to the dist directory.

Some issues I came across with the tutorial:

  • Inside the backend/app/app.py, the static_folder and template_folder path are different because I placed my app.py at a layer deeper. In the tutorial, the paths were ./dist/static and ./dist. In my case, because my app.py is inside the project directory app, I had to change it to ../../dist/static and ../../dist so it will find the output directory dist.
  • The tutorial didn’t mentioned how the Vue components were rendered in the frontend/App.vue. The answer? The magical tag of <router-view>. This tag is what vue-router us as a marker for where to render the component corresponding to the current route. Initially, I was confused since the site kept rendering the helloWorld code I put in the App.vue no matter what route I put in. Then I added the magic tag of <router-view></router-view> inside of <template> tag. Boom! The components contents now appear!

I also came across another issues that is specific to my project: testing.

Here is the error:

[Vue warn]: Unknown custom element: – did you register the component correctly? For recursive components, make sure to provide the “name” option.

Fear not. The Vue Test Utils documentation has a page just for Vue Router: Using with Vue Router. Here is my test code afterward:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { shallowMount, createLocalVue } from '@vue/test-utils'
import Router from 'vue-router'
import App from '@/App'

const localVue = createLocalVue()
localVue.use(Router)

describe('App.vue', () => {
  it('renders Vue component App', () => {
    const wrapper = shallowMount(App, {
      localVue
    })
    expect(wrapper.isVueInstance()).toBe(true)
  })
})

Routing debugging took more than expected, so I will stop here and leave it as a separate post.


Orange Wheel: Unit Testing with Jest

Next up on my side project, Orange Wheel, frontend testing!

It’s been my goal since reading Test-Driven Development with Python by Harry J.W. Percival to get into the habit of setting up basic testing before I program contents. This time is no exception.
As mentioned before, I wanted to use Jest.
There are couple of things to focus on when looking for resources on frontend testing.

The Research

  • Use the official documentation: That is especially true for JavaScript’s testing frameworks – they all have excellent documentations. Vue, in addition, is famed for its documentation clarity. Official documentation tends to start with more bare bone installation instead of adding every optional packages in the universe that the writer personally likes, and it is always the most updated version of instruction.
  • Date of Publish: If you decide to use a tutorial, always try for one that is written within a year. The landscape of JavaScript is very fast changing, and the npm requirements changes equally as quick. If an outdated tutorial is used, error could occur and the debugging can get confusing, especially since there tends to be more packages involve with older technologies.
  • Read what the package or program you installed do: Just because a tutorial or documentation tells you to download a package, doesn’t mean you should blindly do it. If you come back to the project, you may have no idea what you did. That is not good if you are trying to explain your project, debug it, or replicate the process for another project. It’s also a good habit as a developer to have an idea of what your third-party package do for the sake of security.

In fact, during this week when I was suppose to work on my unit testing, I was asked to help out with the curriculum material on Enzyme testing for Techtonica. The course intended to use a Medium posting for an in-class exercise. I remember reading the post while looking at the documentation on Jest and Enzyme. There were references to previously required npm package installation and optional packages. As a result, in my slides, I made sure to address it. Following the Medium exercise steps wouldn’t harm the project, but new programming students should know that Enzyme is not that complicated and don’t require those packages or configurations. It would also lessen their confusion when they look at other tutorials and notice that those packages and configurations are not used.

The Installation & Config

To get Jest set up in Vue, there is this simple command:

npm install –save-dev jest @vue/test-utils vue-jest babel-jest

There are also some package.json configuration. In particular, to enable the use of @ as a reference for src folder, I have to add new property, “moduleNameMapper”, to package.json’s “jest” property.

The Reason

  • @vue/test-utils is needed for obvious reason – it’s the utility to enable testing in Vue! Needing to install jest goes without saying, of course.
  • This should be followed by adding “test”: “jest” to package.json file’s “scripts” property.
  • vue-jest is the preprocessor to enable import of single-file component (SFC) built by the Vue.js team.
  • babel-jest adds support for ES modules syntax. Without it, the import statement didn’t work in my case.

The Source

The detail of the installation and configuration are very nicely written in the docs of Vue Test Utils by the Vue.js team. Well-written office documentation rules!!! ✊

Planning & Setup for Frontend of Vue-Based Side Project, Orange Wheel

Time to continue on building my new side project, Orange Wheel! As mentioned in my last post, I have decided to go with plain Vue – no NativeScript or other mobile framework – and Python-based web scraper. Once I start setting up, there are several decision planning that I must do. Here are some of them:

Templates: Selecting a good Vue templates sets a good foundation and makes life easier for beginners. After some searches, I decided to go with one that use the PWA template. Their features can be read on their Github repos, but most are related to the fact that it was designed for a PWA site – read the Google developer docs on PWA here if you are not familiar with the term!

Unit Testing: The PWA template do actually have a possible built-in testing upon installation, which uses PhantomJS with Karma, Mocha, and karma-webpack. However, I have made a decision to use Jest prior to template selection, so I will give that a try and see what happens first.

Directory Structure: At first I just started with all the node modules and npm stuff in root directory like I usually do, but then while setting up, I realize that since I have Python as backend, I really should separate frontend and backend. Right now, in the root directory, there is are files (README and .gitignore) and 2 directories (frontend and backend). Hmm, I somehow lost .git while restructuring, so I will have to link the directory back to my Github repo later.

Icons: Dear god is there many icon images in the PWA template! I actually deleted it at first, not realizing that it was needed for a better PWA experience. I have to re-download them later (new lesson of the day: one can download a directory in Github with command svn export [Github link with “tree/master ” replaced by “trunk”] – well, as long svn is installed in the system in the first place anyway). However, I have to replace the default Vue icons with actual project-relevant icons eventually. So… I have to create an icon, export it in various file format and size? Work this inconvenient yet repetitive have to have a web tool. Let’s google… yep, a simple google search on PWA icons displays a bunch of web tool for this exact purpose. I am cover.

Well, that’s it for now. I still have to do the actual set up of Jest and icon creation. I also have to update my changes to my Github repo. After that, I will set up the backend.

Let’s Try To Build My Locator in NativeScript-Vue!

Building a locator with Mapbox without JS framework had worked out pretty well in my last post. This time, I decided to try it with a JS framework. I have been working with React for a while, so I decided to use a new framework this time -Vue, to be precise.

Since I wanted the app to be used while a bicyclist may be on the road, I wanted the app to work well with mobile. React have React Native. How about Vue? Lo and behold, NativeScript! They even have a tutorial: Include Feature-Rich Maps in a NativeScript-Vue App with Mapbox.

Things I noticed on my first run of the tutorial:

  • NativeScript installation required pod setup, which took forever but didn’t displayed progress bar or related message. I thought the installation got stuck and was quite confused. In the end,  command pod setup –verbose showed me that it was indeed setting up and not getting stuck.
  • The command vue init nativescript-vue/vue-cli-template set a MIT open-source license by default. Nice feature – I usually don’t really think about license when I am building a side project, so this was a good reminder.
  • The vue/devtools package was behind in its electron dependency update, so I got a npm audit alert. When I checked their Github issues, it seemed they were aware of it but haven’t gotten around to fixing it yet.
  • Like pod setup,the npm install also took a while. I downed an entire cup of coffee, and it was still loading! I don’t work with mobile app development framework a lot. Was that normal?
  • Although the tutorial was made only this July, there seemed to be quite a bit of changes for the vue template. For one thing, I saw a hook directory – wasn’t hook only out this or last month? Some changes related to the tutorial content:
    • Directory “src” is now “app“.
    • HelloWorld.vue is now App.vue
    • npm run watch:ios is not working…
    • … the vue template “vue-cli-template” went through some major changes. The one used in the tutorial is now legacy. I should had changed the command for initiating the template to “vue init nativescript-vue/vue-cli-template#legacy <directory-name>” instead. In the new template, instead of npm run watch:ios, the command tns run ios  –bundle should be use instead.

Sadly, after tns run ios –bundle, it tried to run the iPhone emulator in my Macbook, and I was reminded of the main reason why I don’t do much mobile development. My emulator has always been ridiculously slow and would even freeze my Macbook sometimes.

There was tns build ios –bundle, which build and run the code in NativeScript’s iPhone app, but that one also took forever. In fact, it’s still bundling right now as I am writing this post – and I would have to build it every time I want to see changes in this case.

I really just want to learn Vue, but I had spent over a day trying to set up and troubleshoot NativeScript issues. The tns run, tns build, and the various package download and setup took a lot of time. NativeScript isn’t my goal – Vue and Mapbox is. So for my next step, I will take a step back and re-focus on building a web app with Vue.