The Pragmatic Studio
get this course sign in

Setup

Welcome!

Before we get started, let's set up your development environment so you can run the application.

1. Download the Code Bundle

Download the code bundle which contains all the source code shown in the videos.

After unzipping the downloaded file, you'll end up with a directory named pragstudio-unpacked-fishub-code. Inside that directory you'll find the following subdirectories:

  • fishub-vue is a Vue application that contains all the frontend code

  • fishub-api-rails is a Rails application that contains all the backend code

2. Install Node.js and NPM

The Vue CLI requires Node.js version 8.9 or later (8.11.0+ is recommended).

To check which version you have installed, use:

node --version

Up-to-date instructions for installing the latest version of Node.js on any operating system are available at https://nodejs.org. The pre-built installers also automatically install NPM, so there's no separate step.

Alternatively, if you're on a Mac and already using the Homebrew package manager, you can install the latest version of Node.js and NPM using

brew install node

3. Install Ruby

Rails requires Ruby 2.2.2 or later.

To check which version you have installed, use:

ruby -v

Up-to-date instructions for installing the latest version of Ruby on any operating system are available at ruby-lang.org.

4. Install the Vue.js Devtools

Throughout the course we use the Vue.js devtools for Chrome. If you prefer Firefox, you can download the Vue.js devtools Add-on.

5. Start the Backend Rails App

To start the backend fishub-api-rails app:

  • First, change into the fishub-api-rails directory and install the dependencies:

    cd fishub-api-rails
    
    bundle install
  • Then migrate the database and seed it with the sample data:

    rails db:migrate
    rails db:seed
  • And now you're ready to fire up the Rails server:

    bin/rails server

    Now you can browse to http://localhost:3000/baits to see all the baits in JSON format.

6. Start the Frontend Vue App

To start the frontend fishub-vue app:

  • In a separate terminal session, change into the fishub-vue directory and install the dependencies:

    cd fishub-vue
    
    npm install

    You may see some warnings, but it's nothing to worry about.

  • Then compile the app and serve it up:

    npm run serve

    Now if you browse to http://localhost:8080 you should see the single-page Vue app!

Up Next...

When you hit the big green button below, you'll go directly to the next video. Feel free to follow along with us in the video if you like, and don't be shy about pausing or rewinding to watch something again. After each video you'll find any relevant notes in the aptly-named "Notes" section.

Let's start unpacking! 🚀

All course material, including videos, slides, and source code, is copyrighted and licensed for individual use only. You may make copies for your own personal use (e.g. on your laptop, on your iPad, on your backup drive). However, you may not transfer ownership or share the material with other people. We make no guarantees that the source code is fit for any purpose. Course material may not be used to create training material, courses, books, and the like. Please support us by encouraging others to purchase their own copies. Thank you!

Copyright © 2005–2021, The Pragmatic Studio. All Rights Reserved.