You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: .github/ISSUE_TEMPLATE/bug_report.md
-1
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,6 @@ about: Create a report to help us improve
4
4
title: ''
5
5
labels: ''
6
6
assignees: ''
7
-
8
7
---
9
8
10
9
A bug is a crash or incorrect behavior. If you have a debugging or troubleshooting question, please open [a discussion](https://github.com/shakacode/react_on_rails/discussions).
@@ -16,22 +18,25 @@ See [Dev Initial Setup](#dev-initial-setup) below for, well... initial setup,
16
18
and [Running tests](#running-tests) for more details on running tests.
17
19
18
20
# IDE/IDE SETUP
21
+
19
22
It's critical to configure your IDE/editor to ignore certain directories. Otherwise your IDE might slow to a crawl!
20
23
21
-
* /coverage
22
-
* /tmp
23
-
* /gen-examples
24
-
* /node_package/lib
25
-
* /node_modules
26
-
* /spec/dummy/app/assets/webpack
27
-
* /spec/dummy/log
28
-
* /spec/dummy/node_modules
29
-
* /spec/dummy/client/node_modules
30
-
* /spec/dummy/tmp
31
-
* /spec/react_on_rails/dummy-for-generators
24
+
- /coverage
25
+
- /tmp
26
+
- /gen-examples
27
+
- /node_package/lib
28
+
- /node_modules
29
+
- /spec/dummy/app/assets/webpack
30
+
- /spec/dummy/log
31
+
- /spec/dummy/node_modules
32
+
- /spec/dummy/client/node_modules
33
+
- /spec/dummy/tmp
34
+
- /spec/react_on_rails/dummy-for-generators
32
35
33
36
# Configuring your test app to use your local fork
37
+
34
38
You can test the `react-on-rails` gem using your own external test app or the gem's internal `spec/dummy` app. The `spec/dummy` app is an example of the various setup techniques you can use with the gem.
39
+
35
40
```
36
41
├── test_app
37
42
| └── client
@@ -41,6 +46,7 @@ You can test the `react-on-rails` gem using your own external test app or the ge
41
46
```
42
47
43
48
## Testing the Ruby Gem
49
+
44
50
If you want to test the ruby parts of the gem with an application before you release a new version of the gem, you can specify the path to your local version via your test app's Gemfile:
Note that you will need to bundle install after making this change, but also that **you will need to restart your Rails application if you make any changes to the gem**.
51
57
52
58
## Testing the Node package for react-on-rails via Yalc
59
+
53
60
In addition to testing the Ruby parts out, you can also test the node package parts of the gem with an external application. First, be **sure** to build the NPM package:
54
61
55
62
```sh
@@ -70,8 +77,10 @@ yalc add react-on-rails
70
77
```
71
78
72
79
The workflow is:
80
+
73
81
1. Make changes to the node package.
74
82
2. We need yalc to push and then run yarn:
83
+
75
84
```
76
85
cd <top dir>
77
86
# Will send the updates to other folders
@@ -93,6 +102,7 @@ Don't forget you may need to run yarn after adding packages with yalc to install
93
102
```
94
103
95
104
#### Example: Testing NPM changes with the dummy app
105
+
96
106
1. Add `console.log('Hello!')` to [clientStartup.ts, function render](https://github.com/shakacode/react_on_rails/blob/master/node_package/src/clientStartup.ts in `/node_package/src/clientStartup.js` to confirm we're getting an update to the node package client side. Do the same for function `serverRenderReactComponent` in `/node_package/src/serverRenderReactComponent.ts`.
97
107
2. Refresh the browser if the server is already running or start the server using `foreman start` from `react_on_rails/spec/dummy` and navigate to `http://localhost:5000/`. You will now see the `Hello!` message printed in the browser's console. If you did not see that message, then review the steps above for the workflow of making changes and pushing them via yalc.
98
108
@@ -101,13 +111,14 @@ Don't forget you may need to run yarn after adding packages with yalc to install
101
111
## Dev Initial Setup
102
112
103
113
### Prereqs
114
+
104
115
After checking out the repo, making sure you have rvm and nvm setup (setup ruby and node), cd to `spec/dummy` and run `bin/setup` to install ruby dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
105
116
106
117
### Local Node Package
107
118
108
119
Note, the example and dummy apps will use your local node_package folder as the react-on-rails node package. This will also be done automatically for you via the `rake examples:gen_all` rake task.
109
120
110
-
*Side note: It's critical to use the alias section of the webpack config to avoid a double inclusion error. This has already been done for you in the example and dummy apps, but for reference:*
121
+
_Side note: It's critical to use the alias section of the webpack config to avoid a double inclusion error. This has already been done for you in the example and dummy apps, but for reference:_
111
122
112
123
```js
113
124
resolve: {
@@ -129,7 +140,6 @@ yarn build
129
140
Or run this which builds the yarn package, then the webpack files for spec/dummy, and runs tests in
130
141
spec/dummy.
131
142
132
-
133
143
```sh
134
144
# Optionally change default capybara driver
135
145
export DRIVER=selenium_firefox
@@ -171,9 +181,11 @@ yarn run check
171
181
```
172
182
173
183
### Starting the Dummy App
184
+
174
185
To run the dummy app, it's **CRITICAL** to not just run `rails s`. You have to run `foreman start` with one of the Procfiles. If you don't do this, then `webpack` will not generate a new bundle, and you will be seriously confused when you change JavaScript and the app does not change. If you change the webpack configs, then you need to restart foreman. If you change the JS code for react-on-rails, you need to run `yarn run build`. Since the react-on-rails package should be sym linked, you don't have to `yarn react-on-rails` after every change.
175
186
176
187
### RSpec Testing
188
+
177
189
Run `rake` for testing the gem and `spec/dummy`. Otherwise, the `rspec` command only works for testing within the sample apps, like `spec/dummy`.
178
190
179
191
If you run `rspec` at the top level, you'll see this message: `require': cannot load such file -- rails_helper (LoadError)`
@@ -189,15 +201,16 @@ Run `rake -T` or `rake -D` to see testing options.
189
201
See below for verifying changes to the generators.
190
202
191
203
### Install Generator
204
+
192
205
In your Rails app add this gem with a path to your fork.
The main installer can be run with ```rails generate react_on_rails:install```
213
+
The main installer can be run with `rails generate react_on_rails:install`
201
214
202
215
Then use yalc to add the npm module.
203
216
@@ -214,19 +227,22 @@ yalc add react-on-rails
214
227
```
215
228
216
229
### Testing the Generator
230
+
217
231
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
232
219
233
`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.
220
234
221
235
### Linting
236
+
222
237
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`
223
238
224
-
*[Install Docker Toolbox for Mac](https://www.docker.com/toolbox)
225
-
*[Install Docker Compose for Linux](https://docs.docker.com/compose/install/)
239
+
-[Install Docker Toolbox for Mac](https://www.docker.com/toolbox)
240
+
-[Install Docker Compose for Linux](https://docs.docker.com/compose/install/)
226
241
227
242
Once you have docker and docker-compose running locally, run `docker-compose build lint`. This will build the `reactonrails_lint` docker image and docker-compose `lint` container. The initial build is slow, but after the install, startup is very quick.
228
243
229
244
### Linting Commands
245
+
230
246
Run `rake lint`.
231
247
232
248
Alternately with Docker:
@@ -238,12 +254,14 @@ You can run specific linting for directories or files by using `docker-compose r
238
254
`docker-compose run lint bash` sets you up to run from the container command line.
239
255
240
256
### Updating Rubocop
257
+
241
258
2 files require updating to update the Rubocop version:
242
259
243
260
1.`react_on_rails.gemspec`
244
261
2.`spec/dummy/Gemfile`
245
262
246
263
### Docker CI - Test and Linting
264
+
247
265
Docker CI and Tests containers have a xvfd server automatically started for headless browser testing with selenium and Firefox.
248
266
249
267
Run `docker-compose build ci` to build the CI container. Run `docker-compose run ci` to start all rspec tests and linting. `docker-compose run --entrypoint=/bin/bash` will override the default CI action and place you inside the CI container in a bash session. This is what is run on Travis-CI.
"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!"
43
50
"Gone are the days of using bower or rails gems to manage front end dependencies! React on Rails provides webpack integration to give us a modern build process, es6 syntax and the entire npm ecosystem of libraries to use, along with view helpers to make React integration with Rails feel better than a cool summer breeze." - [@kalamyty](https://twitter.com/kalamyty), [flynfish](https://github.com/flynfish).
0 commit comments