Create a New Rails 7.2 Project with Bootstrap Theme on a Newly Set Up WSL (in Minutes)

Setting up a new Rails 7.2 project with a Bootstrap theme on Windows Subsystem for Linux (WSL) involves several steps. Follow this guide to get your Rails application up and running quickly.

Prerequisites

1. Install WSL: If WSL isn't installed yet, follow Microsoft's documentation to set it up.
2. Install Ruby: Refer to Installing Ruby using rbenv on your WSL Ubuntu system for instructions on setting up Ruby.

Step 1: Install Rails 7.2

Rails is a powerful framework for web development. Install Rails 7.2 with:

gem install rails -v 7.2.0
rails -v

Step 2: Install Node.js and Yarn

For optimal JavaScript bundling, you need Node.js and Yarn.

1. Install nvm (Node Version Manager)

nvm allows you to manage multiple Node.js versions. Install nvm with:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

2. Load nvm into Your Shell

Add these lines to your shell configuration file (~/.bashrc, ~/.zshrc, etc.) to load nvm:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion

Reload the shell configuration:

source ~/.bashrc

3. Install Node.js

Install the latest Long Term Support (LTS) version of Node.js:

nvm install --lts

Verify the installation:

node -v
nvm --version

Set Node.js as the default version:

nvm alias default node

4. Install Yarn

Yarn is a package manager for JavaScript. Install it with:

curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update
sudo apt install -y yarn

Check the installed Yarn version:

yarn -v

Step 3: Create Your Rails Project

1. Navigate to Your Projects Directory

Create and navigate to a directory for your projects:

mkdir -p ~/projects
cd ~/projects

2. Create a New Rails Project

Generate a new Rails project with Bootstrap and esbuild:

rails new Awesomeness -T -c=bootstrap -j=esbuild

• Application Structure: Sets up the folder structure for your new Rails application.
• Skip Test Files (-T): Omits default test files and directories.
• Bootstrap Theme (-c=bootstrap): Installs and configures Bootstrap.
• esbuild (-j=esbuild): Configures esbuild as the JavaScript bundler.

3. Finalize Your Setup

• Navigate to Your Application Directory:

  cd Awesomeness

• Create Databases and Set Up Schema:

  rails db:create

• Start the Rails Server:

  bin/dev

• Verify the Application: Open http://localhost:3000 to see your new Rails app.

4. Create a Home Page

Generate a controller for the home page:

rails generate controller home index

• Set the Root Path:

Update config/routes.rb:

  # config/routes.rb
  Rails.application.routes.draw do
    root "home#index"
  end

• Add Content to Home Page:

Paste this Bootstrap Jumbotron example into app/views/home/index.html.erb:

  <div class="container my-5">
    <div class="p-5 text-center bg-body-tertiary rounded-3">
      <%= image_tag "https://miro.medium.com/v2/0*L0rGdSfS3W0kytcU", height: 200 %>
      <h1 class="text-body-emphasis">Awesomeness</h1>
      <p class="col-lg-8 mx-auto fs-5 text-muted">
        Creating a new Rails project on a newly set up WSL involves several steps, including installing necessary dependencies, setting up Ruby, and creating the Rails project.
      </p>
      <div class="d-inline-flex gap-2 mb-5">
        <button class="d-inline-flex align-items-center btn btn-danger btn-lg px-4 rounded-pill" type="button">
          Ruby on Rails
        </button>
        <button class="btn btn-outline-secondary btn-lg px-4 rounded-pill" type="button">
          DEV Community
        </button>
      </div>
    </div>
  </div>

• Reload the Page: Visit http://localhost:3000 to see your home page.

Additional Notes

• Restart Terminal: If gems don't install correctly, try restarting the terminal.
• Database Configuration: For PostgreSQL or MySQL, ensure they are installed and configured. Update the Gemfile and database.yml as needed.
• Git: Initialize a git repository:

  git init
  git add .
  git commit -m "Initial commit"

Note: Recent Rails versions initialize a git project automatically.

Run Rails Without Local Installation!

Thanks to recent improvements and new tools, setting up a Rails development environment is now effortless using Docker. By using the Rails DevContainer, you can avoid the hassle of manually installing Ruby, Rails, and other dependencies. This method ensures consistency across development environments, reduces setup time, and eliminates version conflicts. Learn more here: https://edgeguides.rubyonrails.org/getting_started_with_devcontainer.html

Summary

By following these steps, you'll have Rails 7.2 set up with Bootstrap on WSL, ready for development in minutes. Enjoy building your new Rails application!