react_on_rails 6.7.2 → 6.8.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.rubocop.yml +3 -0
- data/CHANGELOG.md +6 -1
- data/CONTRIBUTING.md +8 -0
- data/KUDOS.md +37 -30
- data/README.md +3 -1
- data/Rakefile +1 -1
- data/SUMMARY.md +1 -0
- data/docs/additional-reading/rails-assets-relative-paths.md +185 -0
- data/docs/additional-reading/rails-assets.md +3 -1
- data/docs/additional-reading/webpack-v1-notes.md +23 -0
- data/docs/additional-reading/webpack.md +5 -13
- data/lib/generators/react_on_rails/dev_tests_generator.rb +13 -11
- data/lib/generators/react_on_rails/templates/base/base/client/.babelrc +1 -1
- data/lib/generators/react_on_rails/templates/base/base/client/package.json.tt +14 -14
- data/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js +13 -20
- data/lib/react_on_rails/assets_precompile.rb +1 -1
- data/lib/react_on_rails/locales_to_js.rb +1 -1
- data/lib/react_on_rails/version.rb +1 -2
- data/package.json +22 -22
- data/rakelib/run_rspec.rake +5 -1
- data/yarn.lock +1124 -588
- metadata +4 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: d813add5f006c6deca243a7504707a2cc4e6373c
|
|
4
|
+
data.tar.gz: 2d354c343883a102b500f6d7131e6d8b2d72b640
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 2cdec4b31916d1eb5267f71bdd9597dadf898a905234ff6e93879c6760045b99ea4793baea90d01cb0b590f994f82c2fd0dc00bae462d79a7b421f5d4edbc378
|
|
7
|
+
data.tar.gz: 783214e29c1f16cc991a9d1e4e9f9a10ddeefa56a1818cb0568538a463d48615e31d46769e1f0d78a0d614dd28f392fe31e7ba2f7361511418e926c75b4734a6
|
data/.rubocop.yml
CHANGED
data/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,10 @@ Contributors: please follow the recommendations outlined at [keepachangelog.com]
|
|
|
5
5
|
|
|
6
6
|
## [Unreleased]
|
|
7
7
|
*Please add entries here for your pull requests.*
|
|
8
|
+
## [6.8.0] - 2017-03-06
|
|
9
|
+
## Added
|
|
10
|
+
- Converted to Webpack v2 for generators, tests, and all example code. [#742](https://github.com/shakacode/react_on_rails/pull/742) by [justin808](https://github.com/justin808).
|
|
11
|
+
|
|
8
12
|
## [6.7.2] - 2017-03-05
|
|
9
13
|
### Improved
|
|
10
14
|
- Improve i18n Integration with a better error message if the value of the i18n directory is invalid. [#748](https://github.com/shakacode/react_on_rails/pull/748) by [justin808](https://github.com/justin808).
|
|
@@ -480,7 +484,8 @@ Best done with Object destructing:
|
|
|
480
484
|
##### Fixed
|
|
481
485
|
- Fix several generator related issues.
|
|
482
486
|
|
|
483
|
-
[Unreleased]: https://github.com/shakacode/react_on_rails/compare/6.
|
|
487
|
+
[Unreleased]: https://github.com/shakacode/react_on_rails/compare/6.8.0...master
|
|
488
|
+
[6.8.0]: https://github.com/shakacode/react_on_rails/compare/6.7.2...6.8.0
|
|
484
489
|
[6.7.2]: https://github.com/shakacode/react_on_rails/compare/6.7.1...6.7.2
|
|
485
490
|
[6.7.1]: https://github.com/shakacode/react_on_rails/compare/6.7.0...6.7.1
|
|
486
491
|
[6.7.0]: https://github.com/shakacode/react_on_rails/compare/6.6.0...6.7.0
|
data/CONTRIBUTING.md
CHANGED
|
@@ -197,6 +197,12 @@ After running a test, you can view the coverage results SimpleCov reports by ope
|
|
|
197
197
|
|
|
198
198
|
To test `spec/dummy` against Turbolinks 5, install the gem by running `ENABLE_TURBOLINKS_5=TRUE bundle install` in the `spec/dummy` directory before running `rake`.
|
|
199
199
|
|
|
200
|
+
Run `rake -T` or `rake -D` to see testing options.
|
|
201
|
+
|
|
202
|
+
`rake all_but_examples` is typically best for developers, except if any generators changed.
|
|
203
|
+
|
|
204
|
+
See below for verifying changes to the generators.
|
|
205
|
+
|
|
200
206
|
### Debugging
|
|
201
207
|
Start the sample app like this for some debug printing:
|
|
202
208
|
|
|
@@ -216,6 +222,8 @@ The main installer can be run with ```rails generate react_on_rails:install```
|
|
|
216
222
|
### Testing the Generator
|
|
217
223
|
The generators are covered by generator tests using Rails's generator testing helpers, but it never hurts to do a sanity check and explore the API. See [generator_testing_script.md](generator_testing_script.md) for a script on how to run the generator on a fresh project.
|
|
218
224
|
|
|
225
|
+
`rake run_rspec:example_basic` is a great way to run tests on one generator. Once that works, you should run `rake run_rspec:examples`. Be aware that this will create a hug number of files under a `/gen-examples` directory. You should be sure to exclude this directory from your IDE and delete it once your testing is done.
|
|
226
|
+
|
|
219
227
|
### Linting
|
|
220
228
|
All linting is performed from the docker container for CI. You will need docker and docker-compose installed locally to lint code changes via the lint container. You can lint locally by running `npm run lint && npm run flow`
|
|
221
229
|
|
data/KUDOS.md
CHANGED
|
@@ -2,51 +2,58 @@ This is a sibling file to [PROJECTS.md](./PROJECTS.md).
|
|
|
2
2
|
|
|
3
3
|
I'm looking for quotes on why you like using React on Rails. You might mention any benefits you particularly like and if you've migrated from react-rails. Just click to edit and github will automatically open up a PR. Thanks to everybody that contributes!
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
### March 2, 2017
|
|
6
|
+
|
|
6
7
|
|
|
7
|
-
###
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
### Compared to Browserify
|
|
11
|
-
See comments [here](https://lorefnon.me/2015/11/15/a-minimal-setup-for-using-es6-modules-in-rails.html)
|
|
12
|
-
|
|
13
|
-
|
|
8
|
+
### February 24, 2017
|
|
9
|
+
"I ❤️ React on Rails because it's easy to drop into a Rails project and still get all the power of native JavaScript tooling. The generators are great and the community is so awesome and welcoming. In fact, I love it so much I made a [course for learning React with Rails](https://goo.gl/uzu36X) using the react_on_rails gem!"
|
|
10
|
+
|
|
14
11
|
|
|
15
|
-
|
|
12
|
+
### December 20, 2016
|
|
13
|
+
|
|
16
14
|
|
|
17
|
-
|
|
15
|
+
### December 12, 2016
|
|
16
|
+
|
|
18
17
|
|
|
19
|
-
|
|
18
|
+
### November 15, 2016
|
|
19
|
+
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
### November 9, 2016, in our Slack Room for ShakaCode
|
|
22
|
+
|
|
22
23
|
|
|
23
|
-
|
|
24
|
+
### November 6, 2016
|
|
25
|
+
https://github.com/shakacode/react_on_rails/pull/591#issuecomment-258685925
|
|
26
|
+
|
|
24
27
|
|
|
25
|
-
|
|
28
|
+
### October 29, 2016 by Email
|
|
29
|
+
|
|
26
30
|
|
|
31
|
+
### September 11, 2016
|
|
27
32
|
|
|
28
33
|
|
|
29
|
-
###
|
|
30
|
-
|
|
31
36
|
|
|
32
|
-
###
|
|
33
|
-
https://
|
|
34
|
-
|
|
37
|
+
### June 15, 2016
|
|
38
|
+
|
|
35
39
|
|
|
36
|
-
###
|
|
37
|
-
|
|
38
42
|
|
|
39
|
-
|
|
40
|
-
|
|
43
|
+
|
|
41
44
|
|
|
42
|
-
###
|
|
43
|
-
|
|
44
47
|
|
|
45
|
-
###
|
|
46
|
-
, [flynfish](https://github.com/flynfish).
|
|
47
50
|
|
|
48
|
-
###
|
|
49
|
-
|
|
50
|
-
|
|
51
|
+
### March 25, 2016
|
|
52
|
+
https://twitter.com/ollieglass/status/713372606804729856
|
|
53
|
+
|
|
54
|
+
|
|
51
55
|
|
|
56
|
+
### March 23, 2016, Compared to Browserify
|
|
57
|
+
See comments [here](https://lorefnon.me/2015/11/15/a-minimal-setup-for-using-es6-modules-in-rails.html)
|
|
52
58
|
|
|
59
|
+
|
data/README.md
CHANGED
|
@@ -47,6 +47,7 @@ For more testimonials, see [Live Projects](PROJECTS.md) and [Kudos](./KUDOS.md).
|
|
|
47
47
|
* [284 Ruby Rogues: React on Rails with Justin Gordon and Rob Wise](https://devchat.tv/ruby-rogues/284-rr-react-on-rails-with-justin-gordon-and-rob-wise)
|
|
48
48
|
|
|
49
49
|
# NEWS
|
|
50
|
+
* 2017-03-06: Updated to Webpack v2!
|
|
50
51
|
* 2017-03-02: Demo of internationalization (i18n) is live at [reactrails.com](https://www.reactrails.com/). Docs [here](docs/basics/i18n.md).
|
|
51
52
|
* 2017-02-28: See [discussions here on Webpacker](https://github.com/rails/webpacker/issues/139) regarding how Webpacker will allow React on Rails to avoid using the asset pipeline in the near future.
|
|
52
53
|
* 2017-02-28: Upgrade to Webpack v2 or use the `--bail` option in your webpack script for test and production builds. See the discussion on [PR #730](https://github.com/shakacode/react_on_rails/pull/730).
|
|
@@ -519,6 +520,7 @@ Node.js can be used as the backend for server-side rendering instead of [execJS]
|
|
|
519
520
|
+ [Server Rendering Tips](./docs/additional-reading/server-rendering-tips.md)
|
|
520
521
|
+ [Code Splitting](./docs/additional-reading/code-splitting.md)
|
|
521
522
|
+ [AngularJS Integration and Migration to React on Rails](./docs/additional-reading/angular-js-integration-migration.md)
|
|
523
|
+
+ [Webpack, the Asset Pipeline, and Using Assets w/ React](./docs/additional-reading/rails-assets-relative-paths.md)
|
|
522
524
|
|
|
523
525
|
+ **Development**
|
|
524
526
|
+ [React on Rails Basic Installation Tutorial](./docs/tutorial.md) ([live demo](https://hello-react-on-rails.herokuapp.com))
|
|
@@ -575,7 +577,7 @@ The gem is available as open source under the terms of the [MIT License](./docs/
|
|
|
575
577
|
## Authors
|
|
576
578
|
[The Shaka Code team!](http://www.shakacode.com/about/)
|
|
577
579
|
|
|
578
|
-
The origins of the project began with the need to do a rich JavaScript interface for ShakaCode's client [Madrone](http://madroneco.com/) and the choice to use
|
|
580
|
+
The origins of the project began with the need to do a rich JavaScript interface for ShakaCode's client [Madrone](http://madroneco.com/) and the choice to use Webpack and Rails, as described in [Fast Rich Client Rails Development With Webpack and the ES6 Transpiler](http://www.railsonmaui.com/blog/2014/10/03/integrating-webpack-and-the-es6-transpiler-into-an-existing-rails-project/).
|
|
579
581
|
|
|
580
582
|
The gem project started with [Justin Gordon](https://github.com/justin808/) pairing with [Samnang Chhun](https://github.com/samnang) to figure out how to do server rendering with Webpack plus Rails. [Alex Fedoseev](https://github.com/alexfedoseev) then joined in. [Rob Wise](https://github.com/robwise), [Aaron Van Bokhoven](https://github.com/aaronvb), and [Andy Wang](https://github.com/yorzi) did the bulk of the generators. Many others have [contributed](https://github.com/shakacode/react_on_rails/graphs/contributors).
|
|
581
583
|
|
data/Rakefile
CHANGED
|
@@ -10,5 +10,5 @@ end
|
|
|
10
10
|
desc "Run all tests and linting"
|
|
11
11
|
task default: tasks
|
|
12
12
|
|
|
13
|
-
desc "All actions but no examples
|
|
13
|
+
desc "All actions but no examples, good for local developer run."
|
|
14
14
|
task all_but_examples: ["run_rspec:all_but_examples", "lint"]
|
data/SUMMARY.md
CHANGED
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
+ [Server Rendering Tips](./docs/additional-reading/server-rendering-tips.md)
|
|
22
22
|
+ [Code Splitting](./docs/additional-reading/code-splitting.md)
|
|
23
23
|
+ [AngularJS Integration and Migration to React on Rails](./docs/additional-reading/angular-js-integration-migration.md)
|
|
24
|
+
+ [Webpack, the Asset Pipeline, and Using Assets w/ React](./docs/additional-reading/rails-assets-relative-paths.md)
|
|
24
25
|
|
|
25
26
|
### **Development**
|
|
26
27
|
+ [React on Rails Basic Installation Tutorial](./docs/tutorial.md)
|
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
# Using Webpack bundled assets with the Rails Asset Pipeline
|
|
2
|
+
|
|
3
|
+
**If you're looking to use assets in your react components, look no further. This doc is for you.**
|
|
4
|
+
|
|
5
|
+
As most of you know, when you spin up a Rails application all of your asset files that live within your `app/assets/` directory will be added into your application's Asset Pipeline. If you would like to view any of these assets (most commonly you'd want to view images), run your rails server in development mode and in a browser visit a url similar to: `localhost:3000/assets/sample_image.png`. In this case, if I had an image `sample_image.png` in my `app/assets/images/` directory, visiting the url `localhost:3000/assets/sample_image.png` in a browser would display the image to me. Meaning that `/assets/sample_image.png` is my path to that individual asset.
|
|
6
|
+
|
|
7
|
+
## The Problem
|
|
8
|
+
|
|
9
|
+
Sometimes we would like to use images directly in our react components or even component specific CSS. This can cause problems because it is difficult to maintain the relative path to assets in our pipeline. Normally, we would use erb to get around this, using something like `<img src="<%= asset_path('my-image.png') %>" />`. Unfortunately, that will not play well with webpack.
|
|
10
|
+
|
|
11
|
+
Now we could always just place these assets in our `app/assets/` directory like normal and then reference them in our react with things like `<img src="/assets/asset-name.ext" />`, and that would work! But that also will move this image out of our client side app, which isn't always ideal. Also hardcoding the path to an asset isn't a good approach considering file paths can always change, and that would then require a source code change. That's just no bueno.
|
|
12
|
+
|
|
13
|
+
So how do we get around this? And find the relative paths to our assets without hardcoding the paths?
|
|
14
|
+
|
|
15
|
+
## The Solution: The lowdown on Webpack's url-loader & file-loader, outputPaths and publicPaths
|
|
16
|
+
|
|
17
|
+
Loaders are an incredibly useful part of Webpack. Simply put, they allow you to load and bundle different types of sources/files (you can load anything from images, CSS, to CoffeeScript).
|
|
18
|
+
|
|
19
|
+
##### Url Loader vs. File Loader
|
|
20
|
+
|
|
21
|
+
Two very common, and quite useful, Webpack loaders are the [url-loader](https://github.com/webpack-contrib/url-loader) and the [file-loader](https://github.com/webpack-contrib/file-loader). They allow you to load and access files in an easy manner. Both of these loaders are incredibly similar to one another, and in fact work together to accomplish their goals, with a very slight difference. The url-loader will load any file(s) and when accessed, will return a Data Url that can be used to access the file(s) (commonly used to inline images). File-loader on the other hand, will bundle and output the file(s) to a desired directory so they can live in the assets on your webserver along with your outputted webpack bundle. These bundled assets can then be accessed by their public paths, making it very easy to include and use them in your JavaScript code.
|
|
22
|
+
|
|
23
|
+
The url-loader is great to use for smaller images! It is most commonly used with a set byte limit on the size of the files that can be loaded. When this is the case, anything below the byte limit will be loaded and returned as a Data Url. Anything that exceeds the byte limit, will delegate to file-loader for loading, passing any set query parameters as well to file-loader (if that sounds like gibberish right now, don't worry. You'll learn all about it soon!).
|
|
24
|
+
|
|
25
|
+
The benefit of using url-loader first, and falling back on file-loader, is that the use of Data Urls saves HTTP Requests that need to be made to fetch files. That is very important in regards to how fast a webpage will load. Generally speaking, the less HTTP requests that need to be made, the faster a page will load. For more information about usage, and the pros & cons of Data Urls read [here](https://css-tricks.com/data-uris/).
|
|
26
|
+
|
|
27
|
+
Note: _For the rest of this doc, we will be using file-loader. This is because its usage can be a little bit trickier and it is used as url-loader's back up. Keep in mind that the usage for the two are EXTREMELY similar. For more info about the url-loader's usage, check out its configuration for the `react_on_rails` sample app [here](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/webpack.client.base.config.js) (specifically lines 82-84)._
|
|
28
|
+
|
|
29
|
+
##### Configuring Webpack with file-loader
|
|
30
|
+
|
|
31
|
+
Once you have added file-loader (or whatever loader you would like to use) to your project, you can start configuring your `webpack.config.js` file to bundle these assets. Inside your `module["loaders"]` list you will add a new object to represent your loader. This loader will include a few attributes:
|
|
32
|
+
|
|
33
|
+
1. `test`: a regular expression that specifies the types of files that can be loaded.
|
|
34
|
+
2. `loader`: the name of the loader you will be using (in this doc we will be using [file-loader](https://github.com/webpack-contrib/file-loader))
|
|
35
|
+
3. `query`: query parameters are additional configuration options that get passed to the loader. This can either be appended to your `loader` attribute like follows:
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
```javascript
|
|
39
|
+
loader: "file-loader?name=[name].[ext]"
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
or as a JSON object:
|
|
43
|
+
|
|
44
|
+
```javascript
|
|
45
|
+
query: {
|
|
46
|
+
name: "[name].[ext]"
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
both of these two example above do the exact same thing, just using different syntaxes. For the rest of this doc we will be using the JSON object style. For more information about webpack loaders, read [this](https://webpack.github.io/docs/using-loaders.html).
|
|
51
|
+
|
|
52
|
+
_For the sake of this doc, we're also going to add a `resolve["alias"]` inside our webpack.config to make it easier to include our assets in our jsx files. In `resolve["alias"]`, simply add:_
|
|
53
|
+
|
|
54
|
+
```javascript
|
|
55
|
+
'assets': path.resolve('./app/assets')
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
##### Configuring your file-loader Query Parameters
|
|
59
|
+
|
|
60
|
+
The first property we'll want to set is our file's resulting name after bundling. For now we're just going to use:
|
|
61
|
+
|
|
62
|
+
```javascript
|
|
63
|
+
name: "[name][md5:hash].[ext]"
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
This will just set the name to the file's original name + a md5 digested hash + the extension of the original file (.png, .jpg, etc).
|
|
67
|
+
|
|
68
|
+
Next we'll set the outputPath for our files. This is the directory we want the files to be placed in after webpack runs. When Webpack runs with file-loader, all files (in this case assets) that have been used in the bundled JavaScript will be bundled and outputted to the output destination. **Keep in mind that react_on_rails outputs by default to the `app/assets/webpack/` directory so when we specify the outputPath here it will be relative the `app/assets/webpack` directory.** You can set the outputPath to whatever you want, in this example we will add it to a directory `/app/assets/webpack/webpack-assets/`, and here's how we would do that:
|
|
69
|
+
|
|
70
|
+
```javascript
|
|
71
|
+
outputPath: "webpack-assets/"
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
Note: _You can output these files in the asset pipeline wherever you see fit. My preference is outputting somewhere inside the `app/assets/webpack/` directory just because anything in this directory is already ignored by git due to the react_on_rails generated gitignore, meaning they will not be added by git twice! (once in your `client/app/assets/` and once in your outputted path after webpack bundling)_
|
|
75
|
+
|
|
76
|
+
Lastly, we will set the publicPath to our file(s). This will be the endpoint on our rails web server that you can visit to reach the asset (if you don't know how this works, read the [intro](#using-webpack-bundled-assets-with-the-rails-asset-pipeline)). If you've been following the previous steps, you know that we set our outputPath for our assets to be absolute at `app/assets/webpack/webpack-assets/`, which your rails app should end up hosting at `/assets/webpack-assets/file-name+hash.ext` when the server is run.
|
|
77
|
+
|
|
78
|
+
Note: _If you're having a hard time figuring out what an asset's path will be on your rails server, simply run `rake assets:precompile` and `cd public/`. The path from there to your file will then be the path/url on your web server to that asset. On top of this, it is also a good idea to check out [this doc](./rails-assets.md) to understand how `react_on_rails` allows us to access these files after precompilation, when Rails applies another hash onto the asset._
|
|
79
|
+
|
|
80
|
+
Our publicPath setting will match the path to our outputted assets on our rails web server. Given our assets in this example will be outputted to `/app/assets/webpack/webpack-assets/` and hosted at `/assets/webpack-assets/`, our publicPath would be:
|
|
81
|
+
|
|
82
|
+
```javascript
|
|
83
|
+
publicPath: "/assets/webpack-assets/"
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
Voila! Your webpack setup is complete.
|
|
87
|
+
|
|
88
|
+
##### Adding/Using `client/` Assets
|
|
89
|
+
|
|
90
|
+
Now for the fun part, we actually get to use our client assets now. The first thing you'll want to do is create an assets directory inside your client directory. The best place for this directory is probably at `client/app/assets`. Put any assets you want in there, images, stylesheets, whatever. Now that the assets are in place, we can simply `import` or `require` them in our jsx files for use in our components. For example:
|
|
91
|
+
|
|
92
|
+
```javascript
|
|
93
|
+
import myImage from 'assets/images/my-image.png'; // This uses the assets alias we created earlier to map to the client/app/assets/ directory followed by `images/my-image.png`
|
|
94
|
+
|
|
95
|
+
export default class MyImageBox extends React.Component {
|
|
96
|
+
constructor(props, context) {
|
|
97
|
+
super(props, context);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
render() {
|
|
101
|
+
return <img src={myImage} />
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
`myImage` in the example above will resolve to the path of that asset on the web server. Therefore using it as an img's source would then properly display the image/assets when this react component is rendered.
|
|
107
|
+
|
|
108
|
+
Note: **Any assets in our `client/` directory that are not imported/required for use in our jsx files will NOT be bundled and outputted by webpack.**
|
|
109
|
+
|
|
110
|
+
## Summary: Welcome people who are tired of reading
|
|
111
|
+
|
|
112
|
+
If you've read this far, you probably have a grip on everything. If you didn't, and want a condensed version, here you go:
|
|
113
|
+
|
|
114
|
+
- Add webpack's file-loader to your project
|
|
115
|
+
- Add a new loader module in your webpack.config.js file
|
|
116
|
+
- Set this loader's test attribute to a regex of the file extensions you would like to load
|
|
117
|
+
- Set the loader attribute to "file-loader"
|
|
118
|
+
- Set name to something like `"[name][md5:hash].[ext]"`
|
|
119
|
+
- Set outputPath attribute to directory of choice, relative to `app/assets/webpack` directory
|
|
120
|
+
- Set publicPath attribute, this should be the same as where the rails asset pipeline will serve your asset(s) on the server. See [this](#configuring-your-file-loader-query-parameters) for more info.
|
|
121
|
+
- Add assets directory in `client/app/`, and place whatever you would like in there
|
|
122
|
+
- Import or Require these files in your jsx and use them all you want!
|
|
123
|
+
|
|
124
|
+
### Here's a full example of a webpack.config.js configured with file-loader to load images:
|
|
125
|
+
|
|
126
|
+
```javascript
|
|
127
|
+
const webpack = require('webpack');
|
|
128
|
+
const path = require('path');
|
|
129
|
+
|
|
130
|
+
const devBuild = process.env.NODE_ENV !== 'production';
|
|
131
|
+
const nodeEnv = devBuild ? 'development' : 'production';
|
|
132
|
+
|
|
133
|
+
module.exports = {
|
|
134
|
+
entry: [
|
|
135
|
+
'./app/bundles/HelloWorld/startup/registration',
|
|
136
|
+
],
|
|
137
|
+
|
|
138
|
+
output: {
|
|
139
|
+
filename: 'webpack-bundle.js',
|
|
140
|
+
path: '../app/assets/webpack'
|
|
141
|
+
},
|
|
142
|
+
|
|
143
|
+
resolve: {
|
|
144
|
+
extensions: ['', '.js', '.jsx'],
|
|
145
|
+
alias: {
|
|
146
|
+
assets: path.resolve('./app/assets'), // Makes it easier to reference our assets in jsx files
|
|
147
|
+
react: path.resolve('./node_modules/react'),
|
|
148
|
+
'react-dom': path.resolve('./node_modules/react-dom'),
|
|
149
|
+
},
|
|
150
|
+
},
|
|
151
|
+
|
|
152
|
+
plugins: [
|
|
153
|
+
new webpack.DefinePlugin({
|
|
154
|
+
'process.env': {
|
|
155
|
+
NODE_ENV: JSON.stringify(nodeEnv),
|
|
156
|
+
}
|
|
157
|
+
})
|
|
158
|
+
],
|
|
159
|
+
module: {
|
|
160
|
+
loaders: [
|
|
161
|
+
{
|
|
162
|
+
test: /\.jsx?$/,
|
|
163
|
+
loader: 'babel-loader',
|
|
164
|
+
exclude: /node_modules/,
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
test: require.resolve('react'),
|
|
168
|
+
loader: 'imports?shim=es5-shim/es5-shim&sham=es5-shim/es5-sham',
|
|
169
|
+
},
|
|
170
|
+
{
|
|
171
|
+
// The important stuff
|
|
172
|
+
test: /\.(jpg|jpeg|png)(\?.*)?$/, // Load only .jpg .jpeg, and .png files
|
|
173
|
+
loader: 'file-loader',
|
|
174
|
+
query: {
|
|
175
|
+
name: '[name][md5:hash].[ext]', // Name of bundled asset
|
|
176
|
+
outputPath: 'webpack-assets/', // Output location for assets. Final: `app/assets/webpack/webpack-assets/`
|
|
177
|
+
publicPath: '/assets/webpack-assets/' // Endpoint asset can be found at on Rails server
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
]
|
|
181
|
+
}
|
|
182
|
+
};
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
If you'd like to understand how react_on_rails handles these bundled assets after asset precompilation and in production mode, check out: [Rails Assets](./rails-assets.md).
|
|
@@ -26,7 +26,9 @@ When Webpack's client JavaScript uses images in render methods, e.g. `<img src='
|
|
|
26
26
|
in css, e.g. `background-image: url(...)` The code (such as the CSS) generated by the Webpack
|
|
27
27
|
will have the Webpack digested name (MD5 hash). Since the Webpack generated CSS expects
|
|
28
28
|
just one level of "digesting", this "double-digesting" from Rails will cause such these assets
|
|
29
|
-
fail to load.
|
|
29
|
+
fail to load.
|
|
30
|
+
|
|
31
|
+
_If you are interested in learning how to use assets in your React components, read this doc: [Webpack, the Asset Pipeline, and Using Assets w/ React](./rails-assets-relative-paths.md)._
|
|
30
32
|
|
|
31
33
|
## The Solution: Symlink Original File Names to New File Names
|
|
32
34
|
React on Rails creates symlinks of non-digested versions (original webpack digested file names)
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# Webpack V1 Tips
|
|
2
|
+
|
|
3
|
+
The following only apply to Webpack V1. Take 1 hour and update to v2! It's worth it!
|
|
4
|
+
|
|
5
|
+
## Use the `--bail` Option When Running Webpack for CI or Deployments if using Webpack V1
|
|
6
|
+
For your scripts that statically build your Webpack bundles, use the `--bail` option. This will ensure that CI and your product deployment **halt** if Webpack cannot complete! For more details, see the documentation for [Webpack's `--bail` option](https://webpack.js.org/configuration/other-options/#bail). Note, you might not want to use the `--bail` option if you just want to depend on Webpack returning a non-zero error code and you want to see all the errors, rather than only the first error.
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
## Entry Points
|
|
10
|
+
You should ensure you configure the entry points correctly for webpack if you want to break out libraries into a "vendor" bundle where your libraries are packaged separately from your app's code. If you send web clients your vendor bundle separately from your app bundles, then web clients might have the vendor bundle cached while they receive updates for your app.
|
|
11
|
+
|
|
12
|
+
You need both include `react-dom` and `react` as values for `entry`, like this:
|
|
13
|
+
|
|
14
|
+
```
|
|
15
|
+
entry: {
|
|
16
|
+
|
|
17
|
+
// See use of 'vendor' in the CommonsChunkPlugin inclusion below.
|
|
18
|
+
vendor: [
|
|
19
|
+
'babel-core/polyfill',
|
|
20
|
+
'react',
|
|
21
|
+
'react-dom',
|
|
22
|
+
],
|
|
23
|
+
```
|
|
@@ -6,9 +6,6 @@ You can try out example app, [shakacode/react-webpack-rails-tutorial](https://gi
|
|
|
6
6
|
## Webpack v1 or v2?
|
|
7
7
|
We recommend using Webpack version 2.2.1 or greater.
|
|
8
8
|
|
|
9
|
-
## Use the `--bail` Option When Running Webpack for CI or Deployments
|
|
10
|
-
For your scripts that statically build your Webpack bundles, use the `--bail` option. This will ensure that CI and your product deployment **halt** if Webpack cannot complete! For more details, see the documentation for [Webpack's `--bail` option](https://webpack.js.org/configuration/other-options/#bail). Note, you might not want to use the `--bail` option if you just want to depend on Webpack returning a non-zero error code and you want to see all the errors, rather than only the first error.
|
|
11
|
-
|
|
12
9
|
## yarn or npm?
|
|
13
10
|
Yarn is the current recommendation!
|
|
14
11
|
|
|
@@ -16,15 +13,10 @@ Yarn is the current recommendation!
|
|
|
16
13
|
|
|
17
14
|
You should ensure you configure the entry points correctly for webpack if you want to break out libraries into a "vendor" bundle where your libraries are packaged separately from your app's code. If you send web clients your vendor bundle separately from your app bundles, then web clients might have the vendor bundle cached while they receive updates for your app.
|
|
18
15
|
|
|
19
|
-
|
|
16
|
+
Webpack v2 makes this very convenient! See:
|
|
17
|
+
|
|
18
|
+
* [Implicit Common Vendor Chunk](https://webpack.js.org/guides/code-splitting-libraries/#implicit-common-vendor-chunk)
|
|
19
|
+
* [Manifest File](https://webpack.js.org/guides/code-splitting-libraries/#manifest-file)
|
|
20
|
+
|
|
20
21
|
|
|
21
|
-
```
|
|
22
|
-
entry: {
|
|
23
22
|
|
|
24
|
-
// See use of 'vendor' in the CommonsChunkPlugin inclusion below.
|
|
25
|
-
vendor: [
|
|
26
|
-
'babel-core/polyfill',
|
|
27
|
-
'react',
|
|
28
|
-
'react-dom',
|
|
29
|
-
],
|
|
30
|
-
```
|