webpacker 5.1.0 → 6.0.0.beta.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (167) hide show
  1. checksums.yaml +4 -4
  2. data/.eslintrc.js +8 -8
  3. data/.github/workflows/jest.yml +38 -0
  4. data/.github/workflows/js-lint.yml +39 -0
  5. data/.github/workflows/rubocop.yml +39 -0
  6. data/.github/workflows/ruby.yml +70 -0
  7. data/.gitignore +2 -0
  8. data/.node-version +1 -1
  9. data/.rubocop.yml +11 -16
  10. data/6_0_upgrade.md +43 -0
  11. data/CHANGELOG.md +42 -2
  12. data/CONTRIBUTING.md +1 -1
  13. data/Gemfile.lock +91 -85
  14. data/README.md +226 -113
  15. data/lib/install/config/webpack/base.js +3 -0
  16. data/lib/install/config/webpack/development.js +2 -2
  17. data/lib/install/config/webpack/production.js +2 -2
  18. data/lib/install/config/webpack/test.js +2 -2
  19. data/lib/install/config/webpacker.yml +9 -38
  20. data/lib/install/javascript/packs/application.css +9 -0
  21. data/lib/install/javascript/packs/application.js +3 -1
  22. data/lib/install/template.rb +33 -19
  23. data/lib/tasks/webpacker.rake +2 -11
  24. data/lib/tasks/webpacker/binstubs.rake +6 -4
  25. data/lib/tasks/webpacker/check_binstubs.rake +4 -4
  26. data/lib/tasks/webpacker/check_node.rake +1 -1
  27. data/lib/tasks/webpacker/check_yarn.rake +2 -3
  28. data/lib/tasks/webpacker/compile.rake +4 -2
  29. data/lib/tasks/webpacker/info.rake +12 -10
  30. data/lib/tasks/webpacker/install.rake +6 -4
  31. data/lib/tasks/webpacker/verify_install.rake +2 -1
  32. data/lib/tasks/webpacker/yarn_install.rake +9 -1
  33. data/lib/webpacker/commands.rb +1 -1
  34. data/lib/webpacker/compiler.rb +20 -8
  35. data/lib/webpacker/configuration.rb +7 -23
  36. data/lib/webpacker/dev_server_runner.rb +23 -4
  37. data/lib/webpacker/helper.rb +51 -42
  38. data/lib/webpacker/manifest.rb +1 -1
  39. data/lib/webpacker/runner.rb +1 -0
  40. data/lib/webpacker/version.rb +1 -1
  41. data/lib/webpacker/webpack_runner.rb +7 -2
  42. data/package.json +27 -43
  43. data/package/__tests__/config.js +6 -27
  44. data/package/__tests__/development.js +18 -7
  45. data/package/__tests__/env.js +12 -4
  46. data/package/__tests__/production.js +6 -6
  47. data/package/__tests__/staging.js +7 -6
  48. data/package/__tests__/test.js +4 -5
  49. data/package/babel/preset.js +55 -0
  50. data/package/config.js +4 -9
  51. data/package/configPath.js +3 -0
  52. data/package/env.js +9 -4
  53. data/package/environments/__tests__/base.js +21 -36
  54. data/package/environments/base.js +63 -127
  55. data/package/environments/development.js +46 -39
  56. data/package/environments/production.js +63 -70
  57. data/package/environments/test.js +2 -2
  58. data/package/index.js +13 -8
  59. data/package/rules/babel.js +19 -10
  60. data/package/rules/coffee.js +6 -0
  61. data/package/rules/erb.js +15 -0
  62. data/package/rules/file.js +17 -18
  63. data/package/rules/index.js +16 -18
  64. data/package/rules/less.js +22 -0
  65. data/package/rules/raw.js +5 -0
  66. data/package/rules/sass.js +13 -10
  67. data/package/rules/svg.js +20 -0
  68. data/package/utils/get_style_rule.js +26 -36
  69. data/package/utils/helpers.js +26 -35
  70. data/test/compiler_test.rb +4 -11
  71. data/test/configuration_test.rb +2 -32
  72. data/test/dev_server_runner_test.rb +25 -6
  73. data/test/engine_rake_tasks_test.rb +39 -0
  74. data/test/helper_test.rb +18 -9
  75. data/test/mounted_app/Rakefile +4 -0
  76. data/test/mounted_app/test/dummy/Rakefile +3 -0
  77. data/test/mounted_app/test/dummy/bin/rails +3 -0
  78. data/test/mounted_app/test/dummy/bin/rake +3 -0
  79. data/test/mounted_app/test/dummy/config.ru +5 -0
  80. data/test/mounted_app/test/dummy/config/application.rb +10 -0
  81. data/test/mounted_app/test/dummy/config/environment.rb +3 -0
  82. data/test/mounted_app/test/dummy/config/webpacker.yml +75 -0
  83. data/test/mounted_app/test/dummy/package.json +7 -0
  84. data/test/rake_tasks_test.rb +1 -10
  85. data/test/test_app/config/webpacker.yml +3 -21
  86. data/test/test_app/config/webpacker_public_root.yml +0 -1
  87. data/test/test_app/public/packs/manifest.json +18 -13
  88. data/test/test_app/some.config.js +0 -0
  89. data/test/webpack_runner_test.rb +10 -4
  90. data/webpacker.gemspec +1 -1
  91. data/yarn.lock +2657 -6224
  92. metadata +50 -89
  93. data/.travis.yml +0 -43
  94. data/docs/assets.md +0 -119
  95. data/docs/cloud9.md +0 -310
  96. data/docs/css.md +0 -253
  97. data/docs/deployment.md +0 -130
  98. data/docs/docker.md +0 -68
  99. data/docs/engines.md +0 -213
  100. data/docs/env.md +0 -63
  101. data/docs/es6.md +0 -72
  102. data/docs/folder-structure.md +0 -66
  103. data/docs/integrations.md +0 -220
  104. data/docs/misc.md +0 -23
  105. data/docs/props.md +0 -223
  106. data/docs/testing.md +0 -136
  107. data/docs/troubleshooting.md +0 -156
  108. data/docs/typescript.md +0 -109
  109. data/docs/v4-upgrade.md +0 -142
  110. data/docs/webpack-dev-server.md +0 -92
  111. data/docs/webpack.md +0 -364
  112. data/docs/yarn.md +0 -23
  113. data/lib/install/angular.rb +0 -23
  114. data/lib/install/coffee.rb +0 -25
  115. data/lib/install/config/.browserslistrc +0 -1
  116. data/lib/install/config/babel.config.js +0 -72
  117. data/lib/install/config/postcss.config.js +0 -12
  118. data/lib/install/config/webpack/environment.js +0 -3
  119. data/lib/install/elm.rb +0 -39
  120. data/lib/install/erb.rb +0 -25
  121. data/lib/install/examples/angular/hello_angular.js +0 -7
  122. data/lib/install/examples/angular/hello_angular/app/app.component.ts +0 -9
  123. data/lib/install/examples/angular/hello_angular/app/app.module.ts +0 -16
  124. data/lib/install/examples/angular/hello_angular/index.ts +0 -8
  125. data/lib/install/examples/angular/hello_angular/polyfills.ts +0 -73
  126. data/lib/install/examples/coffee/hello_coffee.coffee +0 -4
  127. data/lib/install/examples/elm/Main.elm +0 -55
  128. data/lib/install/examples/elm/hello_elm.js +0 -16
  129. data/lib/install/examples/erb/hello_erb.js.erb +0 -6
  130. data/lib/install/examples/react/babel.config.js +0 -87
  131. data/lib/install/examples/react/hello_react.jsx +0 -26
  132. data/lib/install/examples/react/tsconfig.json +0 -21
  133. data/lib/install/examples/stimulus/application.js +0 -1
  134. data/lib/install/examples/stimulus/controllers/hello_controller.js +0 -18
  135. data/lib/install/examples/stimulus/controllers/index.js +0 -9
  136. data/lib/install/examples/svelte/app.svelte +0 -11
  137. data/lib/install/examples/svelte/hello_svelte.js +0 -20
  138. data/lib/install/examples/typescript/hello_typescript.ts +0 -4
  139. data/lib/install/examples/typescript/tsconfig.json +0 -24
  140. data/lib/install/examples/vue/app.vue +0 -22
  141. data/lib/install/examples/vue/hello_vue.js +0 -72
  142. data/lib/install/loaders/coffee.js +0 -6
  143. data/lib/install/loaders/elm.js +0 -25
  144. data/lib/install/loaders/erb.js +0 -11
  145. data/lib/install/loaders/svelte.js +0 -9
  146. data/lib/install/loaders/vue.js +0 -6
  147. data/lib/install/react.rb +0 -18
  148. data/lib/install/stimulus.rb +0 -12
  149. data/lib/install/svelte.rb +0 -29
  150. data/lib/install/typescript.rb +0 -42
  151. data/lib/install/vue.rb +0 -49
  152. data/lib/tasks/installers.rake +0 -42
  153. data/package/config_types/__tests__/config_list.js +0 -118
  154. data/package/config_types/__tests__/config_object.js +0 -43
  155. data/package/config_types/config_list.js +0 -75
  156. data/package/config_types/config_object.js +0 -55
  157. data/package/config_types/index.js +0 -7
  158. data/package/rules/module.css.js +0 -3
  159. data/package/rules/module.sass.js +0 -8
  160. data/package/rules/node_modules.js +0 -24
  161. data/package/utils/__tests__/deep_assign.js +0 -32
  162. data/package/utils/__tests__/deep_merge.js +0 -10
  163. data/package/utils/__tests__/get_style_rule.js +0 -65
  164. data/package/utils/__tests__/objectify.js +0 -9
  165. data/package/utils/deep_assign.js +0 -22
  166. data/package/utils/deep_merge.js +0 -22
  167. data/package/utils/objectify.js +0 -3
@@ -1,253 +0,0 @@
1
- # CSS, Sass and SCSS
2
-
3
-
4
- Webpacker supports importing CSS, Sass and SCSS files directly into your JavaScript files.
5
-
6
- Importing and loading styles is a two step process:
7
-
8
- 1. You need to tell webpack which file(s) it has to compile and know how to load
9
-
10
- When you do `import '../scss/application.scss'`, you're telling webpack to include `application.scss` in the build. This does not mean it's going to be compiled into your javascript, only that webpack now compiles and knows how to load this file. (How that file compilation is handled is depending on how your loaders (`css-loader`, `sass-loader`, `file-loader`, etc.) are configured.)
11
-
12
- 2. You need to load those files in your views
13
-
14
- In order to have styles load in production, you need to include `stylesheet_pack_tag` with the same name as the javascript file that imports the styles.
15
-
16
- When you do `<%= stylesheet_pack_tag 'application' %>`, that's a run-time inclusion from Rails, where Rails gets the correct "asset path" to that file from webpack.
17
-
18
-
19
- ## Import global styles into your JS app
20
-
21
- ```sass
22
- // app/javascript/hello_react/styles/hello-react.sass
23
-
24
- .hello-react
25
- padding: 20px
26
- font-size: 12px
27
- ```
28
-
29
- ```js
30
- // React component example
31
- // app/javascript/packs/hello_react.jsx
32
-
33
- import React from 'react'
34
- import helloIcon from '../hello_react/images/icon.png'
35
- import '../hello_react/styles/hello-react'
36
-
37
- const Hello = props => (
38
- <div className="hello-react">
39
- <img src={helloIcon} alt="hello-icon" />
40
- <p>Hello {props.name}!</p>
41
- </div>
42
- )
43
- ```
44
-
45
- ## Import scoped styles into your JS app
46
-
47
- Stylesheets that end with `.module.*` are treated as [CSS Modules](https://github.com/css-modules/css-modules).
48
-
49
- ```sass
50
- // app/javascript/hello_react/styles/hello-react.module.sass
51
-
52
- .helloReact
53
- padding: 20px
54
- font-size: 12px
55
- ```
56
-
57
- ```js
58
- // React component example
59
- // app/javascript/packs/hello_react.jsx
60
-
61
- import React from 'react'
62
- import helloIcon from '../hello_react/images/icon.png'
63
- import styles from '../hello_react/styles/hello-react'
64
-
65
- const Hello = props => (
66
- <div className={styles.helloReact}>
67
- <img src={helloIcon} alt="hello-icon" />
68
- <p>Hello {props.name}!</p>
69
- </div>
70
- )
71
- ```
72
-
73
- **Note:** Declared class is referenced as object property in JavaScript.
74
-
75
- ## Import scoped styles into your TypeScript app
76
-
77
- Using CSS modules with a TypeScript application requires a few differences from a JavaScript app. The CSS / Sass files are the same:
78
-
79
- ```sass
80
- // app/javascript/hello_react/styles/hello-react.module.sass
81
-
82
- .helloReact
83
- padding: 20px
84
- font-size: 12px
85
- ```
86
-
87
- There must also be a type definition file for these styles:
88
-
89
- ```typescript
90
- export const helloReact: string;
91
- ```
92
-
93
- You can then import the styles like this:
94
-
95
- ```typescript
96
- // React component example
97
- // app/javascripts/packs/hello_react.tsx
98
-
99
- import React from 'react'
100
- import helloIcon from '../hello_react/images/icon.png'
101
- import * as styles from '../hello_react/styles/hello-react.module.sass'
102
-
103
- const Hello = props => (
104
- <div className={styles.helloReact}>
105
- <img src={helloIcon} alt="hello-icon" />
106
- <p>Hello {props.name}!</p>
107
- </div>
108
- )
109
- ```
110
-
111
- You can automatically generate type definitions for the styles by installing the `typed-scss-modules` as a development dependency:
112
-
113
- ```
114
- yarn add typed-scss-modules --dev
115
- ```
116
-
117
- Then by adding these lines to your `package.json`:
118
-
119
- ```
120
- "scripts": {
121
- "gen-typings": "yarn run tsm app/javascript/**/*.sass",
122
- "watch-typings": "yarn run tsm app/javascript/**/*.sass -w"
123
- },
124
- ```
125
-
126
- You can generate the typings for the stylesheet by running the command `yarn gen-typings` when you've finished writing CSS, or run `yarn watch-typings` to have it automatically generate them as you go.
127
-
128
-
129
- ## Link styles from your Rails views
130
-
131
- Under the hood webpack uses
132
- [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) plugin to extract all the referenced styles within your app and compile it into
133
- a separate `[pack_name].css` bundle so that in your view you can use the
134
- `stylesheet_pack_tag` helper.
135
-
136
- ```erb
137
- <%= stylesheet_pack_tag 'hello_react' %>
138
- ```
139
-
140
- Webpacker emits css files only if `extract_css` is set to true in webpacker.yml otherwise `stylesheet_pack_tag` returns nil.
141
-
142
- ## Add bootstrap
143
-
144
- You can use Yarn to add bootstrap or any other modules available on npm:
145
-
146
- ```bash
147
- yarn add bootstrap
148
- ```
149
-
150
- Import Bootstrap and theme (optional) CSS in your app/javascript/packs/app.js file:
151
-
152
- ```js
153
- import 'bootstrap/dist/css/bootstrap'
154
- import 'bootstrap/dist/css/bootstrap-theme'
155
- ```
156
-
157
- Or in your app/javascript/app.sass file:
158
-
159
- ```sass
160
- // ~ to tell that this is not a relative import
161
-
162
- @import '~bootstrap/dist/css/bootstrap'
163
- @import '~bootstrap/dist/css/bootstrap-theme'
164
- ```
165
-
166
-
167
- ## Post-Processing CSS
168
-
169
- Webpacker out-of-the-box provides CSS post-processing using
170
- [postcss-loader](https://github.com/postcss/postcss-loader)
171
- and the installer sets up a standard `postcss.config.js`
172
- file in your app root with standard plugins.
173
-
174
- ```js
175
- module.exports = {
176
- plugins: [
177
- require('postcss-import'),
178
- require('postcss-flexbugs-fixes'),
179
- require('postcss-preset-env')({
180
- autoprefixer: {
181
- flexbox: 'no-2009'
182
- },
183
- stage: 3
184
- })
185
- ]
186
- }
187
- ```
188
-
189
- ## Using CSS with [vue-loader](https://github.com/vuejs/vue-loader)
190
-
191
- Vue templates require loading the stylesheet in your application in
192
- order for CSS to work. This is in addition to loading the JavaScript
193
- file for the entry point. Loading the stylesheet will also load the
194
- CSS for any nested components.
195
-
196
- ```erb
197
- <%= stylesheet_pack_tag 'hello_vue' %>
198
- <%= javascript_pack_tag 'hello_vue' %>
199
- ```
200
-
201
- ## Resolve url loader
202
-
203
- Since `Sass/libsass` does not provide url rewriting, all linked assets must be relative to the output. Add the missing url rewriting using the resolve-url-loader. Place it directly after the sass-loader in the loader chain.
204
-
205
-
206
- ```bash
207
- yarn add resolve-url-loader
208
- ```
209
-
210
- ```js
211
- // webpack/environment.js
212
- const { environment } = require('@rails/webpacker')
213
-
214
- // resolve-url-loader must be used before sass-loader
215
- environment.loaders.get('sass').use.splice(-1, 0, {
216
- loader: 'resolve-url-loader'
217
- });
218
-
219
- module.exports = environment
220
- ```
221
-
222
- ## Working with TypeScript
223
-
224
- In order to get CSS to work with typescript you have two options.
225
- You can either use `require` to bypass typescript special `import`.
226
-
227
- ```ts
228
- const styles = require('../hello_react/styles/hello-react');
229
- ```
230
- You may also use the package [typings-for-css-modules-loader](https://github.com/Jimdo/typings-for-css-modules-loader) instead of `css-loader` to automatically generate typescript `.d.ts` files in order to help resolve any css/scss styles. To do that:
231
-
232
- ```js
233
- // app/javascript/packs/hello_react.jsx
234
- import * as styles from '../hello_react.styles/hello-react.module.scss';
235
- ```
236
-
237
- ```bash
238
- yarn add --dev typings-for-css-modules-loader
239
- ```
240
-
241
- ```js
242
- // webpack/environment.js
243
- const { environment } = require('@rails/webpacker')
244
-
245
- // replace css-loader with typings-for-css-modules-loader
246
- environment.loaders.get('moduleSass').use = environment.loaders.get('moduleSass').use.map((u) => {
247
- if(u.loader == 'css-loader') {
248
- return { ...u, loader: 'typings-for-css-modules-loader' };
249
- } else {
250
- return u;
251
- }
252
- });
253
- ```
@@ -1,130 +0,0 @@
1
- # Deployment
2
-
3
-
4
- Webpacker hooks up a new `webpacker:compile` task to `assets:precompile`, which gets run whenever you run `assets:precompile`.
5
- If you are not using Sprockets `webpacker:compile` is automatically aliased to `assets:precompile`. Remember to set NODE_ENV environment variable to production during deployment or when running the rake task.
6
-
7
- The `javascript_pack_tag` and `stylesheet_pack_tag` helper method will automatically insert the correct HTML tag for compiled pack. Just like the asset pipeline does it.
8
-
9
- By default the output will look like this in different environments:
10
-
11
- ```html
12
- <!-- In development mode with webpack-dev-server -->
13
- <script src="http://localhost:8080/calendar-0bd141f6d9360cf4a7f5.js"></script>
14
- <link rel="stylesheet" media="screen" href="http://localhost:8080/calendar-dc02976b5f94b507e3b6.css">
15
- <!-- In production or development mode -->
16
- <script src="/packs/js/calendar-0bd141f6d9360cf4a7f5.js"></script>
17
- <link rel="stylesheet" media="screen" href="/packs/css/calendar-dc02976b5f94b507e3b6.css">
18
- ```
19
-
20
-
21
- ## Heroku
22
-
23
- In order for your Webpacker app to run on Heroku, you'll need to do a bit of configuration before hand.
24
-
25
- ```
26
- heroku create my-webpacker-heroku-app
27
- heroku addons:create heroku-postgresql:hobby-dev
28
- heroku buildpacks:add heroku/nodejs
29
- heroku buildpacks:add heroku/ruby
30
- git push heroku master
31
- ```
32
-
33
- We're essentially doing the following here:
34
-
35
- * Creating an app on Heroku
36
- * Creating a Postgres database for the app (this is assuming that you're using Heroku Postgres for your app)
37
- * Adding the Heroku NodeJS and Ruby buildpacks for your app. This allows the `npm` or `yarn` executables to properly function when compiling your app - as well as Ruby.
38
- * Pushing our code to Heroku and kicking off the deployment
39
-
40
-
41
- ## Nginx
42
-
43
- Webpacker doesn't serve anything in production. You’re expected to configure your web server to serve files in public/ directly.
44
-
45
- Some servers support sending precompressed versions of files when they're available. For example, nginx offers a `gzip_static` directive that serves files with the `.gz` extension to supported clients. With an optional module, nginx can also serve Brotli compressed files with the `.br` extension (see below for installation and configuration instructions).
46
-
47
- Here's a sample nginx site config for a Rails app using Webpacker:
48
-
49
- ```nginx
50
- upstream app {
51
- # server unix:///path/to/app/tmp/puma.sock;
52
- }
53
-
54
- server {
55
- listen 80;
56
- server_name www.example.com;
57
- root /path/to/app/public;
58
-
59
- location @app {
60
- proxy_pass http://app;
61
- proxy_redirect off;
62
-
63
- proxy_set_header Host $host;
64
- proxy_set_header X-Real-IP $remote_addr;
65
- proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
66
- proxy_set_header X-Forwarded-Proto $scheme;
67
- }
68
-
69
- location / {
70
- try_files $uri @app;
71
- }
72
-
73
- location = /favicon.ico { access_log off; log_not_found off; }
74
- location = /robots.txt { access_log off; log_not_found off; }
75
-
76
- location ~ /\.(?!well-known).* {
77
- deny all;
78
- }
79
-
80
- location ~ ^/(assets|packs)/ {
81
- gzip_static on;
82
- brotli_static on; # Optional, see below
83
- expires max;
84
- add_header Cache-Control public;
85
- }
86
- }
87
- ```
88
-
89
- ### Installing the ngx_brotli module
90
-
91
- If you want to serve Brotli compressed files with nginx, you will need to install the `nginx_brotli` module. Installation instructions from source can be found in the official [google/ngx_brotli](https://github.com/google/ngx_brotli) git repository. Alternatively, depending on your platform, the module might be available via a pre-compiled package.
92
-
93
- Once installed, you need to load the module. As we want to serve the pre-compressed files, we only need the static module. Add the following line to your `nginx.conf` file and reload nginx:
94
-
95
- ```
96
- load_module modules/ngx_http_brotli_static_module.so;
97
- ```
98
-
99
- Now, you can set `brotli_static on;` in your nginx site config, as per the config in the last section above.
100
-
101
- ## CDN
102
-
103
- Webpacker out-of-the-box provides CDN support using your Rails app `config.action_controller.asset_host` setting. If you already have [CDN](http://guides.rubyonrails.org/asset_pipeline.html#cdns) added in your Rails app
104
- you don't need to do anything extra for Webpacker, it just works.
105
-
106
- ## Capistrano
107
-
108
- ### Assets compiling on every deployment even if JavaScript and CSS files are not changed
109
-
110
- Make sure you have `public/packs` and `node_modules` in `:linked_dirs`
111
-
112
- ```ruby
113
- append :linked_dirs, "log", "tmp/pids", "tmp/cache", "tmp/sockets", "public/packs", ".bundle", "node_modules"
114
- ```
115
-
116
- If you have `node_modules` added to `:linked_dirs` you'll need to run yarn install before `deploy:assets:precompile`, so you can add this code snippet at the bottom deploy.rb
117
-
118
- ```ruby
119
- before "deploy:assets:precompile", "deploy:yarn_install"
120
- namespace :deploy do
121
- desc "Run rake yarn install"
122
- task :yarn_install do
123
- on roles(:web) do
124
- within release_path do
125
- execute("cd #{release_path} && yarn install --silent --no-progress --no-audit --no-optional")
126
- end
127
- end
128
- end
129
- end
130
- ```
@@ -1,68 +0,0 @@
1
- # Docker
2
-
3
- To setup webpacker with a dockerized Rails application.
4
-
5
- First, add a new service for webpacker in docker-compose.yml:
6
-
7
- ```Dockerfile
8
- version: '3'
9
- services:
10
- webpacker:
11
- build: .
12
- environment:
13
- - NODE_ENV=development
14
- - RAILS_ENV=development
15
- - WEBPACKER_DEV_SERVER_HOST=0.0.0.0
16
- command: ./bin/webpack-dev-server
17
- volumes:
18
- - .:/webpacker-example-app
19
- ports:
20
- - '3035:3035'
21
- ```
22
-
23
- add nodejs and yarn as dependencies in Dockerfile,
24
-
25
- ```dockerfile
26
- FROM ruby:2.4.1
27
-
28
- RUN apt-get update -qq && apt-get install -y build-essential nodejs \
29
- && rm -rf /var/lib/apt/lists/* \
30
- && curl -o- -L https://yarnpkg.com/install.sh | bash
31
-
32
- # Rest of the commands....
33
- ```
34
-
35
- Please note: if using `assets:precompile` in the Dockerfile or have issues with the snippet above then try:
36
-
37
- ```dockerfile
38
- FROM ruby:2.4.1
39
-
40
- RUN curl -sL https://deb.nodesource.com/setup_8.x | bash \
41
- && apt-get update && apt-get install -y nodejs && rm -rf /var/lib/apt/lists/* \
42
- && curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
43
- && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list \
44
- && apt-get update && apt-get install -y yarn && rm -rf /var/lib/apt/lists/*
45
-
46
- # Rest of the commands....
47
- ```
48
-
49
- then add the webpacker host name environment variable to the web/app service:
50
-
51
- ```Dockerfile
52
- web:
53
- build:
54
- context: .
55
- command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
56
- volumes:
57
- - .:/usr/src/app
58
- ports:
59
- - "3000:3000"
60
- environment:
61
- - WEBPACKER_DEV_SERVER_HOST=webpacker
62
- ```
63
-
64
- Lastly, rebuild your container:
65
-
66
- ```bash
67
- docker-compose up --build
68
- ```