Ruby on Rails in Visual Studio Codespaces

VSCoder, which recently started Rails, had the following problems.

-** Environment construction is troublesome **

Therefore, I was using Cloud9 on AWS, but this time I have the following problems

-** The editor on the browser is difficult to use and feels strange ** -** I want to use VS Code **

So I started working on the hot ** Visual Studio Codespaces ** and changed my life.

What is Visual Studio Codespaces?

In a nutshell, it's a ** development environment on the cloud **. Quoting from the Official Site, it has the following features.

--** A browser-based editor with a Git repository, extensions, and a built-in command line interface ** -** You can edit, run and debug your application from any device **

Also, the biggest feature for me is

-** Can also be developed with VSCode desktop application **

about it. Of course, you can also add extensions.

Create a Codespace

  1. Create an Azure account]( )To do.
  2. From the Visual Studio Codespaces site (, sign in with your Azure account.
  3. Create with Create Codespace. If you specify only Codespace Name, I think that the default is enough. If you have an existing repository, it will be cloned automatically when you specify it in Git Repository. (I tried to name it Railspace with Rails + Space)


VSCode will appear on your browser! !! !! image.png

You can also use the terminal. The workspace is created by a user named vsonline. image.png

Python is included by default. image.png

Open with VSCode in desktop app

  1. Install Visual Studio Code
  2. Install Visual Studio Codespaces with Extensions on the toolbar on the left side of the window image.png
  3. A Remote Explorer icon will be created. From there, sign in to the same account you created earlier. image.png
  4. The Codespace created earlier called Railspace will appear. Click the outlet mark to connect. image.png

This is the usual VScode! !! image.png

Ruby on Rails environment construction

Cloud9 has a Ruby and Rails environment by default, but unfortunately not in Visual Studio Codespaces ... Anyway, I will change the version even in Cloud9. All of the following is done in the VSCode terminal of the desktop app connected to Codespace. Since Codespaces uses a Linux environment, it is basically the same as building an environment on ordinary Linux.

Install rbenv

Refer to the README of here, which is also recommended on Ruby official website. I will install it in. rbenv allows you to manage multiple versions of Ruby.

First, clone the repository, add it to the path, and set it up.

$ git clone ~/.rbenv
$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
$ echo 'export PATH="$HOME/.rbenv/shims:$PATH"' >> ~/.bashrc
$ ~/.rbenv/bin/rbenv init

After that, you need to restart the terminal, so press the + button ** to open a new terminal **. You can check it by typing the following command, but rbenv install is not found.

$ curl -fsSL | bash


Follow the link given and the solution is below.

$ mkdir -p "$(rbenv root)"/plugins
$ git clone "$(rbenv root)"/plugins/ruby-build

If you check it again, this time it should be working.

$ curl -fsSL | bash


This completes rbenv. I was in the mountains here.

Install Ruby and Rails

You can check the major Ruby versions. If you want to see everything, you can do it with $ rbenv install --list-all.

$ rbenv install --list

After that, you can install your favorite version with $ rbenv install [version number].

$ rbenv install 2.7.1

After installation, specify which version of Ruby to use with the following command.

$ rbenv global 2.7.1

You have successfully installed Ruby! image.png

Next, install Rails.

$ gem install rails

You have Rails installed! image.png

Creating apps and accessing localhost

After that, you can develop as if it were a local environment. ** You can also use localhost **.

$ rails new SampleApp

After creating a Rails app with

$ rails s

Start the server with.

Click Remote Explorer> Forward Port ..., type 3000 and press Enter to connect to localhost: 3000, as shown in the image below. image.png

When you access http: // localhost: 3000 / in your browser ... image.png

that's all. As for Rails, it's been two months since I started, so there may be some points that I can't reach. We look forward to your corrections and comments.

Recommended Posts

Ruby on Rails in Visual Studio Codespaces
Ruby on Rails Japanese-English support i18n
Beginners create portfolio in Ruby on Rails
Ruby on Rails Elementary
Ruby on Rails basics
Ruby On Rails Association
Rails new in Ruby on Rails ~ Memorandum until deployment 2
Rails new in Ruby on Rails ~ Memorandum until deployment 1
(Ruby on Rails6) Creating data in a table
[Ruby on Rails] How to install Bootstrap in Rails
Ruby on rails learning record -2020.10.03
[Ruby on Rails] How to write enum in Japanese
[Ruby on Rails Tutorial] Error in the test in Chapter 3
Ruby on rails learning record -2020.10.04
[Ruby on Rails] Debug (binding.pry)
Ruby on rails learning record -2020.10.05
Ruby on rails learning record -2020.10.09
Ruby on Rails config configuration
Ruby on Rails basic learning ①
[Ruby on Rails] about has_secure_password
Ruby on rails learning record-2020.10.07 ②
[Ruby On Rails] How to reset DB in Heroku
[Ruby on Rails] Post image preview function in refile
Commentary on partial! --Ruby on Rails
Java in Visual Studio Code
Ruby on rails learning record-2020.10.07 ①
Cancel Ruby on Rails migration
Ruby on rails learning record -2020.10.06
Ruby on Rails validation summary
Ruby on Rails Basic Memorandum
Difficulties in building a Ruby on Rails environment (Windows 10) (SQLite3)
Definitely useful! Debug code for development in Ruby on Rails
[Ruby on Rails] Quickly display the page title in the browser
[Apple login] Sign in with Apple implementation procedure (Ruby on Rails)
How to display a graph in Ruby on Rails (LazyHighChart)
Apply CSS to a specific View in Ruby on Rails
Ruby on Rails Overview (Beginner Summary)
[Ruby on Rails] Read try (: [],: key)
[Ruby on Rails] yarn install --check-files
Ruby on Rails variable, constant summary
[Ruby on Rails] Introduced paging function
Progate Ruby on Rails5 Looking Back
How to use Ruby on Rails
(Ruby on Rails6) "Erase" posted content
[Ruby on Rails] CSV output function
Ruby on Rails 6.0 environment construction memo
[Ruby on Rails] What is Bcrypt?
[Ruby on Rails] Confirmation page creation
Ruby On Rails devise routing conflict
[Ruby on Rails] Comment function implementation
[Ruby on Rails] DM, chat function
[Ruby on Rails] Convenient helper method
Ruby methods often used in Rails
[Ruby on Rails] Stop "looping until ..."
Where I was interested in Progate's Ruby on Rails course [params]
(Ruby on Rails6) Creating a database and displaying it in a view
Erase N + 1 in acts_as_tree of tree structure Gem of Ruby on Rails
I summarized the flow until implementing simple_calendar in Ruby on Rails.
Things to remember and concepts in the Ruby on Rails tutorial
[Ruby on Rails] Introduction of initial data
[Ruby on Rails] Search function (not selected)