webpacker 6.0.0.pre.2 → 6.0.0.rc.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.github/workflows/jest.yml +7 -15
- data/.github/workflows/js-lint.yml +7 -15
- data/.github/workflows/rubocop.yml +1 -1
- data/.github/workflows/ruby.yml +18 -40
- data/.node-version +1 -1
- data/.rubocop.yml +107 -1
- data/CHANGELOG.md +48 -9
- data/CONTRIBUTING.md +20 -1
- data/Gemfile.lock +107 -104
- data/README.md +387 -177
- data/config/README.md +3 -0
- data/config/webpacker.yml +1 -0
- data/docs/deployment.md +9 -29
- data/docs/developing_webpacker.md +29 -0
- data/docs/troubleshooting.md +61 -25
- data/docs/v6_upgrade.md +113 -0
- data/gemfiles/Gemfile-rails-edge +1 -1
- data/gemfiles/Gemfile-rails.6.1.x +12 -0
- data/lib/install/{javascript/packs/application.js → application.js} +2 -5
- data/lib/install/bin/webpack +4 -7
- data/lib/install/bin/yarn +18 -0
- data/lib/install/config/webpacker.yml +18 -17
- data/lib/install/package.json +15 -0
- data/lib/install/template.rb +50 -21
- data/lib/tasks/webpacker/binstubs.rake +2 -2
- data/lib/tasks/webpacker/check_node.rake +3 -0
- data/lib/tasks/webpacker/check_yarn.rake +4 -1
- data/lib/tasks/webpacker/clobber.rake +1 -1
- data/lib/tasks/webpacker/install.rake +2 -2
- data/lib/tasks/webpacker/verify_config.rake +14 -0
- data/lib/tasks/webpacker/verify_install.rake +1 -11
- data/lib/tasks/yarn.rake +38 -0
- data/lib/webpacker/commands.rb +21 -16
- data/lib/webpacker/compiler.rb +9 -3
- data/lib/webpacker/configuration.rb +19 -8
- data/lib/webpacker/dev_server.rb +6 -0
- data/lib/webpacker/dev_server_runner.rb +7 -2
- data/lib/webpacker/env.rb +5 -1
- data/lib/webpacker/helper.rb +26 -50
- data/lib/webpacker/instance.rb +4 -0
- data/lib/webpacker/manifest.rb +1 -2
- data/lib/webpacker/railtie.rb +8 -2
- data/lib/webpacker/runner.rb +1 -1
- data/lib/webpacker/version.rb +1 -1
- data/lib/webpacker/webpack_runner.rb +27 -6
- data/lib/webpacker.rb +1 -1
- data/package/__tests__/development.js +4 -10
- data/package/__tests__/env.js +8 -4
- data/package/__tests__/index.js +9 -0
- data/package/babel/preset.js +24 -14
- data/package/config.js +3 -3
- data/package/env.js +6 -3
- data/package/environments/__tests__/base.js +7 -7
- data/package/environments/base.js +25 -25
- data/package/environments/development.js +36 -35
- data/package/environments/production.js +28 -30
- data/package/index.js +9 -2
- data/package/inliningCss.js +7 -0
- data/package/rules/babel.js +1 -1
- data/package/rules/coffee.js +5 -5
- data/package/rules/erb.js +5 -3
- data/package/rules/file.js +5 -3
- data/package/rules/index.js +9 -17
- data/package/rules/less.js +14 -10
- data/package/rules/raw.js +5 -0
- data/package/rules/sass.js +12 -9
- data/package/rules/stylus.js +26 -0
- data/package/utils/get_style_rule.js +28 -30
- data/package/utils/helpers.js +25 -0
- data/package.json +25 -29
- data/test/command_test.rb +76 -0
- data/test/configuration_test.rb +3 -3
- data/test/dev_server_runner_test.rb +13 -2
- data/test/helper_test.rb +69 -61
- data/test/manifest_test.rb +16 -0
- data/test/mounted_app/test/dummy/config/webpacker.yml +4 -4
- data/test/test_app/app/{javascript/packs → packs/entrypoints}/application.js +1 -1
- data/test/test_app/config/initializers/inspect_autoload_paths.rb +1 -0
- data/test/test_app/config/webpacker.yml +4 -6
- data/test/test_app/config/webpacker_other_location.yml +79 -0
- data/test/test_app/public/packs/manifest.json +19 -5
- data/test/webpacker_test.rb +21 -0
- data/webpacker.gemspec +2 -2
- data/yarn.lock +2357 -3262
- metadata +34 -41
- data/docs/assets.md +0 -135
- data/docs/cloud9.md +0 -310
- data/docs/css.md +0 -303
- data/docs/docker.md +0 -68
- data/docs/engines.md +0 -213
- data/docs/env.md +0 -68
- data/docs/es6.md +0 -72
- data/docs/folder-structure.md +0 -66
- data/docs/integrations.md +0 -220
- data/docs/misc.md +0 -23
- data/docs/props.md +0 -187
- data/docs/react.md +0 -183
- data/docs/target.md +0 -22
- data/docs/testing.md +0 -147
- data/docs/typescript.md +0 -190
- data/docs/v4-upgrade.md +0 -142
- data/docs/webpack-dev-server.md +0 -94
- data/docs/webpack.md +0 -315
- data/docs/yarn.md +0 -23
- data/lib/install/examples/vue3/app.vue +0 -27
- data/lib/install/examples/vue3/hello_vue.js +0 -15
- data/lib/install/javascript/packs/application.css +0 -9
- data/package/babel/preset-react.js +0 -62
- data/package/rules/svg.js +0 -23
- /data/test/test_app/app/{javascript/packs → packs/entrypoints}/multi_entry.css +0 -0
- /data/test/test_app/app/{javascript/packs → packs/entrypoints}/multi_entry.js +0 -0
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: webpacker
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 6.0.0.
|
|
4
|
+
version: 6.0.0.rc.6
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- David Heinemeier Hansson
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date:
|
|
12
|
+
date: 2021-11-05 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: activesupport
|
|
@@ -85,16 +85,16 @@ dependencies:
|
|
|
85
85
|
name: rubocop
|
|
86
86
|
requirement: !ruby/object:Gem::Requirement
|
|
87
87
|
requirements:
|
|
88
|
-
- -
|
|
88
|
+
- - ">="
|
|
89
89
|
- !ruby/object:Gem::Version
|
|
90
|
-
version: 0
|
|
90
|
+
version: '0'
|
|
91
91
|
type: :development
|
|
92
92
|
prerelease: false
|
|
93
93
|
version_requirements: !ruby/object:Gem::Requirement
|
|
94
94
|
requirements:
|
|
95
|
-
- -
|
|
95
|
+
- - ">="
|
|
96
96
|
- !ruby/object:Gem::Version
|
|
97
|
-
version: 0
|
|
97
|
+
version: '0'
|
|
98
98
|
- !ruby/object:Gem::Dependency
|
|
99
99
|
name: rubocop-performance
|
|
100
100
|
requirement: !ruby/object:Gem::Requirement
|
|
@@ -133,42 +133,27 @@ files:
|
|
|
133
133
|
- MIT-LICENSE
|
|
134
134
|
- README.md
|
|
135
135
|
- Rakefile
|
|
136
|
-
-
|
|
137
|
-
-
|
|
138
|
-
- docs/css.md
|
|
136
|
+
- config/README.md
|
|
137
|
+
- config/webpacker.yml
|
|
139
138
|
- docs/deployment.md
|
|
140
|
-
- docs/
|
|
141
|
-
- docs/engines.md
|
|
142
|
-
- docs/env.md
|
|
143
|
-
- docs/es6.md
|
|
144
|
-
- docs/folder-structure.md
|
|
145
|
-
- docs/integrations.md
|
|
146
|
-
- docs/misc.md
|
|
147
|
-
- docs/props.md
|
|
148
|
-
- docs/react.md
|
|
149
|
-
- docs/target.md
|
|
150
|
-
- docs/testing.md
|
|
139
|
+
- docs/developing_webpacker.md
|
|
151
140
|
- docs/troubleshooting.md
|
|
152
|
-
- docs/
|
|
153
|
-
- docs/v4-upgrade.md
|
|
154
|
-
- docs/webpack-dev-server.md
|
|
155
|
-
- docs/webpack.md
|
|
156
|
-
- docs/yarn.md
|
|
141
|
+
- docs/v6_upgrade.md
|
|
157
142
|
- gemfiles/Gemfile-rails-edge
|
|
158
143
|
- gemfiles/Gemfile-rails.5.2.x
|
|
159
144
|
- gemfiles/Gemfile-rails.6.0.x
|
|
145
|
+
- gemfiles/Gemfile-rails.6.1.x
|
|
146
|
+
- lib/install/application.js
|
|
160
147
|
- lib/install/bin/webpack
|
|
161
148
|
- lib/install/bin/webpack-dev-server
|
|
149
|
+
- lib/install/bin/yarn
|
|
162
150
|
- lib/install/binstubs.rb
|
|
163
151
|
- lib/install/config/webpack/base.js
|
|
164
152
|
- lib/install/config/webpack/development.js
|
|
165
153
|
- lib/install/config/webpack/production.js
|
|
166
154
|
- lib/install/config/webpack/test.js
|
|
167
155
|
- lib/install/config/webpacker.yml
|
|
168
|
-
- lib/install/
|
|
169
|
-
- lib/install/examples/vue3/hello_vue.js
|
|
170
|
-
- lib/install/javascript/packs/application.css
|
|
171
|
-
- lib/install/javascript/packs/application.js
|
|
156
|
+
- lib/install/package.json
|
|
172
157
|
- lib/install/template.rb
|
|
173
158
|
- lib/tasks/webpacker.rake
|
|
174
159
|
- lib/tasks/webpacker/binstubs.rake
|
|
@@ -180,8 +165,10 @@ files:
|
|
|
180
165
|
- lib/tasks/webpacker/compile.rake
|
|
181
166
|
- lib/tasks/webpacker/info.rake
|
|
182
167
|
- lib/tasks/webpacker/install.rake
|
|
168
|
+
- lib/tasks/webpacker/verify_config.rake
|
|
183
169
|
- lib/tasks/webpacker/verify_install.rake
|
|
184
170
|
- lib/tasks/webpacker/yarn_install.rake
|
|
171
|
+
- lib/tasks/yarn.rake
|
|
185
172
|
- lib/webpacker.rb
|
|
186
173
|
- lib/webpacker/commands.rb
|
|
187
174
|
- lib/webpacker/compiler.rb
|
|
@@ -202,10 +189,10 @@ files:
|
|
|
202
189
|
- package/__tests__/dev_server.js
|
|
203
190
|
- package/__tests__/development.js
|
|
204
191
|
- package/__tests__/env.js
|
|
192
|
+
- package/__tests__/index.js
|
|
205
193
|
- package/__tests__/production.js
|
|
206
194
|
- package/__tests__/staging.js
|
|
207
195
|
- package/__tests__/test.js
|
|
208
|
-
- package/babel/preset-react.js
|
|
209
196
|
- package/babel/preset.js
|
|
210
197
|
- package/config.js
|
|
211
198
|
- package/configPath.js
|
|
@@ -217,6 +204,7 @@ files:
|
|
|
217
204
|
- package/environments/production.js
|
|
218
205
|
- package/environments/test.js
|
|
219
206
|
- package/index.js
|
|
207
|
+
- package/inliningCss.js
|
|
220
208
|
- package/rules/babel.js
|
|
221
209
|
- package/rules/coffee.js
|
|
222
210
|
- package/rules/css.js
|
|
@@ -224,8 +212,9 @@ files:
|
|
|
224
212
|
- package/rules/file.js
|
|
225
213
|
- package/rules/index.js
|
|
226
214
|
- package/rules/less.js
|
|
215
|
+
- package/rules/raw.js
|
|
227
216
|
- package/rules/sass.js
|
|
228
|
-
- package/rules/
|
|
217
|
+
- package/rules/stylus.js
|
|
229
218
|
- package/utils/get_style_rule.js
|
|
230
219
|
- package/utils/helpers.js
|
|
231
220
|
- test/command_test.rb
|
|
@@ -248,16 +237,18 @@ files:
|
|
|
248
237
|
- test/mounted_app/test/dummy/package.json
|
|
249
238
|
- test/rake_tasks_test.rb
|
|
250
239
|
- test/test_app/Rakefile
|
|
251
|
-
- test/test_app/app/
|
|
252
|
-
- test/test_app/app/
|
|
253
|
-
- test/test_app/app/
|
|
240
|
+
- test/test_app/app/packs/entrypoints/application.js
|
|
241
|
+
- test/test_app/app/packs/entrypoints/multi_entry.css
|
|
242
|
+
- test/test_app/app/packs/entrypoints/multi_entry.js
|
|
254
243
|
- test/test_app/bin/webpack
|
|
255
244
|
- test/test_app/bin/webpack-dev-server
|
|
256
245
|
- test/test_app/config.ru
|
|
257
246
|
- test/test_app/config/application.rb
|
|
258
247
|
- test/test_app/config/environment.rb
|
|
248
|
+
- test/test_app/config/initializers/inspect_autoload_paths.rb
|
|
259
249
|
- test/test_app/config/webpack/development.js
|
|
260
250
|
- test/test_app/config/webpacker.yml
|
|
251
|
+
- test/test_app/config/webpacker_other_location.yml
|
|
261
252
|
- test/test_app/config/webpacker_public_root.yml
|
|
262
253
|
- test/test_app/package.json
|
|
263
254
|
- test/test_app/public/packs/manifest.json
|
|
@@ -272,8 +263,8 @@ homepage: https://github.com/rails/webpacker
|
|
|
272
263
|
licenses:
|
|
273
264
|
- MIT
|
|
274
265
|
metadata:
|
|
275
|
-
source_code_uri: https://github.com/rails/webpacker/tree/v6.0.0.
|
|
276
|
-
changelog_uri: https://github.com/rails/webpacker/blob/v6.0.0.
|
|
266
|
+
source_code_uri: https://github.com/rails/webpacker/tree/v6.0.0.rc.6
|
|
267
|
+
changelog_uri: https://github.com/rails/webpacker/blob/v6.0.0.rc.6/CHANGELOG.md
|
|
277
268
|
post_install_message:
|
|
278
269
|
rdoc_options: []
|
|
279
270
|
require_paths:
|
|
@@ -282,14 +273,14 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
|
282
273
|
requirements:
|
|
283
274
|
- - ">="
|
|
284
275
|
- !ruby/object:Gem::Version
|
|
285
|
-
version: 2.
|
|
276
|
+
version: 2.7.0
|
|
286
277
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
287
278
|
requirements:
|
|
288
279
|
- - ">"
|
|
289
280
|
- !ruby/object:Gem::Version
|
|
290
281
|
version: 1.3.1
|
|
291
282
|
requirements: []
|
|
292
|
-
rubygems_version: 3.
|
|
283
|
+
rubygems_version: 3.2.22
|
|
293
284
|
signing_key:
|
|
294
285
|
specification_version: 4
|
|
295
286
|
summary: Use webpack to manage app-like JavaScript modules in Rails
|
|
@@ -314,16 +305,18 @@ test_files:
|
|
|
314
305
|
- test/mounted_app/test/dummy/package.json
|
|
315
306
|
- test/rake_tasks_test.rb
|
|
316
307
|
- test/test_app/Rakefile
|
|
317
|
-
- test/test_app/app/
|
|
318
|
-
- test/test_app/app/
|
|
319
|
-
- test/test_app/app/
|
|
308
|
+
- test/test_app/app/packs/entrypoints/application.js
|
|
309
|
+
- test/test_app/app/packs/entrypoints/multi_entry.css
|
|
310
|
+
- test/test_app/app/packs/entrypoints/multi_entry.js
|
|
320
311
|
- test/test_app/bin/webpack
|
|
321
312
|
- test/test_app/bin/webpack-dev-server
|
|
322
313
|
- test/test_app/config.ru
|
|
323
314
|
- test/test_app/config/application.rb
|
|
324
315
|
- test/test_app/config/environment.rb
|
|
316
|
+
- test/test_app/config/initializers/inspect_autoload_paths.rb
|
|
325
317
|
- test/test_app/config/webpack/development.js
|
|
326
318
|
- test/test_app/config/webpacker.yml
|
|
319
|
+
- test/test_app/config/webpacker_other_location.yml
|
|
327
320
|
- test/test_app/config/webpacker_public_root.yml
|
|
328
321
|
- test/test_app/package.json
|
|
329
322
|
- test/test_app/public/packs/manifest.json
|
data/docs/assets.md
DELETED
|
@@ -1,135 +0,0 @@
|
|
|
1
|
-
# Assets
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
Static assets like images and fonts support is enabled out-of-box
|
|
5
|
-
and you can link them into your JavaScript app code and have them
|
|
6
|
-
compiled automatically.
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
## Import from node modules
|
|
10
|
-
|
|
11
|
-
You can also import styles from `node_modules` using the following syntax.
|
|
12
|
-
Please note that your styles will always be extracted into `[pack_name].css`:
|
|
13
|
-
|
|
14
|
-
```sass
|
|
15
|
-
// app/javascript/styles.sass
|
|
16
|
-
// ~ to tell webpack that this is not a relative import:
|
|
17
|
-
|
|
18
|
-
@import '~@material/animation/mdc-animation'
|
|
19
|
-
@import '~bootstrap/dist/css/bootstrap'
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
```js
|
|
23
|
-
// Your main app pack
|
|
24
|
-
// app/javascript/packs/app.js
|
|
25
|
-
|
|
26
|
-
import '../styles'
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
```erb
|
|
30
|
-
<%# In your views %>
|
|
31
|
-
|
|
32
|
-
<%= javascript_pack_tag 'app' %>
|
|
33
|
-
<%= stylesheet_pack_tag 'app' %>
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
## Import from Sprockets using helpers
|
|
38
|
-
|
|
39
|
-
It's possible to link to assets that have been precompiled by Sprockets. Add the `.erb` extension to your JavaScript file, then you can use Sprockets' asset helpers:
|
|
40
|
-
|
|
41
|
-
```erb
|
|
42
|
-
<%# app/javascript/my_pack/example.js.erb %>
|
|
43
|
-
|
|
44
|
-
<% helpers = ActionController::Base.helpers %>
|
|
45
|
-
const railsImagePath = "<%= helpers.image_path('rails.png') %>"
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
This is enabled by the `rails-erb-loader` loader rule in `config/webpack/loaders/erb.js`.
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
## Using babel module resolver
|
|
52
|
-
|
|
53
|
-
You can also use [babel-plugin-module-resolver](https://github.com/tleunen/babel-plugin-module-resolver) to reference assets directly from `app/assets/**`
|
|
54
|
-
|
|
55
|
-
```bash
|
|
56
|
-
yarn add babel-plugin-module-resolver
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
Specify the plugin in your `babel.config.js` with the custom root or alias. Here's an example:
|
|
60
|
-
|
|
61
|
-
```js
|
|
62
|
-
{
|
|
63
|
-
plugins: [
|
|
64
|
-
[require("babel-plugin-module-resolver").default, {
|
|
65
|
-
"root": ["./app"],
|
|
66
|
-
"alias": {
|
|
67
|
-
"assets": "./assets"
|
|
68
|
-
}
|
|
69
|
-
}]
|
|
70
|
-
]
|
|
71
|
-
}
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
And then within your javascript app code:
|
|
75
|
-
|
|
76
|
-
```js
|
|
77
|
-
// Note: we don't have to do any ../../ jazz
|
|
78
|
-
|
|
79
|
-
import FooImage from 'assets/images/foo-image.png'
|
|
80
|
-
import 'assets/stylesheets/bar'
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
## Link in your Rails views
|
|
85
|
-
|
|
86
|
-
You can also link `js|images|styles|fonts` used within your js app in rails views
|
|
87
|
-
using `asset_pack_path`, `asset_pack_url`, `image_pack_path`, `image_pack_url` and
|
|
88
|
-
`image_pack_tag` helpers. These helpers are especially useful in cases where you
|
|
89
|
-
want to create a `<link rel="prefetch">` or `<img />` for an asset.
|
|
90
|
-
|
|
91
|
-
```yml
|
|
92
|
-
app/javascript:
|
|
93
|
-
- packs
|
|
94
|
-
- app.js
|
|
95
|
-
- images
|
|
96
|
-
- calendar.png
|
|
97
|
-
```
|
|
98
|
-
|
|
99
|
-
```js
|
|
100
|
-
// app/javascript/packs/app.js (or any of your packs)
|
|
101
|
-
|
|
102
|
-
// import all image files in a folder:
|
|
103
|
-
require.context('../images', true)
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
```erb
|
|
107
|
-
<%# Rails view, for example app/views/layouts/application.html.erb %>
|
|
108
|
-
|
|
109
|
-
<img src="<%= asset_pack_path 'media/images/calendar.png' %>" />
|
|
110
|
-
<% # => <img src="/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
|
|
111
|
-
|
|
112
|
-
<img src="<%= asset_pack_url 'media/images/calendar.png' %>" />
|
|
113
|
-
<% # => <img src="https://example.com/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
|
|
114
|
-
|
|
115
|
-
<img src="<%= image_pack_path 'media/images/calendar.png' %>" />
|
|
116
|
-
<% # => <img src="/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
|
|
117
|
-
|
|
118
|
-
<img src="<%= image_pack_url 'media/images/calendar.png' %>" />
|
|
119
|
-
<% # => <img src="https://example.com/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
|
|
120
|
-
|
|
121
|
-
<%= image_pack_tag 'media/images/calendar.png' %>
|
|
122
|
-
<% # => <img src="/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
|
|
123
|
-
|
|
124
|
-
<%# no path used in image helpers resolves to default 'images' folder: %>
|
|
125
|
-
<img src="<%= image_pack_path 'calendar.png' %>" />
|
|
126
|
-
<% # => <img src="/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
|
|
127
|
-
|
|
128
|
-
<img src="<%= image_pack_url 'calendar.png' %>" />
|
|
129
|
-
<% # => <img src="https://example.com/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
|
|
130
|
-
|
|
131
|
-
<%= image_pack_tag 'calendar.png' %>
|
|
132
|
-
<% # => <img src="/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
|
|
133
|
-
```
|
|
134
|
-
|
|
135
|
-
Note you need to add a `media/` prefix (not `/media/`) to any subfolder structure you might have in `app/javascript`. See more examples in the [tests](/test/helper_test.rb#L37).
|
data/docs/cloud9.md
DELETED
|
@@ -1,310 +0,0 @@
|
|
|
1
|
-
# Webpack dev server and Rails on Cloud9
|
|
2
|
-
|
|
3
|
-
**Please note that this article is particularly relevant when
|
|
4
|
-
migrating the [`webpacker`] gem from v3.0.1 to v3.0.2, as described in
|
|
5
|
-
the [below](#binstub-versions).**
|
|
6
|
-
|
|
7
|
-
[**`[Go to tl;dr]`**](#tldr)
|
|
8
|
-
|
|
9
|
-
## Contents
|
|
10
|
-
|
|
11
|
-
- [Context](#context)
|
|
12
|
-
- [Binstub versions](#binstub-versions)
|
|
13
|
-
- [Quick solution](#quick-solution)
|
|
14
|
-
- [Flexible solution](#flexible-solution)
|
|
15
|
-
- [Sources](#sources)
|
|
16
|
-
- [Versions](#versions)
|
|
17
|
-
- [tl;dr](#tldr)
|
|
18
|
-
|
|
19
|
-
## Context
|
|
20
|
-
|
|
21
|
-
This article describes how to properly configure
|
|
22
|
-
[`webpack-dev-server`] with [`webpacker`] gem on a [Cloud9] workspace.
|
|
23
|
-
After a preliminary remark about the proper binstub version of the
|
|
24
|
-
`./bin/webpack-dev-server` script, this article presents two ways to
|
|
25
|
-
tackle the task: a simple and [quick solution](#quick-solution), which
|
|
26
|
-
is sufficient if we work alone on a project, and a slightly more
|
|
27
|
-
involved but [flexible approach](#flexible-solution), that can be
|
|
28
|
-
useful when several people might work in the same codebase.
|
|
29
|
-
|
|
30
|
-
[Cloud9]: https://c9.io
|
|
31
|
-
[`webpack-dev-server`]: https://github.com/webpack/webpack-dev-server
|
|
32
|
-
[`webpacker`]: https://github.com/rails/webpacker
|
|
33
|
-
|
|
34
|
-
## Binstub versions
|
|
35
|
-
|
|
36
|
-
A lot of the confusion about the [`webpack-dev-server`] options and
|
|
37
|
-
why they might not be properly taken into account, might be due to an
|
|
38
|
-
outdated version of the `./bin/webpack-dev-server` script. The script
|
|
39
|
-
created by the `rails webpacker:install` task of the [`webpacker`] gem
|
|
40
|
-
v3.0.1 ([source][v3.0.1/lib/install/bin/webpack-dev-server.tt]) is not
|
|
41
|
-
compatible with how v3.0.2 (sic) of the gem handles the
|
|
42
|
-
[`webpack-dev-server`] option flags (see full list of
|
|
43
|
-
[versions](#versions) below), which logically expects the
|
|
44
|
-
corresponding [binstub version][#833] of the script
|
|
45
|
-
([source][v3.0.2/exe/webpack-dev-server]). So please make sure that
|
|
46
|
-
you are using the [correct binstub][v3.0.2/exe/webpack-dev-server]
|
|
47
|
-
(the same applies to [`./bin/webpack`][v3.0.2/exe/webpack]). To be
|
|
48
|
-
fair, the [changelog of v3.0.2] properly mentions the change:
|
|
49
|
-
|
|
50
|
-
> - Added: Binstubs [#833]
|
|
51
|
-
> - (...)
|
|
52
|
-
> - Removed: Inline CLI args for dev server binstub, use env variables
|
|
53
|
-
instead
|
|
54
|
-
|
|
55
|
-
[changelog of v3.0.2]: https://github.com/rails/webpacker/blob/v3.0.2/CHANGELOG.md#302---2017-10-04
|
|
56
|
-
[v3.0.1/lib/install/bin/webpack-dev-server.tt]: https://github.com/rails/webpacker/blob/v3.0.1/lib/install/bin/webpack-dev-server.tt
|
|
57
|
-
[v3.0.2/exe/webpack-dev-server]: https://github.com/rails/webpacker/blob/v3.0.2/exe/webpack-dev-server
|
|
58
|
-
[v3.0.2/exe/webpack]: https://github.com/rails/webpacker/blob/v3.0.2/exe/webpack
|
|
59
|
-
[#833]: https://github.com/rails/webpacker/pull/833/files
|
|
60
|
-
|
|
61
|
-
## Quick solution
|
|
62
|
-
|
|
63
|
-
If you are working alone, the easiest way to fix the configuration of
|
|
64
|
-
the [`webpack-dev-server`] is to modify the `development.dev_server`
|
|
65
|
-
entry of the `config/webpacker.yml` file.
|
|
66
|
-
|
|
67
|
-
### `config/webpacker.yml` file
|
|
68
|
-
|
|
69
|
-
The `development.dev_server` entry of the `config/webpacker.yml` file
|
|
70
|
-
has to be changed from the following default values:
|
|
71
|
-
|
|
72
|
-
```yaml
|
|
73
|
-
dev_server:
|
|
74
|
-
https: false
|
|
75
|
-
host: localhost
|
|
76
|
-
port: 3035
|
|
77
|
-
public: localhost:3035
|
|
78
|
-
hmr: false
|
|
79
|
-
# Inline should be set to true if using HMR
|
|
80
|
-
inline: true
|
|
81
|
-
overlay: true
|
|
82
|
-
disable_host_check: true
|
|
83
|
-
use_local_ip: false
|
|
84
|
-
```
|
|
85
|
-
|
|
86
|
-
into these custom configuration:
|
|
87
|
-
|
|
88
|
-
```yaml
|
|
89
|
-
dev_server:
|
|
90
|
-
https: true
|
|
91
|
-
host: localhost
|
|
92
|
-
port: 8082
|
|
93
|
-
public: your-workspace-name-yourusername.c9users.io:8082
|
|
94
|
-
hmr: false
|
|
95
|
-
inline: false
|
|
96
|
-
overlay: true
|
|
97
|
-
disable_host_check: true
|
|
98
|
-
use_local_ip: false
|
|
99
|
-
```
|
|
100
|
-
|
|
101
|
-
You can obtain the value `your-workspace-name-yourusername.c9users.io`
|
|
102
|
-
for your [Cloud9] workspace with `echo ${C9_HOSTNAME}`.
|
|
103
|
-
|
|
104
|
-
There are four main differences with the approaches found in the
|
|
105
|
-
mentioned [sources](#sources):
|
|
106
|
-
|
|
107
|
-
- Some solutions suggested to set the [`host`][devserver-host] option
|
|
108
|
-
to `your-workspace-name-yourusername.c9users.io`, which required to
|
|
109
|
-
add a line to the `/etc/hosts` file by running `echo "0.0.0.0
|
|
110
|
-
${C9_HOSTNAME}" | sudo tee -a /etc/hosts`. This was only necessary
|
|
111
|
-
due to restrictions in previous versions of [`webpacker`] and how
|
|
112
|
-
the value of the [`public`][devserver-public] setting was
|
|
113
|
-
calculated. Currently it is [no longer necessary][pr-comment-hosts]
|
|
114
|
-
to modify the `/etc/hosts` file because the [`host`][devserver-host]
|
|
115
|
-
setting can be kept as `localhost`.
|
|
116
|
-
|
|
117
|
-
[pr-comment-hosts]: https://github.com/rails/webpacker/pull/1033#pullrequestreview-78992024
|
|
118
|
-
|
|
119
|
-
- Some solutions stressed the need to set the
|
|
120
|
-
[`https`][devserver-https] option to `false` but this failed with
|
|
121
|
-
`net::ERR_ABORTED` in the browser console and raised the following
|
|
122
|
-
exception in the server when the client tried to get the
|
|
123
|
-
JavaScript sources:
|
|
124
|
-
|
|
125
|
-
```
|
|
126
|
-
#<OpenSSL::SSL::SSLError: SSL_connect SYSCALL returned=5 errno=0 state=unknown state>
|
|
127
|
-
```
|
|
128
|
-
|
|
129
|
-
Setting `https: true` removes the issue.
|
|
130
|
-
|
|
131
|
-
- By leaving the [`inline`][devserver-inline] option to the default
|
|
132
|
-
`false` value, the live compilation still works but the browser
|
|
133
|
-
console constantly reports the following error:
|
|
134
|
-
|
|
135
|
-
```
|
|
136
|
-
Failed to load https://your-workspace-name-yourusername.c9users.io:8082/sockjs-node/info?t=1511016561187: No 'Access-Control-Allow-Origin' header is present on the requested resource.
|
|
137
|
-
Origin 'https://your-workspace-name-yourusername.c9users.io' is therefore not allowed access. The response had HTTP status code 503.
|
|
138
|
-
```
|
|
139
|
-
|
|
140
|
-
Setting `inline: false` removes the issue.
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
- None of the solutions suggested to set the
|
|
144
|
-
[`public`][devserver-public] option in the `config/webpacker.yml`
|
|
145
|
-
file and some suggested to pass it to the `webpack-dev-server`
|
|
146
|
-
command line. By setting it in the configuration file we don't need
|
|
147
|
-
to care about it in the terminal.
|
|
148
|
-
|
|
149
|
-
[devserver-host]: https://webpack.js.org/configuration/dev-server/#devserver-host
|
|
150
|
-
[devserver-https]: https://webpack.js.org/configuration/dev-server/#devserver-https
|
|
151
|
-
[devserver-inline]: https://webpack.js.org/configuration/dev-server/#devserver-inline
|
|
152
|
-
[devserver-public]: https://webpack.js.org/configuration/dev-server/#devserver-public
|
|
153
|
-
|
|
154
|
-
With this configuration, running as usual `./bin/webpack-dev-server`
|
|
155
|
-
in one terminal and `./bin/rails s -b $IP -p $PORT` in another should
|
|
156
|
-
work.
|
|
157
|
-
|
|
158
|
-
## Flexible solution
|
|
159
|
-
|
|
160
|
-
The previous solution is useful and fast to implement, but if you are
|
|
161
|
-
working with other people on the same repo it can be tricky to
|
|
162
|
-
maintain the proper configuration in the `config/webpacker.yml` file.
|
|
163
|
-
Moreover, the hostname of your [Cloud9] workspace is hardcoded, so
|
|
164
|
-
that the configuration is not portable.
|
|
165
|
-
|
|
166
|
-
A hint about another way to configure the `webpack-dev-server` can be
|
|
167
|
-
found in the [README of this repo][`webpacker` documentation]:
|
|
168
|
-
|
|
169
|
-
> You can use environment variables as options supported by
|
|
170
|
-
> webpack-dev-server in the form `WEBPACKER_DEV_SERVER_<OPTION>`.
|
|
171
|
-
> Please note that these environment variables will always take
|
|
172
|
-
> precedence over the ones already set in the configuration file.
|
|
173
|
-
|
|
174
|
-
Note that when the configuration of the [`webpack-dev-server`] is
|
|
175
|
-
tweaked with ENV variables, those same values _have to be passed_ to
|
|
176
|
-
the `rails server` process as well in order to let it use the _same_
|
|
177
|
-
configuration.
|
|
178
|
-
|
|
179
|
-
Taking that into account, a flexible solution can be implemented using
|
|
180
|
-
[`foreman`] with the following `Procfile.dev`:
|
|
181
|
-
|
|
182
|
-
[`foreman`]: https://github.com/ddollar/foreman
|
|
183
|
-
|
|
184
|
-
```Procfile
|
|
185
|
-
web: ./bin/rails server -b ${RAILS_SERVER_BINDING:-localhost} -p ${RAILS_SERVER_PORT:-3000}
|
|
186
|
-
webpacker: ./bin/webpack-dev-server
|
|
187
|
-
```
|
|
188
|
-
|
|
189
|
-
and this `bin/start` script:
|
|
190
|
-
|
|
191
|
-
```bash
|
|
192
|
-
#!/bin/bash
|
|
193
|
-
|
|
194
|
-
# Immediately exit script on first error
|
|
195
|
-
set -e -o pipefail
|
|
196
|
-
|
|
197
|
-
APP_ROOT_FOLDER="$( cd "$( dirname "${BASH_SOURCE[0]}" )/.." && pwd )"
|
|
198
|
-
cd "${APP_ROOT_FOLDER}"
|
|
199
|
-
|
|
200
|
-
if [ -n "${C9_USER}" ]; then
|
|
201
|
-
# We are in a Cloud9 machine
|
|
202
|
-
|
|
203
|
-
# Make sure that Postgres is running
|
|
204
|
-
sudo service postgresql status || sudo service postgresql start
|
|
205
|
-
|
|
206
|
-
# Adapt the configuration of the webpack-dev-server
|
|
207
|
-
export APP_DOMAIN="${C9_HOSTNAME}"
|
|
208
|
-
export RAILS_SERVER_BINDING='0.0.0.0'
|
|
209
|
-
export RAILS_SERVER_PORT='8080'
|
|
210
|
-
export WEBPACKER_DEV_SERVER_PORT='8082'
|
|
211
|
-
export WEBPACKER_DEV_SERVER_HTTPS='true'
|
|
212
|
-
export WEBPACKER_DEV_SERVER_HOST="localhost"
|
|
213
|
-
export WEBPACKER_DEV_SERVER_PUBLIC="${C9_HOSTNAME}:${WEBPACKER_DEV_SERVER_PORT}"
|
|
214
|
-
export WEBPACKER_DEV_SERVER_HMR='false'
|
|
215
|
-
export WEBPACKER_DEV_SERVER_INLINE='false'
|
|
216
|
-
export WEBPACKER_DEV_SERVER_OVERLAY='true'
|
|
217
|
-
export WEBPACKER_DEV_SERVER_DISABLE_HOST_CHECK='true'
|
|
218
|
-
export WEBPACKER_DEV_SERVER_USE_LOCAL_IP='false'
|
|
219
|
-
fi
|
|
220
|
-
|
|
221
|
-
foreman start -f Procfile.dev
|
|
222
|
-
```
|
|
223
|
-
|
|
224
|
-
With these two scripts in place, the application can always be started
|
|
225
|
-
by running `bin/start`, in both [Cloud9] and other systems. The
|
|
226
|
-
trick is that by exporting the `WEBPACKER_DEV_SERVER_*` variables
|
|
227
|
-
before calling `foreman start`, we make sure that those values are
|
|
228
|
-
available to both `webpack-dev-server` and `rails server` processes.
|
|
229
|
-
|
|
230
|
-
## Sources
|
|
231
|
-
|
|
232
|
-
- ["Webpack dev server and Rails on Cloud9"][original-article] (the
|
|
233
|
-
original source for the present article, inspired by this
|
|
234
|
-
[comment][original-comment])
|
|
235
|
-
- ["Making Webpacker run on Cloud 9"] (GitHub issue)
|
|
236
|
-
- ["Anyone here got webpack-dev-server to work on Cloud 9?"] (GitHub issue)
|
|
237
|
-
- [`webpacker` documentation]
|
|
238
|
-
- [`webpacker/dev_server.rb` code]
|
|
239
|
-
- [`webpack-dev-server` documentation]
|
|
240
|
-
- ["Using Rails With Webpack in Cloud 9"] (blog article)
|
|
241
|
-
|
|
242
|
-
[original-article]: http://rbf.io/en/blog/2017/11/18/webpack-dev-server-and-rails-on-cloud9/
|
|
243
|
-
[original-comment]: https://github.com/rails/webpacker/issues/176#issuecomment-345532309
|
|
244
|
-
["Making Webpacker run on Cloud 9"]: https://github.com/rails/webpacker/issues/176
|
|
245
|
-
["Anyone here got webpack-dev-server to work on Cloud 9?"]: https://github.com/webpack/webpack-dev-server/issues/230
|
|
246
|
-
[`webpacker` documentation]: https://github.com/rails/webpacker/tree/v3.0.2#development
|
|
247
|
-
[`webpacker/dev_server.rb` code]: https://github.com/rails/webpacker/blob/v3.0.2/lib/webpacker/dev_server.rb#L55
|
|
248
|
-
[`webpack-dev-server` documentation]: https://webpack.js.org/configuration/dev-server/
|
|
249
|
-
["Using Rails With Webpack in Cloud 9"]: http://aalvarez.me/blog/posts/using-rails-with-webpack-in-cloud-9.html
|
|
250
|
-
|
|
251
|
-
## Versions
|
|
252
|
-
|
|
253
|
-
Since things in this ecosystem move fast, it's important to mention the
|
|
254
|
-
versions of the world for which this documentation is relevant:
|
|
255
|
-
|
|
256
|
-
```shell
|
|
257
|
-
$ egrep '^ ?(ruby|webpacker|rails) ' Gemfile.lock
|
|
258
|
-
rails (5.1.4)
|
|
259
|
-
webpacker (3.0.2)
|
|
260
|
-
ruby 2.4.2p198
|
|
261
|
-
|
|
262
|
-
$ yarn versions
|
|
263
|
-
yarn versions v1.1.0
|
|
264
|
-
{ http_parser: '2.7.0',
|
|
265
|
-
node: '8.5.0',
|
|
266
|
-
v8: '6.0.287.53',
|
|
267
|
-
uv: '1.14.1',
|
|
268
|
-
zlib: '1.2.11',
|
|
269
|
-
ares: '1.10.1-DEV',
|
|
270
|
-
modules: '57',
|
|
271
|
-
nghttp2: '1.25.0',
|
|
272
|
-
openssl: '1.0.2l',
|
|
273
|
-
icu: '59.1',
|
|
274
|
-
unicode: '9.0',
|
|
275
|
-
cldr: '31.0.1',
|
|
276
|
-
tz: '2017b' }
|
|
277
|
-
|
|
278
|
-
$ cat /etc/os-release | head -6
|
|
279
|
-
NAME="Ubuntu"
|
|
280
|
-
VERSION="14.04.5 LTS, Trusty Tahr"
|
|
281
|
-
ID=ubuntu
|
|
282
|
-
ID_LIKE=debian
|
|
283
|
-
PRETTY_NAME="Ubuntu 14.04.5 LTS"
|
|
284
|
-
VERSION_ID="14.04"
|
|
285
|
-
```
|
|
286
|
-
|
|
287
|
-
Everything was tested using Chrome Version 62.
|
|
288
|
-
|
|
289
|
-
## tl;dr
|
|
290
|
-
|
|
291
|
-
1. Make sure that you are running the [proper binstub
|
|
292
|
-
version](#binstub-versions) of `./bin/webpack-dev-server`.
|
|
293
|
-
|
|
294
|
-
1. Change the `development.dev_server` entry `config/webpacker.yml` file into:
|
|
295
|
-
|
|
296
|
-
```yaml
|
|
297
|
-
dev_server:
|
|
298
|
-
https: true
|
|
299
|
-
host: localhost
|
|
300
|
-
port: 8082
|
|
301
|
-
public: your-workspace-name-yourusername.c9users.io:8082
|
|
302
|
-
hmr: false
|
|
303
|
-
inline: false
|
|
304
|
-
overlay: true
|
|
305
|
-
disable_host_check: true
|
|
306
|
-
use_local_ip: false
|
|
307
|
-
```
|
|
308
|
-
|
|
309
|
-
1. Now running as usual `./bin/webpack-dev-server` in one terminal and
|
|
310
|
-
`./bin/rails s -b $IP -p $PORT` in another should work as expected.
|