The first step of coding is getting in a place where you can write and run the 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 setup and install a CodeAnywhere 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.
- Create an account on GitHub.com
- Create an account on Heroku.com
We’ll use these later.
Create a CodeAnywhere account
Sign up for a CodeAnywhere account at: https://codeanywhere.com/signup.
Once you sign in, you will see a link to take you to your editor. Click that link.
Next, CodeAnywhere will prompt you to create a new container. A container is a self-contained coding environment that will provide you with a workspace to code in. Provide the contain a name. Search for the Firehose stack and click that option to select it.
Then press the CREATE button.
This will take you to a coding environment where you will have three main sections.
Right click the Web Development Environment and select the option for SSH Terminal to open a terminal window within a tab.
This will take you to a terminal window where you can run commands on your coding environment.
CodeAnywhere will allow you to create, edit and modify files too. For example, right click the “Web Development Environment” and choose the option to create a new file.
This will prompt you to enter a filename. For this example, enter the name of README.md and press ok.
Once you create the file it will allow you to read the contents of the file.
This shows the contents of a file, but it doesn’t mean you can’t interact with your terminal anymore. Click on the original tab for the SSH window and the command line will be returned. 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.
Connect Heroku
Next, we will need to log into our heroku account in this coding environment. This will prompt you for your Heroku email and password. Run the following command to start to initiate the login process, then enter your email and password when you’re prompted for it.
heroku login
Then run:
heroku keys:add
Cool. Heroku is connected.
Connect GitHub
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.
cat ~/.ssh/id_rsa.pub
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:
ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQC5AAIZsdUmNnY6AgJzgCT8…omglolhahaha@thefirehoseproject.com
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 "you@example.com"
And then run:
git config --global user.name "Your Name"
This environment is running automatically with a Postgres Database.
Since you grabbed the Firehose stack, this coding environment will work out of the box with a postgres database. To connect to our database (which we will do in future steps) the setup has the credentials of:
- username: postgres
- password: password
- host: localhost
Create a new rails application
Let’s test things out by creating a new rails application.
First, navigate into the workspace folder:
cd workspace
Then, to create the new project 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.
After running the rails new command you might not notice the new files it adds to your project in the file pane.
If you right-click the icon for your environment and press the “Refresh” option the file pane will be refreshed with the newly added files.
The 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:
cd myapp
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:
https://gist.github.com/kenmazaika/077bb791e6218d566fdb#file-database-yml-L22-L24
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:
rake db:create
The moment of truth: running the app
Finally, we are ready to start our application. In CodeAnywhere, the following command allows us to start our web application:
rails server
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:
cd workspace/myapp
Preview your application
In the menu, click the icon to run your app:
This will open a tab to preview the application:
But since our application is running on a different port, we’ll need to change the URL in the bar. Add :3000 to the end of the URL bar and hit enter to load the response that are in that port.
This allows us to preview our web application.
Things that are important to know about your environment.
That setup will work for you regardless of your computer setup. There are a couple of small adjustments you’ll need to make in the process of building the applications that the most tutorials will suggest. Here’s what you need to know:
- If you use this setup you will use CodeAnywhere’s IDE setup instead of a native text editor on your computer like sublime text.
- Instead of visiting your app using localhost, you will use the trick this article suggests to preview your app.
Overall, CodeAnywhere is a really great development environment, and in a lot of cases using that is a lot smoother than working with other alternative installation setups.