[pragmaticstudio] Unpacked: A Single-Page App with Vue and Rails

Раздел Backend Ruby on Rails
#1

Setup

Welcome!

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

1. Download the Code Bundle

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 “Footnotes” section.

Let’s start unpacking! :rocket: