From 9a6d3c950ebf863bb31afe249a549aeff1b3bb3c Mon Sep 17 00:00:00 2001 From: Sebastian Scholl Date: Sun, 24 Dec 2023 17:20:13 +0800 Subject: [PATCH] Update installation-importmaps.html.erb Initial sections of setup guide --- .../setup/installation-importmaps.html.erb | 46 +++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/app/content/pages/frameworks/rails/setup/installation-importmaps.html.erb b/app/content/pages/frameworks/rails/setup/installation-importmaps.html.erb index 8caaf515..b3a5859f 100644 --- a/app/content/pages/frameworks/rails/setup/installation-importmaps.html.erb +++ b/app/content/pages/frameworks/rails/setup/installation-importmaps.html.erb @@ -8,3 +8,49 @@ framework: rails <%= render Page::ContributeComponent.new(file: current_page.asset.path.path) %> <% end %> + +Hotwire is configured by default using import maps in the latest version of Rails 7+. This guide acknowledges and details the various files, gems, and configurations that allow this setup to work out of the box. + +## Getting Started + +Run the `rails new` command to create a fresh rails project. Once installed, open the Gemfile. Several gems are used to bundle all the required dependencies for the import maps + Hotwire setup. They are: + +```rb +# Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails] +gem "importmap-rails" + +# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev] +gem "turbo-rails" + +# Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev] +gem "stimulus-rails" +``` + +After successfully running `bundle install`, run `rails importmap:install` to add the required configurations and files to your project. + +```sh +$ rails importmap:install + apply /path_to/gems/importmap-rails-1.2.3/lib/install/install.rb + Add Importmap include tags in application layout + insert app/views/layouts/application.html.erb + Create application.js module as entrypoint + create app/javascript/application.js + Use vendor/javascript for downloaded pins + create vendor/javascript + create vendor/javascript/.keep + Ensure JavaScript files are in the Sprocket manifest + append app/assets/config/manifest.js + Configure importmap paths in config/importmap.rb + create config/importmap.rb + Copying binstub + create bin/importmap + run bundle install +``` + +## `javascript_importmap_tags` + +The install command will automatically update your `application.html.erb` file with an `<%= javascript_importmap_tags %>` ERB tag. The `