Create the App

Notes & Exercises

Code Snapshot

A snapshot of the code at the end of the video is in the raffley/02-create-app directory of the code bundle.

Generator Help

To see all the options supported by the Phoenix application generator, run:

mix phx.new

Exclude Directories From VS Code

If you'd like to exclude the _build and deps directories from appearing in your VS Code Explorer, use the following VS Code settings:

"files.exclude": {
  "**/_build": true,
  "**/deps": true
}

Getting a Database Error?

If you see a database-related error when running mix ecto.create, it's likely a Postgres connection issue.

First check the database username and password values at the top of config/dev.exs. By default, Phoenix assumes that your PostgreSQL installation has a user named postgres with a password of postgres. If your setup is different, you'll need to adjust the database configuration in the config/dev.exs file.

Second, installing PostgreSQL typically starts the PostgreSQL server daemon. 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.

Exercise

To lock in what you learned in the videos, in the exercises you'll incrementally build a different Phoenix app with similar features for responding to real-time incidents around your neighborhood or community. You know, urgent things like a lost dog, a driver with a flat tire, or a neighbor in need. It'll be similar enough to the raffles application as to not be too challenging, but different enough to still tickle your brain. 🤔

In this first exercise, we'll get the incident management app up and running:

Create a new Phoenix app named heads_up:
```
mix phx.new heads_up
```
When prompted to fetch and install dependencies, answer Y.
Then change into the generated heads_up directory and create the development database using the default database configuration:
```
cd heads_up

mix ecto.create
```
Go ahead and copy in some CSS and images we've already cooked up that you'll use later on.

To do that, locate the prepared-files/heads_up directory of the code bundle. In that directory you'll see an app.css file. Copy it into the heads_up application's assets/css directory, overwriting the existing app.css file. Also copy all the prepared images files in the images directory to the heads_up application's priv/static/images directory.
Fire up the Phoenix server:
```
mix phx.server
```
Browse to http://localhost:4000 and you should see the Phoenix welcome page!
Finally, open the heads_up directory in your favorite editor and take a quick peek at the generated directories. Initially it may seem overwhelming, but don't sweat it: over time it will feel more and more like home. 🏠
As a bonus, you might want to run the heads_up and raffley applications concurrently. Since Phoenix apps are configured by default to run a web server on port 4000, you'll need to start the heads_up app on a different port. To do that, locate the following line in the config/dev.exs file:
```
http: [ip: {127, 0, 0, 1}, port: 4000],
```
You can either change the port to 4001, for example, or allow the port to be set with an environment variable and fallback to port 4000, like so:
```
http: [ip: {127, 0, 0, 1}, port: String.to_integer(System.get_env("PORT") || "4000")],
```
Then you can start the raffley application on port 4001 by running:
```
PORT=4001 mix phx.server
```

Solution

The solution for the exercise is in the heads_up/02-create-app directory of the code bundle.

How's Your Elixir Game?

If you're new to the Elixir programming language, learning Phoenix might feel like someone tied your shoelaces together and asked you play some hoops. 🏀 🤕

Imagine knowing Elixir so well you can drive to the basket and dunk! ⛹🏻 That's what you'll be able to do after taking our Elixir & OTP course. So before getting too far into Phoenix, we highly recommend joining us in the Elixir course to gain clarity and confidence with the language.

We start with the Elixir fundamentals and leave no stone unturned as we build a simple web server step-by-step from scratch. And the second half of the course is all about OTP, so it's like getting two courses in one. 🙌

We think you're gonna love it!

Go To Next Video →