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-graphql-code. Inside that directory you'll find the following directories:

• getaways is the baseline version of the code we unpack in Modules 1-33 of the videos

• getaways-pagination is the baseline version plus the pagination code we add in Module 34

• getaways-phoenix-1.7-react-18-apollo-3 has the backend code updated for Phoenix 1.7 which doesn't require Node.js. Absinthe hasn't changed since filming the videos, so the backend GraphQL code is the same as in the getaways-pagination directory. The frontend code has been updated to use React 18 and Apollo Client 3.

Inside each of those directories you'll find the following subdirectories:

• backend is a Phoenix application that contains all the backend code

• frontend is a React application that contains all the frontend code

2. Install Elixir

The source code is based on Elixir 1.12, though any later version should also work.

To check which version you have installed, use

elixir --version

Up-to-date instructions for installing the latest version of Elixir on any operating system are available at http://elixir-lang.org/install.html.

Once you've installed Elixir, you also need to install the Hex package manager:

mix local.hex

If you already have Hex installed, you'll be asked if you want to upgrade Hex to the latest version.

3. Install Node.js

Phoenix requires Node.js version 14 or greater to process static assets.

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 Node.js using

brew install node

4. Install PostgreSQL

Phoenix configures applications to use a PostgreSQL database by default, and our Phoenix application follows suit. Version 9.4 or greater is required.

To check which version you have installed, use

psql --version

Up-to-date binary packages for a variety of operatings system are available at https://www.postgresql.org/download/.

For example, if you're on a Mac and already using the Homebrew package manager, you can install PostgreSQL using

brew install postgresql

5. Install the Chrome Developer Tools

You may want to go ahead and install the React Developer Tools and Apollo Client Devtools for Chrome. We use these tools in the frontend sections of the course.

6. Start the Backend Phoenix App

To start the backend Phoenix app:

1. First, change into the getaways/backend directory:

   cd getaways/backend

2. Next, install the Elixir package dependencies and compile the app:

   mix deps.get
   
   mix compile

   You may see some compilation warnings, but don't sweat it.

3. Then, unless you're running the code in the getaways-latest-phoenix directory, you'll need to install the standard Phoenix JavaScript assets:

   npm install --prefix assets

4. Next up, create the database, run all the migrations, and load the sample data:

   mix ecto.setup

   If you see an error, it's likely a PostgreSQL connection issue. Typically, installing PostgreSQL creates an "initial" database and starts the PostgreSQL server daemon running. However, depending on your operating system, you may need to start the server daemon manually. To do that, you may find the first steps or Archlinux wikis helpful. To see the PostgreSQL configuration that's being used, look at the bottom of the backend/config/dev.exs file for the database configuration details.

   If at any point you want to reset the database with a fresh copy of sample data, you can run

   mix ecto.reset

5. Now you're ready to fire up the Phoenix server:

   mix phx.server

6. And now if you browse to http://localhost:4000/graphiql, you should see the GraphiQL user interface where you can explore the GraphQL API.

   For example, paste the following GraphQL query into the left-hand pane:

   query {
     places {
       id
       slug
       name
       location
       description
     }
   }
   

   Then hit the Play button to run the query, and in the right-hand pane you should see data for all the places!

7. Start the Frontend React-Apollo App

To start the frontend React app:

1. In a separate terminal session, change into the getaways/frontend directory:

   cd getaways/frontend

2. Next, install the NPM package dependencies:

   npm install

   You'll see some warnings from external packages. It's nothing to worry about.

3. Now you're ready to start the development server:

   npm start

4. And now if you browse to http://localhost:3000/ you should see all the vacation places listed on the home page of the Getaways 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! 🚀