The first step of coding is getting in a place where you can write and run code you wrote. To do so, you’ll need to install a few programs and configure a few accounts. While this sounds easy and you’ve probably installed other programs on your computer like Spotify, Excel or Photoshop, developer programs aren’t always the easiest to install.
Programs that developers use are generally only used by developers. And these programs all rely on each other in different ways. For example, a common program that web developers use is rbenv. The instructions to set it up are here, but those instructions likely won’t work for you if you haven’t installed a different program (called git) first. Confusing! How are you even supposed to get started!?
Getting the programs up and running on your computer isn’t always an easy task, but it needs to be done.
Luckily for us, there are tools out there called “Web IDEs,” which are basically like computers installed with all the programs you need so you don’t have to muddle through installing all the programs yourself when starting out. Experienced developers will often use these when dabbling with new programming languages, so getting comfortable with using them when you’re starting out is a solid move.
Here’s exactly how to set up and install a Cloud9 web development environment with Ruby on Rails, Postgres, Git and basically everything a web developer could want.
Create a few accounts
As developers, there are certain websites we’re going to want to use. Don’t worry too much about what they do now, just go ahead and create a few accounts. Both of these sites are free to start, but offer paid options, too. If you haven’t already, go to the following sites and sign up.
We’ll use these later.
Create a Cloud9 account
Sign up for a Cloud9 account at: http://c9.io. Once you sign in, you’ll be prompted to create a new workspace. A workspace is basically a coding environment. Let’s make a new one.
Cloud9 will then ask us for details about how we want to set up our environment. Basically, we need to name our workspace and tell it which programs to install. Enter a name (maybe something like ‘webdev’), select the “Custom” template and press the “Create workspace” button:
This will take you to a coding environment where you will have three main sections. You can open files from the file pane on the left. You can edit the file in the file editing pane on the right. And there is a terminal section at the bottom.
The terminal section at the bottom is a bit special. It allows us to run programs directly by running commands. The terminal window can also output text. For example, if you click on the blue box at the bottom and type “date” and press enter, your environment will tell you the current date.
Cool! We’re set up and all our programs are installed!
Connecting our accounts (GitHub and Heroku)
Remember how we had you create a couple of accounts earlier? Now we need to make it so our coding environment is able to access our accounts on these sites. Don’t worry too much about what this is doing right now, but make sure these steps run without any error messages.
This will prompt you for your Heroku username and password. Enter that here.
Cool. Heroku is connected.
Connecting GitHub is a little trickier than Heroku. To start, we need to be able to access our SSH key, which is basically a password file. Run this command to display the SSH key to the terminal window.
Copy the entire output (starts with “ssh-rsa” and ends with your email address) to your clipboard. For me on my environment, it looks like:
We need to tell GitHub this is what our password file looks like. To do so, log in to GitHub and follow GitHub’s instructions (note: we don’t need to use pbcopy like GitHub tells us to because we manually copied the password file to our clipboard in the previous step).
The last step for setting up git and GitHub is to tell git what our name and email address are. Run these commands, but make sure to provide your real name and email address inside the double quotes instead of the dummy data that we have here:
git config --global user.email "firstname.lastname@example.org"
And then run:
git config --global user.name "Your Name"
Set up the Postgres database
If you’re learning how to build web applications, the most common way to get it “live on the internet”— for example, to get a link so you can share it with other people— is to do it through heroku.com. Most likely, you’ll be using Heroku for your first apps, too.
Heroku uses a database called “postgres.” Because of this, getting Postgres installed and running in our environment is a good idea.
Running the same database as Heroku in our coding environment is generally considered a good idea. Many tutorials will have you use a different database when you’re coding on your own machine versus when it’s live on the internet. This is generally because it’s a bit easier to set up, but it’s a bad idea in the long run.
Using the same database across both generally makes it easier to do and this is called parity with a dev environment. Developers generally agree that it’s a good thing. Even though it can be kind of a pain now, let’s be responsible and set up Postgres to save us pain in the future.
Start the server up by running this command:
sudo service postgresql start
Sadly, our Postgres database is configured in a weird way.
Here are a bunch of black-magic commands that are super confusing. Don’t worry about the details of what they’re actually doing.
Run this command to jump into the back end of your database to run the commands:
sudo sudo -u postgres psql
Then, copy and paste this super bizarre stuff. Basically in a nutshell, this sets up our database and the password, and makes it so it’s storing data in the database in unicode, which is the most flexible character encoding, which Ruby on Rails will need it to be. Confused by this? That’s okay. Just copy this, and paste it in the terminal.
ALTER USER postgres WITH PASSWORD 'password';
UPDATE pg_database SET datistemplate = FALSE WHERE datname = 'template1';
DROP DATABASE template1;
CREATE DATABASE template1 WITH TEMPLATE = template0 ENCODING = 'UNICODE';
UPDATE pg_database SET datistemplate = TRUE WHERE datname = 'template1';
Then press CTRL+D.
Awesome! We just set up our Postgres database.
Create a new rails application
First, we’ll need to install the ruby on rails gem. Do that, by running this command:
gem install rails -v 5.0.1
Let’s test things out by creating a new rails application. To do so, run this command:
rails new myapp -d postgresql
This builds a ton of files and gives us what is like a “blank” rails app. This means we won’t have to start fresh with a blank slate. Instead, we can start with the standard starting files that this generates.
rails new indicates we’re building a new rails app.
myapp is the name of the app, and
-d postgresql sets the app up to connect to the Postgres database we built earlier.
Then, so you’re running commands on the app you just built, run this command:
Open up the file named
config/database.yml. This file tells our web application how we can talk to the database. You’ll need to make a couple quick adjustments to the file. Add these three lines of code to the file:
Then save the file. Be careful about indentation here. Each line needs to be indented exactly the same number of spaces as the line above it.
Create the database
Run this command to create the database:
The moment of truth: running the app
Finally, we are ready to start our application. In Cloud9, the following command allows us to start our web application:
rails s -b $IP -p $PORT
The terminal window where you just ran the rails server command will look like it runs for forever. That’s a good thing, since we want our server to be running all the time so we can see our web application in our browser all the time.
One thing you’ll notice is that the rails server command basically eats our dollar sign, so we can no longer run commands or do anything with this “web dev” terminal window.
Open a new terminal tab
Since we can’t use our original terminal window anymore, let’s always make sure to have a second, separate terminal window open. Press the plus button to create a new terminal window. You’ll want to have two terminal windows: one for the server, and one for running commands.
Then, in the new terminal tab that opened up, we can go to our application by running this command:
Preview your application
In the menu, click “Preview” in the top right to see your app running:
Or, go to:
And then you’ll see your app running: