Vue Speed Run — First Entry

A whole week of planning, but a pleasant pay-off at the end

I’m a bit late to the party, but about two weeks ago I heard that some people would be doing another speed run of the FCC projects using React. I decided I’d join in on the fun, using this as a way to get some practice with Vue.js, so I’ve finally gotten a bit of a start.

Following the advice of P1xt in this Medium article, I decided that my first step was to scaffold the whole thing and then get Travis CI set up to push my builds to Heroku. I decided to take this opportunity to really dig into some of those tools that I’ve just been skimming, most especially Webpack and Babel, along with using NPM scripts to run different commands.

A few days of Research

Up until now, I’ve been pretty much just using boilerplate or letting the Vue CLI get things set up for me. I knew that I was cheating myself and that at some point I would have to really dig in and learn it. I figured this speed run was a perfect time to do just that, so I started reading more about Babel, then moved on to Webpack.

After spending a few days reading over documentation, with a bit of experimentation added in here and there, I finally settled in on Sunday to get the skeleton of my app ready. Drawing heavy inspiration from Vue’s templates and other people’s existing project structures, I planned to create the server separately and then have the front-end interact with it. The goal was to have Vue-router handle most of the content, while the server would handle any API requests.

Getting Started on the Project

Creating the server was simple. I’ve had some practice with Node/Express recently, so getting the server up and running went very quickly. After that, it was just a matter of configuring ESLint and Babel. I made some scripts in the package.json file to build a new file with Babel and to run the server. Everything worked there, and it was up and running easily.

Getting the client-side set up was a bit more involved, but it went smoothly. Instead of using the Vue CLI, I built it up from scratch using the docs and peeking at their templates for reference. Here is where my Webpack reading really helped. I had a much better understanding of the entry, output, and loaders, and how they all fit together. After a while of fiddling around with different settings, I had my Vue app up with a very simple view. This was going really well! Now all I had to do was make my server serve up the Vue pages and everything would be great.

The Afternoon of Frustration

This is the point where it all went to hell. In my mind, everything looked good, but the routes weren’t working. My API route still worked on the server, but none of the Vue routes showed up. After doing a lot of reading and searching, I found that I wasn’t serving my static files correctly. I thought for sure that it would work after I fixed that, but sadly, I was still getting an error saying the static files couldn’t be found. Three or so hours of frustration later, I finally threw my hands up and asked for help in Chingu Central. After some questions and review, it turned out that all I needed to do was clear my cache and hard reload on Chrome (thanks very much to Kornil, P1xt, and Oxyrus for all the help!). It was working!

At this point, I decided to take a long break to eat dinner and watch a movie, then get everything hosted on Heroku and set up Travis CI before bed. This is where I hit my next stumbling block. My build wouldn’t succeed. It was infuriating. Finally, I realized that I had to make a more descriptive install script and add a postinstall script to rebuild my code afterward. Once I did those two things, everything succeeded and my (super simple) app was up and running. Heroku docs to the rescue!

Of course, then I tried to get Travis CI working and it also failed. For some reason, my credentials were failing at the point where the build was pushed to Heroku. It took some more reading time, but I finally figured out how to build the .travis.yml file from the Travis CLI tool. After that, everything worked out well. Now my project is set to deploy to Heroku after each push. Honestly, this feels like magic; it’s so unbelievably great to have these things automated.

All Worth it in the End

After a week of reading and a long day of fiddling around, all I really have to show for it is the skeleton of a project. However, this feels like time well-spent. I now have a much better grasp on the different tools, and if I choose to use boilerplate or a framework template, I’ll now have a much better understanding of the choices made, and can tweak and customize it to my specific needs. In the future, I’ll be able to set up a project much more quickly, and having this stuff set up from the start on every project is going to be so helpful.

So no projects done yet, and I have only the barest skeleton of an app up and running. However, I’m now in the very convenient position of having the groundwork laid so that I can just focus on churning out projects, and that’s really the point of the work I’ve done so far.

• The code can be found in this repository.
• The app is live up here.

Looking forward to getting some projects done this weekend!