Skip to content

Commit 72eb346

Browse files
giljrgiljr
authored
Update README.md
1 parent d4632d1 commit 72eb346

File tree

1 file changed

+174
-13
lines changed

1 file changed

+174
-13
lines changed

‎README.md

Lines changed: 174 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,185 @@
1-
# README
1+
# [Rails 8 Import Maps Tutorial](https://medium.com/jungletronics/mastering-import-maps-in-rails-8-5f6c32991aa8)
22

3-
This README would normally document whatever steps are necessary to get the
4-
application up and running.
3+
This repository demonstrates how to set up and use Import Maps in a Rails 8 application. Import Maps allow you to manage JavaScript dependencies natively in the browser without relying on package managers like Webpack or npm. This tutorial is based on the [How To Use Import Maps with Rails](https://gorails.com) guide.
54

6-
Things you may want to cover:
5+
---
76

8-
* Ruby version
7+
## Introduction
98

10-
* System dependencies
9+
Rails 8 introduces Import Maps as a modern way to manage JavaScript dependencies. This feature eliminates the need for complex bundlers, offering a simpler way to serve and manage JavaScript files directly from your Rails app.
1110

12-
* Configuration
11+
This tutorial walks you through:
1312

14-
* Database creation
13+
1. Setting up a Rails app with Import Maps.
14+
2. Integrating Import Maps with the Rails Asset Pipeline.
15+
3. Adding and managing JavaScript files using Import Maps.
1516

16-
* Database initialization
17+
---
1718

18-
* How to run the test suite
19+
## System Requirements
1920

20-
* Services (job queues, cache servers, search engines, etc.)
21+
- **Operating System**: Ubuntu 24.04 LTS
22+
- **Processor**: Intel® Core™ i7–9750H × 12
23+
- **RAM**: 8.0 GiB
24+
- **Rails Version**: 8.0.1
2125

22-
* Deployment instructions
26+
---
2327

24-
* ...
28+
## Steps to Follow
29+
30+
### 1. Create a New Rails Application
31+
32+
Run the following commands to set up your app:
33+
34+
```bash
35+
rails new importmap
36+
37+
cd importmap
38+
```
39+
rails g controller pages index
40+
41+
Set the root route in config/routes.rb:
42+
43+
root "pages#index"
44+
45+
Add a placeholder to app/views/pages/index.html.erb:
46+
47+
<h1>Import Map</h1>
48+
49+
Modify your layout in app/views/layouts/application.html.erb:
50+
51+
Comment out the default javascript_importmap_tags:
52+
53+
<%#= javascript_importmap_tags %>
54+
55+
2. Understand Import Maps
56+
57+
An Import Map is a browser-native feature that maps JavaScript module paths directly in the browser. It eliminates the need for bundlers by serving JavaScript directly from the app.
58+
59+
Example:
60+
```HTML
61+
<script type="importmap">
62+
{
63+
"imports": {
64+
"example": "/example.js",
65+
"hello": "/hello.js"
66+
}
67+
}
68+
</script>
69+
<script type="module">
70+
import "example";
71+
console.log("Import Map Example Loaded");
72+
</script>
73+
```
74+
3. Add JavaScript Files
75+
76+
Create JavaScript files under the public directory:
77+
78+
touch public/example.js public/hello.js
79+
80+
Add the following content:
81+
82+
example.js:
83+
84+
import "hello";
85+
console.log("Hello from example.js");
86+
87+
hello.js:
88+
89+
console.log("Hello from hello.js");
90+
91+
4. Enable Import Maps in Layout
92+
93+
Uncomment the javascript_importmap_tags line in
94+
95+
app/views/layouts/application.html.erb:
96+
97+
<%= javascript_importmap_tags %>
98+
99+
5. Move JavaScript Files to app/javascript
100+
101+
Transfer your files to the app/javascript directory:
102+
103+
mv public/example.js app/javascript/example.js
104+
mv public/hello.js app/javascript/hello.js
105+
106+
6. Pin JavaScript Files
107+
108+
Update config/importmap.rb:
109+
110+
pin "example", to: "example.js"
111+
pin "hello", to: "hello.js"
112+
113+
7. Import Modules in application.js
114+
115+
Update app/javascript/application.js:
116+
117+
import "example";
118+
import "hello";
119+
120+
8. Update index.html.erb for Production
121+
122+
Replace the placeholder in app/views/pages/index.html.erb:
123+
```HTML
124+
<h1>Import Map</h1>
125+
<script type="importmap">
126+
{
127+
"imports": {
128+
"example": "<%= path_to_asset 'example.js' %>",
129+
"hello": "<%= path_to_asset 'hello.js' %>"
130+
}
131+
}
132+
</script>
133+
<script type="module">
134+
import "example";
135+
console.log("Import Map Example Loaded");
136+
</script>
137+
```
138+
9. Run the Application
139+
140+
Start the Rails server:
141+
142+
rails s
143+
144+
Open the app in your browser, and inspect the scripts in the <head> section using the developer tools (Ctrl+Alt+I).
145+
146+
How It Works
147+
148+
Import Maps: Map JavaScript modules to their respective URLs.
149+
Preloading: Optimize performance by preloading JavaScript modules.
150+
Rails Asset Pipeline: Use asset fingerprinting for cache invalidation.
151+
152+
Key Features
153+
154+
Lightweight Dependency Management: Manage JavaScript files natively in the browser.
155+
Optimized Performance: Preload assets for faster loading.
156+
Integrated Workflow: Simplify frontend management with Rails 8.
157+
158+
Additional Notes
159+
160+
In production, Rails uses the Asset Pipeline to fingerprint JavaScript files. This ensures updated assets are loaded when the content changes.
161+
162+
Example:
163+
```HTML
164+
<script type="importmap">
165+
{
166+
"imports": {
167+
"example": "/assets/example-1293c9f1.js",
168+
"hello": "/assets/hello-af42800b.js"
169+
}
170+
}
171+
</script>
172+
<link rel="modulepreload" href="/assets/example-1293c9f1.js">
173+
<link rel="modulepreload" href="/assets/hello-af42800b.js">
174+
<script type="module">
175+
import "application";
176+
</script>
177+
```
178+
### References
179+
[How To Use Import Maps with Rails](https://gorails.com)
180+
181+
### License
182+
183+
[MIT](https://choosealicense.com/licenses/mit/)
184+
185+
Enjoy building your Rails app with Import Maps! 😍️

0 commit comments

Comments
 (0)