Setup

Welcome! 👋

In this course we start with a traditional Rails app and incrementally apply various aspects of Hotwire to improve the speed and responsiveness of each page.

So let's setup everything you need to run the starter app and follow along with the videos.

1. Download the Code Bundle

All the source code shown in the videos is available in the code bundle.

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

• starter-app contains a Rails application in the fishing subdirectory. That's our starting point!

• snapshots contains subdirectories matching the course modules. For example, the 04-turbo-drive directory contains a snapshot of the application code at the end of the video in Module 4.

• final-app contains the fully-Hotwired fishing app.

Now that you know your way around the code bundle, let's get things running...

2. Install Ruby

The Rails app requires Ruby 3.0.0 or newer. 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.

3. Install Node.js and Yarn

The Rails app also requires Node.js 14 or newer and Yarn. To check which versions you have installed, use:

node -v
yarn -v

If you're on a Mac and already using the Homebrew package manager, you can install the latest versions of Node.js and Yarn using:

brew install node yarn

Otherwise you can download a pre-built Node.js installer and install Yarn on any platform.

4. Install and Start Redis

Hotwire uses Action Cable under the hood to broadcast real-time updates over WebSockets. And by default, Action Cable is configured to use Redis as the publish/subscribe server.

Now, the starter app doesn't include real-time features so Redis isn't required to run the starter app. However, you'll need to have a Redis server running on your computer when we get to the broadcasting modules of the course. So we recommend setting up Redis now so it's not something you need to remember to do later. 😀

If you're on a Mac and using the Homebrew package manager, you can install and start the Redis server like so:

brew install redis
brew services restart redis

For Linux users, this should do the trick:

sudo apt-get install redis-server
sudo service redis-server restart

Windows users will need to install and start the Redis server in a Linux environment using the Windows Subsystem for Linux. Run the following commands in a Linux terminal:

sudo apt-add-repository ppa:redislabs/redis
sudo apt-get install redis-server
sudo service redis-server restart

5. Fire Up the Starter App

In the next video we'll walk through the pages of the starter app, so go ahead and get it running:

• First, change into the starter-app/fishing directory and setup the app:

  cd starter-app/fishing
  
  ruby bin/setup

• And now you're ready to start the Rails server.

  On Mac/Linux you can run the following command which uses foreman to start the server and rebuild the JS bundle when necessary:

  ./bin/dev

  On Windows you'll need to run the following commands in two separate Terminal sessions:

  rails server -p 3000

  yarn build:css
  yarn build --watch

• Then if you browse to http://localhost:3000 you should see all the baits. 🎣

• If you'd prefer to run the app in a Docker container, we have Docker files to make that easy.

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 hotwiring! ⚡️