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
# React, Redux, React-Bootstrap, ES7, Webpack, Ruby on Rails Demo
2
4
5
+
* Server-Side Rendering of React via the [react_on_rails gem](https://github.com/shakacode/react_on_rails)
6
+
* Live at [www.reactrails.com](http://www.reactrails.com/)
7
+
3
8
## Control Plane Deployment Example
4
9
5
-
Control Plan offers a viable, cost-saving alternative to Heroku, especially when using the [cpl gem](https://rubygems.org/gems/cpl) to deploy to Control Plane.
10
+
[Control Plane](https://controlplane.com) offers a viable, cost-saving alternative to Heroku, especially when using the [cpl gem](https://rubygems.org/gems/cpl) to deploy to Control Plane.
6
11
7
-
ShakaCode recently migrated HiChee.com to ControlPlane, resulting in a two-thirds reduction in server hosting costs!
12
+
ShakaCode recently migrated [HiChee.com](https://hichee.com) to Control Plane, resulting in a two-thirds reduction in server hosting costs!
8
13
9
-
See https://github.com/shakacode/heroku-to-control-plane for more information on how to migrate from Heroku to Control Plane.
14
+
See doc in [./.controlplane/readme.md](./.controlplane/readme.md) for how to easily deploy this app to Control Plane.
The instructions leverage the `cpl` CLI, with source code and many more tips on how to migrate from Heroku to Control Plane
17
+
in https://github.com/shakacode/heroku-to-control-plane.
14
18
15
-
See doc in [./.controlplane/readme.md](./.controlplane/readme.md).
19
+
----
16
20
17
21
## React on Rails Pro and ShakaCode Pro Support
18
22
@@ -24,29 +28,27 @@ React on Rails Pro provides Node server rendering and other performance enhancem
24
28
*[HVMN’s 90% Reduction in Server Response Time from React on Rails Pro](https://blog.shakacode.com/hvmns-90-reduction-in-server-response-time-from-react-on-rails-pro-eb08226687db)
25
29
*[Egghead React on Rails Pro Deployment Highlights](https://github.com/shakacode/react_on_rails/wiki/Egghead-React-on-Rails-Pro-Deployment-Highlights)
26
30
27
-
For more information, see the [React on Rails Pro Docs](https://github.com/shakacode/react_on_rails/wiki).
28
-
29
-
The [ShakaCode Pro Support Plan](http://www.shakacode.com/work/shakacode-pro-support.pdf) can help you with:
31
+
For more information, see the [React on Rails Pro Docs](https://www.shakacode.com/react-on-rails-pro/).
30
32
31
33
* Optimizing your front end setup with Webpack v5+ and Shakapacker for React on Rails including code splitting with loadable-components.
32
34
* Upgrading your app to use the current Webpack setup that skips the Sprockets asset pipeline.
33
35
* Better performance client and server side.
34
36
35
-
ShakaCode can also help you with your custom software development needs. We specialize in marketplace and e-commerce applications that utilize both Rails and React. Because we own [HiChee.com](https://hichee.com), we can leverage that code for your app!
37
+
ShakaCode can also help you with your custom software development needs. We specialize in marketplace and e-commerce applications that utilize both Rails and React. We can even leverage our code for [HiChee.com](https://hichee.com) for your app!
36
38
37
39
See the [ShakaCode Client Engagement Model](https://www.shakacode.com/blog/client-engagement-model/) article to learn how we can work together.
38
40
39
41
------
40
42
41
-
# Community
43
+
##Community
42
44
43
45
***[forum.shakacode.com](https://forum.shakacode.com)**: Post your questions
44
46
***[@railsonmaui on Twitter](https://twitter.com/railsonmaui)**
45
47
* For a live, example of the code in this repo, see [www.reactrails.com](http://www.reactrails.com).
46
48
47
49
------
48
50
49
-
# Testimonials
51
+
##Testimonials
50
52
From Joel Hooks, Co-Founder, Chief Nerd at [egghead.io](https://egghead.io/), January 30, 2017:
@@ -55,7 +57,7 @@ For more testimonials, see [Live Projects](https://github.com/shakacode/react_on
55
57
56
58
-------
57
59
58
-
# Videos
60
+
##Videos
59
61
60
62
### [React On Rails Tutorial Series](https://www.youtube.com/playlist?list=PL5VAKH-U1M6dj84BApfUtvBjvF-0-JfEU)
61
63
@@ -68,14 +70,7 @@ For more testimonials, see [Live Projects](https://github.com/shakacode/react_on
68
70
* 2022-01-11: Added example of deployment [to the ControlPlane](.controlplane/readme.md).
69
71
* We made a react-native client: [shakacode/reactrails-react-native-client](https://github.com/shakacode/reactrails-react-native-client/). If you want to hack on this with us, [email [email protected]](mailto:[email protected]).
70
72
71
-
This tutorial app demonstrates advanced functionality beyond what's provided by the React on Rails generators, mostly in the area of Webpack and React usage. Due to the architecture of placing all client side assets in the `/client` directory, React on Rails supports just about anything that Webpack and JavaScript can do, such as:
72
-
73
-
1.**Handling of Sass and Bootstrap**: This tutorial uses [CSS modules via Webpack](https://github.com/css-modules/css-modules) so that all your client side configuration can be handled in a pure JavaScript tooling manner. This allows for hot reloading and a better separation of concerns (Rails for server-side functionality versus NPM/Webpack for all things client side). The alternative approach of using the traditional Rails Asset Pipeline for your CSS is simpler and supported by [React on Rails](https://github.com/shakacode/react_on_rails).
## Server Rendering via the [react_on_rails gem](https://github.com/shakacode/react_on_rails)
77
73
78
-
#### Live at [www.reactrails.com](http://www.reactrails.com/)
79
74
##### Check out our [react-native client for this project!](https://github.com/shakacode/react-native-tutorial)
80
75
This is a simple example application that illustrates the use of ReactJs to implement a commenting system. Front-end code leverages both ReactJs and Rails asset pipeline while the backend is 100% Rails. It shows off a little bit of the interactivity of a ReactJs application, allowing the commmenter to choose the form layout. `react-bootstrap` is used for the React components. A pure Rails UI generated from scaffolding is shown for comparison.
81
76
@@ -87,7 +82,6 @@ You can see this tutorial live here: [http://reactrails.com/](http://reactrails.
87
82
+[Technologies Involved](#technologies-involved)
88
83
+[Basic Demo Setup](#basic-demo-setup)
89
84
+[Basic Command Line](#basic-command-line)
90
-
+[Experimenting with Hot Reloading](#experimenting-with-hot-reloading-applies-to-both-procfilehot-and-procfileexpress)
91
85
+[Javascript Development without Rails](#javascript-development-without-rails-using-the-webpack-dev-server)
92
86
+[Rails Integration](#rails-integration)
93
87
+[Webpack](#webpack)
@@ -158,12 +152,6 @@ See package.json and Gemfile for versions
158
152
- To start all development processes: `foreman start -f Procfile.dev`
159
153
- To start only all Rails development processes: `foreman start -f Procfile.hot`
160
154
161
-
### Experimenting with Hot Reloading: applies to both `Procfile.hot` and `Procfile.express`
162
-
1. With the browser open to any JSX file, such as [client/app/bundles/comments/components/CommentBox/CommentBox.jsx](client/app/bundles/comments/components/CommentBox/CommentBox.jsx) and you can change the JSX code, hit save, and you will see the screen update without refreshing the window. This applies to port 3000 and port 4000.
163
-
1. Try changing a `.scss` file, such as a color in [client/app/bundles/comments/components/CommentBox/CommentList/Comment/Comment.scss](client/app/bundles/comments/components/CommentBox/CommentList/Comment/Comment.module.scss). You can see port 3000 or 4000 update automatically.
164
-
1. Be sure to take a look at the different Procfiles in this directory, as described below.
165
-
166
-
167
155
## Rails Integration
168
156
**We're now using Webpack for all Sass and JavaScript assets so we can do CSS Modules within Rails!**
1.[`Procfile.dev`](Procfile.dev): Starts the Webpack Dev Server and Rails with Hot Reloading.
226
-
2.[`Procfile.hot`](Procfile.hot): Starts the Rails server and the webpack server to provide hot reloading of assets, JavaScript and CSS.
227
-
3.[`Procfile.static`](Procfile.static): Starts the Rails server and generates static assets that are used for tests.
228
-
5.[`Procfile.spec`](Procfile.spec): Starts webpack to create the static files for tests. **Good to know:** If you want to start `rails s` separately to debug in `pry`, then run `Procfile.spec` to generate the assets and run `rails s` in a separate console.
229
-
6.[`Procfile.static.trace`](Procfile.static.trace): Same as `Procfile.static` but prints tracing information useful for debugging server rendering.
230
-
4.[`Procfile.express`](Procfile.express): Starts only the Webpack Dev Server for rendering your components with only an Express server.
231
-
232
-
In general, you want to avoid running more webpack watch processes than you need.
233
-
234
-
## Rendering with Express Server
235
-
UPDATE: 2016-07-31
236
-
237
-
We no longer recommend using an express server with Rails. It's simply not necessary because:
238
-
239
-
1. Rails can hot reload
240
-
2. There's extra maintenance in keeping this synchronized.
241
-
3. React on Rails does not have a shared_store JS rendering, per [issue #504](https://github.com/shakacode/react_on_rails/issues/504)
242
-
243
-
### Setup
244
-
245
-
1.`foreman start -f Procfile.express`
246
-
2. Open a browser tab to http://localhost:4000 for the Hot Module Replacement Example just using an express server (no Rails involved). This is good for fast prototyping of React components. However, this setup is not as useful now that we have hot reloading working for Rails!
247
-
3. Try Hot Reloading steps below!
214
+
1.[`Procfile.static`](Procfile.dev-static): Starts the Rails server and generates static assets that are used for tests.
248
215
249
216
## Contributors
250
217
[The Shaka Code team!](http://www.shakacode.com/about/), led by [Justin Gordon](https://github.com/justin808/), along with with many others. See [contributors.md](docs/contributors.md)
251
218
252
219
### RubyMine and WebStorm
253
220
Special thanks to [JetBrains](https://www.jetbrains.com) for their great tools: [RubyMine](https://www.jetbrains.com/ruby/) and [WebStorm](https://www.jetbrains.com/webstorm/). Some developers of this project use RubyMine at the top level, mostly for Ruby work, and we use WebStorm opened up to the `client` directory to focus on JSX and Sass files.
254
221
255
-
## About [ShakaCode](http://www.shakacode.com/)
256
-
If you would like to know more about ShakaCode, please read [Who Is ShakaCode](http://www.shakacode.com/2015/09/17/who-is-shaka-code.html) and [Success the ShakaCode Way!](http://www.shakacode.com/2015/11/26/success-the-shakacode-way.html)
257
-
258
-
Please visit [our forums!](http://forum.shakacode.com). We've got a [category dedicated to react_on_rails](http://forum.shakacode.com/c/rails/reactonrails).
259
-
260
-
You can also join our slack room for some free advice. Email us for an invite.
222
+
### Hiring
261
223
262
224
We're looking for great developers that want to work with Rails + React (and react-native!) with a remote-first, distributed, worldwide team, for our own products, client work, and open source. [More info here](http://www.shakacode.com/about/index.html#work-with-us).
263
225
264
226
---
265
-
*Identical to top of page*
266
227
267
228
## Thank you from Justin Gordon and [ShakaCode](http://www.shakacode.com)
268
229
269
230
Thank you for considering using [React on Rails](https://github.com/shakacode/react_on_rails).
270
231
271
-
***Video:**[Front-End Sadness to Happiness: The React on Rails Story](https://www.youtube.com/watch?v=SGkTvKRPYrk): History, motivations, philosophy, and overview.
272
-
**[Click here for talk slides](http://www.shakacode.com/talks).*
273
-
274
-
We at [ShakaCode](http://www.shakacode.com) are a small, boutique, remote-first application development company. We fund this project by:
275
-
276
-
* Providing priority support and training for anything related to React + Webpack + Rails in our [Coaching Program](http://www.shakacode.com/work/shakacode-coaching-plan.pdf).
277
-
* Building custom web and mobile (React Native) applications. We typically work with a technical founder or CTO and instantly provide a full development team including designers.
278
-
* Migrating **Angular** + Rails to React + Rails. You can see an example of React on Rails and our work converting Angular to React on Rails at [egghead.io](https://egghead.io/browse/frameworks).
279
-
* Augmenting your team to get your product completed more efficiently and quickly.
280
-
281
-
My article "[Why Hire ShakaCode?](https://blog.shakacode.com/can-shakacode-help-you-4a5b1e5a8a63#.jex6tg9w9)" provides additional details about our projects.
282
-
283
-
If any of this resonates with you, please email me, [[email protected]](mailto:[email protected]). I offer a free half-hour project consultation, on anything from React on Rails to any aspect of web or mobile application development for both consumer and enterprise products.
284
-
285
-
We are **[currently looking to hire](http://www.shakacode.com/about/#work-with-us)** like-minded developers that wish to work on our projects, including [Friends and Guests](https://www.friendsandguests.com).
286
-
287
-
I appreciate your attention and sharing of these offerings with anybody that we can help. Your support allows me to bring you and your team [front-end happiness in the Rails world](https://www.youtube.com/watch?v=SGkTvKRPYrk).
0 commit comments