Match the React view

app/assets/stylesheets/hello.css

@@ -0,0 +1,44 @@
+body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+        sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+.App {
+    text-align: center;
+}
+
+.App-logo {
+    height: 40vmin;
+    pointer-events: none;
+}
+
+.App-header {
+    background-color: #282c34;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    color: white;
+}
+
+.App-link {
+    color: #61dafb;
+}
+
+.heart {
+    color: #ff0000;
+}
+
+.small {
+    font-size: 0.75rem;
+}

app/controllers/hello_codespaces_controller.rb

@@ -1,4 +0,0 @@
-class HelloCodespacesController < ApplicationController
-  def index
-  end
-end

app/controllers/hello_controller.rb

@@ -0,0 +1,4 @@
+class HelloController < ApplicationController
+  def index
+  end
+end

app/views/hello/index.html.erb

@@ -0,0 +1,11 @@
+<div class="App">
+    <header class="App-header">
+        <img src="Octocat.png" class="App-logo" alt="logo" />
+        <p>
+            GitHub Codespaces <span class="heart">♥️</span> Rails
+        </p>
+        <p class="small">
+            Edit <code>app/views/hello_codespaces/index.html.erb</code> and see changes live!
+        </p>
+    </header>
+</div>

app/views/hello_codespaces/index.html.erb

@@ -1,2 +0,0 @@
-<h1>HelloCodespaces#index</h1>
-<p>Find me in app/views/hello_codespaces/index.html.erb!!</p>

config/environments/development.rb

@@ -59,8 +59,9 @@ Rails.application.configure do
   # Suppress logger output for asset requests.
   config.assets.quiet = true
 
+  pf_domain = ENV['GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN']
   config.action_dispatch.default_headers = {
-    'X-Frame-Options' => 'ALLOW-FROM preview.app.github.dev'
+    'X-Frame-Options' => "ALLOW-FROM #{pf_domain}"
   }
 
   # Raises error for missing translations.
@@ -70,10 +71,11 @@ Rails.application.configure do
   # config.action_view.annotate_rendered_view_with_filenames = true
 
   # Uncomment if you wish to allow Action Cable access from any origin.
-  config.action_cable.disable_request_forgery_protection = true
+  # config.action_cable.disable_request_forgery_protection = true
 
   # Allow requests from our preview domain.
-  config.hosts << "#{ENV['CODESPACE_NAME']}-3000.preview.app.github.dev"
+  pf_host = "#{ENV['CODESPACE_NAME']}-3000.#{pf_domain}"
+  config.hosts << pf_host
 
-  # config.action_cable.allowed_request_origins = ["#{ENV['CODESPACE_NAME']}-3000.preview.app.github.dev"]
+  config.action_cable.allowed_request_origins = ["https://#{pf_host}"]
 end

config/routes.rb

@@ -1,3 +1,3 @@
 Rails.application.routes.draw do
-  root "hello_codespaces#index"
+  root "hello#index"
 end

test/controllers/hello_codespaces_controller_test.rb

@@ -2,7 +2,7 @@ require "test_helper"
 
 class HelloCodespacesControllerTest < ActionDispatch::IntegrationTest
   test "should get index" do
-    get hello_codespaces_index_url
+    get "/"
     assert_response :success
   end
 end