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.