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
- Install WSL: If WSL isn’t installed yet, follow Microsoft’s documentation to set it up.
- 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:
class="container my-5">
class="p-5 text-center bg-body-tertiary rounded-3">
<%= image_tag "https://miro.medium.com/v2/0*L0rGdSfS3W0kytcU", height: 200 %>
class="text-body-emphasis">Awesomeness
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.
class="d-inline-flex gap-2 mb-5">
class="d-inline-flex align-items-center btn btn-danger btn-lg px-4 rounded-pill" type="button">
Ruby on Rails
class="btn btn-outline-secondary btn-lg px-4 rounded-pill" type="button">
DEV Community
