diff --git a/docs/additional-details/generator-details.md b/docs/additional-details/generator-details.md index 199f64634..8c50e065d 100644 --- a/docs/additional-details/generator-details.md +++ b/docs/additional-details/generator-details.md @@ -37,7 +37,7 @@ Then you may run `rails s` ``` -Another good option is to create a simple test app per the [Tutorial](https://www.shakacode.com/react-on-rails/docs/guides/tutorial/). +Another good option is to create a simple test app per the [Tutorial](../guides/tutorial.md). # Understanding the Organization of the Generated Client Code diff --git a/docs/additional-details/manual-installation-overview.md b/docs/additional-details/manual-installation-overview.md index ebf52a5a7..e5599ab40 100644 --- a/docs/additional-details/manual-installation-overview.md +++ b/docs/additional-details/manual-installation-overview.md @@ -13,7 +13,7 @@ The only requirements within this directory for basic React on Rails integration 1. Your Webpack configuration files: 1. Create outputs in a directory like `/public/webpack`, which is customizable in your `config/initializers/react_on_rails.rb`. 1. Provide server rendering if you wish to use that feature. -1. Your JavaScript code "registers" any components and stores per the ReactOnRails APIs of ReactOnRails.register(components) and ReactOnRails.registerStore(stores). See [our javascript API docs](https://www.shakacode.com/react-on-rails/docs/api/javascript-api/) and the [ReactOnRails.js source](https://github.com/shakacode/react_on_rails/tree/master/node_package/src/ReactOnRails.js). +1. Your JavaScript code "registers" any components and stores per the ReactOnRails APIs of ReactOnRails.register(components) and ReactOnRails.registerStore(stores). See [our JavaScript API docs](../api/javascript-api.md) and the [React on Rails source](https://github.com/shakacode/react_on_rails/tree/master/node_package/src/ReactOnRails.client.js). 1. Set your registration file as an "entry" point in your Webpack configs. 1. Configure scripts in `client/package.json` as shown in the example apps. These are used for building your Webpack assets. Also do this for your top-level `package.json`. @@ -23,6 +23,6 @@ The only requirements within this directory for basic React on Rails integration 1. Configure the `config/initializers/react_on_rails.rb`. You can adjust some necessary settings and defaults. See file [https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/config/initializers/react_on_rails.rb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/config/initializers/react_on_rails.rb) for a detailed example of configuration, including comments on the different values to configure. 1. Configure your Procfiles per the example apps. These are at the root of your Rails installation. 1. Configure your top-level JavaScript files for inclusion in your layout. Use one file for static assets, and a separate file for any files in your setup that are not part of your Webpack build. This separation is needed for hot reloading. If hot reloading is not needed, simply configure your `application.js` file to include the Webpack-generated files. -1. If you are deploying to Heroku, see [our Heroku deployment documentation](https://www.shakacode.com/react-on-rails/docs/deployment/heroku-deployment/). +1. If you are deploying to Heroku, see [our Heroku deployment documentation](../deployment/heroku-deployment.md). If I missed anything, please submit a PR or file an issue. diff --git a/docs/api/view-helpers-api.md b/docs/api/view-helpers-api.md index c2420caee..7706f3a64 100644 --- a/docs/api/view-helpers-api.md +++ b/docs/api/view-helpers-api.md @@ -2,7 +2,7 @@ ## View Helpers API -Once the bundled files have been generated in your `app/assets/webpack` folder, and you have registered your components, you will want to render these components on your Rails views using the included helper method, [`react_component`](https://www.shakacode.com/react-on-rails/docs/api/view-helpers-api/#react_component). +Once the bundled files have been generated in your `app/assets/webpack` folder, and you have registered your components, you will want to render these components on your Rails views using the included helper method, [`react_component`](#react_component). --- @@ -25,7 +25,7 @@ Uncommonly used options: ``` - **component_name:** Can be a React component, created using a React Function Component, an ES6 class or a Render-Function that returns a React component (or, only on the server side, an object with shape `{ redirectLocation, error, renderedHtml }`), or a "renderer function" that manually renders a React component to the dom (client side only). Note, a "renderer function" is a special type of "Render-Function." A "renderer function" takes a 3rd param of a DOM ID. - All options except `props, id, html_options` will inherit from your `react_on_rails.rb` initializer, as described [here](https://www.shakacode.com/react-on-rails/docs/guides/configuration/). + All options except `props, id, html_options` will inherit from your `react_on_rails.rb` initializer, as described [here](../guides/configuration.md). - **general options:** - **props:** Ruby Hash which contains the properties to pass to the React object, or a JSON string. If you pass a string, we'll escape it for you. - **prerender:** enable server-side rendering of a component. Set to false when debugging! @@ -105,7 +105,7 @@ You can call `rails_context` or `rails_context(server_side: true|false)` from yo A "renderer function" is a Render-Function that accepts three arguments (rather than 2): `(props, railsContext, domNodeId) => { ... }`. Instead of returning a React component, a renderer is responsible for installing a callback that will call `ReactDOM.render` (in React 16+, `ReactDOM.hydrate`) to render a React component into the DOM. The "renderer function" is called at the same time the document ready event would instantiate the React components into the DOM. -Why would you want to call `ReactDOM.hydrate` yourself? One possible use case is [code splitting](https://www.shakacode.com/react-on-rails/docs/javascript/code-splitting/). In a nutshell, you don't want to load the React component on the DOM node yet. So you want to install some handler that will call `ReactDOM.hydrate` at a later time. In the case of code splitting with server rendering, the server rendered code has any async code loaded and used to server render. Thus, the client code must also fully load any asynch code before server rendering. Otherwise, the client code would first render partially, not matching the server rendering, and then a second later, the full code would render, resulting in an unpleasant flashing on the screen. +Why would you want to call `ReactDOM.hydrate` yourself? One possible use case is [code splitting](../javascript/code-splitting.md). In a nutshell, you don't want to load the React component on the DOM node yet. So you want to install some handler that will call `ReactDOM.hydrate` at a later time. In the case of code splitting with server rendering, the server rendered code has any async code loaded and used to server render. Thus, the client code must also fully load any asynch code before server rendering. Otherwise, the client code would first render partially, not matching the server rendering, and then a second later, the full code would render, resulting in an unpleasant flashing on the screen. Renderer functions are not meant to be used on the server since there's no DOM on the server. Instead, use a Render-Function. Attempting to server render with a renderer function will throw an error. @@ -115,9 +115,9 @@ Renderer functions are not meant to be used on the server since there's no DOM o [React Router](https://reactrouter.com/) is supported, including server-side rendering! See: -1. [React on Rails docs for React Router](https://www.shakacode.com/react-on-rails/docs/javascript/react-router/) +1. [React on Rails docs for React Router](../javascript/react-router.md) 2. Examples in [spec/dummy/app/views/react_router](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/views/react_router) and follow to the JavaScript code in the [spec/dummy/client/app/startup/ServerRouterApp.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/ServerRouterApp.jsx). -3. [Code Splitting docs](https://www.shakacode.com/react-on-rails/docs/javascript/code-splitting/) for information about how to set up code splitting for server rendered routes. +3. [Code Splitting docs](../javascript/code-splitting.md) for information about how to set up code splitting for server rendered routes. --- diff --git a/docs/contributor-info/linters.md b/docs/contributor-info/linters.md index f6e6cc53c..ac0f57627 100644 --- a/docs/contributor-info/linters.md +++ b/docs/contributor-info/linters.md @@ -1,6 +1,6 @@ # Linters -These linters support the [ShakaCode Style Guidelines](https://www.shakacode.com/react-on-rails/docs/misc/style/) +These linters support the [ShakaCode Style Guidelines](../misc/style.md) ## Autofix! diff --git a/docs/contributor-info/pull-requests.md b/docs/contributor-info/pull-requests.md index 13f96cafd..bdc9b34e5 100644 --- a/docs/contributor-info/pull-requests.md +++ b/docs/contributor-info/pull-requests.md @@ -37,8 +37,5 @@ When making doc changes, we want the change to work on both the gitbook and the ### Links to other docs: -- When making references to doc files, use a full URL to [https://www.shakacode.com/react-on-rails/docs](https://www.shakacode.com/react-on-rails/docs), for example: - `[Installation Overview](https://www.shakacode.com/react-on-rails/docs/additional-details/manual-installation-overview/)` - - When making references to source code files, use a full GitHub URL, for example: `[spec/dummy/config/initializers/react_on_rails.rb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/config/initializers/react_on_rails.rb)` diff --git a/docs/getting-started.md b/docs/getting-started.md index 299094b33..ea62010e8 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -2,10 +2,10 @@ Note, the best way to understand how to use ReactOnRails is to study a few simple examples. You can do a quick demo setup, either on your existing app or on a new Rails app. -This documentation assumes the usage of ReactOnRails with Shakapacker 7. For installation on Shakapacker 6, check [tips for usage with Shakapacker 6](https://www.shakacode.com/react-on-rails/docs/aditional-details/tips-for-usage-with-sp6) first. +This documentation assumes the usage of ReactOnRails with Shakapacker 7. For installation on Shakapacker 6, check [tips for usage with Shakapacker 6](./additional-details/tips-for-usage-with-sp6.md) first. -1. Do the quick [tutorial](https://www.shakacode.com/react-on-rails/docs/guides/tutorial/). -2. Add React on Rails to an existing Rails app per [the instructions](https://www.shakacode.com/react-on-rails/docs/guides/installation-into-an-existing-rails-app/). +1. Do the quick [tutorial](./guides/tutorial.md). +2. Add React on Rails to an existing Rails app per [the instructions](./guides/installation-into-an-existing-rails-app.md). 3. Look at [spec/dummy](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy), a simple, no DB example. 4. Look at [github.com/shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial); it's a full-featured example live at [www.reactrails.com](http://reactrails.com). @@ -20,7 +20,7 @@ bundle add shakapacker --strict rails shakapacker:install ``` -You may need to check [the instructions for installing into an existing Rails app](https://www.shakacode.com/react-on-rails/docs/guides/installation-into-an-existing-rails-app/) if you have an already working Rails application. +You may need to check [the instructions for installing into an existing Rails app](./guides/installation-into-an-existing-rails-app.md) if you have an already working Rails application. 1. Add the `react_on_rails` gem to Gemfile: Please use [the latest version](https://rubygems.org/gems/react_on_rails) to ensure you get all the security patches and the best support. @@ -69,7 +69,7 @@ issue. ### Configuration -- Configure `config/initializers/react_on_rails.rb`. You can adjust some necessary settings and defaults. See file [docs/basics/configuration.md](https://www.shakacode.com/react-on-rails/docs/guides/configuration/) for documentation of all configuration options. +- Configure `config/initializers/react_on_rails.rb`. You can adjust some necessary settings and defaults. See file [docs/basics/configuration.md](./guides/configuration.md) for documentation of all configuration options. - Configure `config/shakapacker.yml`. If you used the generator and the default Shakapacker setup, you don't need to touch this file. If you are customizing your setup, then consult the [spec/dummy/config/shakapacker.yml](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/config/shakapacker.yml) example or the official default [shakapacker.yml](https://github.com/shakacode/shakapacker/blob/master/lib/install/config/shakapacker.yml). - Most apps should rely on the Shakapacker setup for Webpack. Shakapacker v6+ includes support for Webpack version 5. @@ -104,7 +104,7 @@ issue. <%= react_component("HelloWorld", props: { name: "Stranger" }) %> ``` -- This is what your HelloWorld.js file might contain. The railsContext is always available for any parameters that you _always_ want available for your React components. It has _nothing_ to do with the concept of the [React Context](https://reactjs.org/docs/context.html). See [Render-Functions and the RailsContext](https://www.shakacode.com/react-on-rails/docs/guides/render-functions-and-railscontext/) for more details on this topic. +- This is what your HelloWorld.js file might contain. The railsContext is always available for any parameters that you _always_ want available for your React components. It has _nothing_ to do with the concept of the [React Context](https://reactjs.org/docs/context.html). See [Render-Functions and the RailsContext](./guides/render-functions-and-railscontext.md) for more details on this topic. ```js import React from 'react'; @@ -120,7 +120,7 @@ issue. }; ``` -See the [View Helpers API](https://www.shakacode.com/react-on-rails/docs/api/view-helpers-api/) for more details on `react_component` and its sibling function `react_component_hash`. +See the [View Helpers API](./api/view-helpers-api.md) for more details on `react_component` and its sibling function `react_component_hash`. ## Globally Exposing Your React Components @@ -149,7 +149,7 @@ For details on techniques to use different code for client and server rendering, You have two ways to specify your React components. You can either register the React component (either function or class component) directly, or you can create a function that returns a React component, which we using the name of a "render-function". Creating a render-function allows you to: -1. Access to the `railsContext`. See the [documentation for the railsContext](https://www.shakacode.com/react-on-rails/docs/guides/render-functions-and-railscontext/) in terms of why you might need it. You **need** a Render-Function to access the `railsContext`. +1. Access to the `railsContext`. See the [documentation for the railsContext](./guides/render-functions-and-railscontext.md) in terms of why you might need it. You **need** a Render-Function to access the `railsContext`. 2. Use the passed-in props to initialize a redux store or set up `react-router`. 3. Return different components depending on what's in the props. @@ -189,7 +189,7 @@ For server rendering, if you wish to return multiple HTML strings from a Render- } ``` -For details on using react_component_hash with react-helmet, see [our react-helmet documentation](https://www.shakacode.com/react-on-rails/docs/javascript/react-helmet/). +For details on using react_component_hash with react-helmet, see [our react-helmet documentation](./javascript/react-helmet.md). ## Error Handling @@ -199,4 +199,4 @@ For details on using react_component_hash with react-helmet, see [our react-helm ## I18n React on Rails provides an option for automatic conversions of Rails `*.yml` locale files into `*.json` or `*.js`. -See the [How to add I18n](https://www.shakacode.com/react-on-rails/docs/guides/i18n/) for a summary of adding I18n. +See the [How to add I18n](./guides/i18n.md) for a summary of adding I18n. diff --git a/docs/guides/client-vs-server-rendering.md b/docs/guides/client-vs-server-rendering.md index e9b5c59b2..4b7e7389f 100644 --- a/docs/guides/client-vs-server-rendering.md +++ b/docs/guides/client-vs-server-rendering.md @@ -1,6 +1,6 @@ # Client-Side Rendering vs. Server-Side Rendering -_Also, see [our React server-rendering documentation](https://www.shakacode.com/react-on-rails/docs/guides/react-server-rendering/)._ +_Also, see [our React server-rendering documentation](./react-server-rendering.md)._ In most cases, you should use the `prerender: false` (default behavior) with the provided helper method to render the React component from your Rails views. In some cases, such as when SEO is vital, or many users will not have JavaScript enabled, you can enable server-rendering by passing `prerender: true` to your helper, or you can simply change the default in `config/initializers/react_on_rails`. diff --git a/docs/guides/deployment.md b/docs/guides/deployment.md index d5422cbd4..5cd68d0d5 100644 --- a/docs/guides/deployment.md +++ b/docs/guides/deployment.md @@ -2,4 +2,4 @@ Shakapacker puts the necessary precompile steps automatically in the rake precompile step. -See the [Heroku Deployment](https://www.shakacode.com/react-on-rails/docs/deployment/heroku-deployment/) doc for specifics regarding Heroku. The information for Heroku may apply to other deployments. +See the [Heroku Deployment](../deployment/heroku-deployment.md) doc for specifics regarding Heroku. The information for Heroku may apply to other deployments. diff --git a/docs/guides/file-system-based-automated-bundle-generation.md b/docs/guides/file-system-based-automated-bundle-generation.md index fed6fa0c4..15a2da9b5 100644 --- a/docs/guides/file-system-based-automated-bundle-generation.md +++ b/docs/guides/file-system-based-automated-bundle-generation.md @@ -26,11 +26,11 @@ For example, configure `config/initializers/react_on_rails` to set the name for config.components_subdirectory = "ror_components" ``` -Now all React components inside the directories called `ror_components` will automatically be registered for usage with [`react_component`](https://www.shakacode.com/react-on-rails/docs/api/view-helpers-api/#react_component) and [`react_component_hash`](https://www.shakacode.com/react-on-rails/docs/api/view-helpers-api/#react_component_hash) helper methods provided by React on Rails. +Now all React components inside the directories called `ror_components` will automatically be registered for usage with [`react_component`](../api/view-helpers-api.md#react_component) and [`react_component_hash`](../api/view-helpers-api.md#react_component_hash) helper methods provided by React on Rails. ### Configure `auto_load_bundle` Option -For automated component registry, [`react_component`](https://www.shakacode.com/react-on-rails/docs/api/view-helpers-api/#react_component) and [`react_component_hash`](https://www.shakacode.com/react-on-rails/docs/api/view-helpers-api/#react_component_hash) view helper method tries to load generated bundle for component from the generated directory automatically per `auto_load_bundle` option. `auto_load_bundle` option in `config/initializers/react_on_rails` configures the default value that will be passed to component helpers. The default is `false`, and the parameter can be passed explicitly for each call. +For automated component registry, [`react_component`](../api/view-helpers-api.md#react_component) and [`react_component_hash`](../api/view-helpers-api.md#react_component_hash) view helper method tries to load generated bundle for component from the generated directory automatically per `auto_load_bundle` option. `auto_load_bundle` option in `config/initializers/react_on_rails` configures the default value that will be passed to component helpers. The default is `false`, and the parameter can be passed explicitly for each call. You can change the value in `config/initializers/react_on_rails` by updating it as follows: @@ -186,7 +186,7 @@ For example, if you wanted to utilize our file-system based entrypoint generatio <%= react_component("BarComponentTwo", {}) %> ``` - If a component uses multiple HTML strings for server rendering, the [`react_component_hash`](https://www.shakacode.com/react-on-rails/docs/api/view-helpers-api/#react_component_hash) view helper can be used on the Rails view, as illustrated below. + If a component uses multiple HTML strings for server rendering, the [`react_component_hash`](../api/view-helpers-api.md#react_component_hash) view helper can be used on the Rails view, as illustrated below. ```erb <% foo_component_one_data = react_component_hash( diff --git a/docs/guides/how-react-on-rails-works.md b/docs/guides/how-react-on-rails-works.md index 42a270dad..9d782de20 100644 --- a/docs/guides/how-react-on-rails-works.md +++ b/docs/guides/how-react-on-rails-works.md @@ -36,7 +36,7 @@ On production deployments that use asset precompilation, such as Heroku deployme However, if you want to run a custom command to run Webpack to build your bundles, then you will: -1. Define `config.build_production_command` in your [config/initializers/react_on_rails.rb](https://www.shakacode.com/react-on-rails/docs/guides/configuration/) +1. Define `config.build_production_command` in your [config/initializers/react_on_rails.rb](./configuration.md) Then React on Rails modifies the `assets:precompile` task to run your `build_production_command`. diff --git a/docs/guides/installation-into-an-existing-rails-app.md b/docs/guides/installation-into-an-existing-rails-app.md index cbc500357..4f26a5801 100644 --- a/docs/guides/installation-into-an-existing-rails-app.md +++ b/docs/guides/installation-into-an-existing-rails-app.md @@ -1,8 +1,8 @@ # Getting Started with an existing Rails app -**Also consult the instructions for installing on a fresh Rails app**, see the [React on Rails Basic Tutorial](https://www.shakacode.com/react-on-rails/docs/guides/tutorial/). +**Also consult the instructions for installing on a fresh Rails app**, see the [React on Rails Basic Tutorial](./tutorial.md). -**If you have Rails 5 API only project**, first [convert the Rails 5 API only app to a normal Rails app](https://www.shakacode.com/react-on-rails/docs/rails/convert-rails-5-api-only-app/). +**If you have Rails 5 API only project**, first [convert the Rails 5 API only app to a normal Rails app](../rails/convert-rails-5-api-only-app.md). 1. Add the following to your Gemfile and `bundle install`. We recommend fixing the version of React on Rails, as you will need to keep the exact version in sync with the version in your `package.json` file. @@ -54,7 +54,7 @@ ## Installation -See the [Installation Overview](https://www.shakacode.com/react-on-rails/docs/additional-details/manual-installation-overview/) for a concise set summary of what's in a React on Rails installation. +See the [Installation Overview](../additional-details/manual-installation-overview.md) for a concise set summary of what's in a React on Rails installation. ## NPM diff --git a/docs/guides/react-on-rails-overview.md b/docs/guides/react-on-rails-overview.md index 4adda607d..ce753b9e4 100644 --- a/docs/guides/react-on-rails-overview.md +++ b/docs/guides/react-on-rails-overview.md @@ -16,7 +16,7 @@ To provide a high performance framework for integrating Ruby on Rails with React 1. Support for HMR for a great developer experience. 1. Supports latest versions of React with hooks. 1. [Redux](https://redux.js.org/) and [React Router](https://reactrouter.com/) integration including server-side-rendering. -1. [Internationalization (I18n) and (localization)](https://www.shakacode.com/react-on-rails/docs/guides/i18n/) +1. [Internationalization (I18n) and (localization)](./i18n.md) 1. A supportive community. This [web search shows how live public sites are using React on Rails](https://publicwww.com/websites/%22react-on-rails%22++-undeveloped.com+depth%3Aall/). 1. [ReScript (Reason ML) Support](https://github.com/shakacode/reason-react-on-rails-example). diff --git a/docs/guides/react-server-rendering.md b/docs/guides/react-server-rendering.md index 247b2e190..b7c2420af 100644 --- a/docs/guides/react-server-rendering.md +++ b/docs/guides/react-server-rendering.md @@ -1,6 +1,6 @@ # React Server Rendering -See also [Client vs. Server Rendering](https://www.shakacode.com/react-on-rails/docs/guides/client-vs-server-rendering/). +See also [Client vs. Server Rendering](./client-vs-server-rendering.md). ## What is the easiest way to set up a Webpack configuration for server-side-rendering? @@ -14,7 +14,7 @@ During the Rails rendering of HTML per a browser request, the Rails server will The default JavaScript interpreter is [ExecJS](https://github.com/rails/execjs). If you want to maximize the performance of your server rendering, then you want to use React on Rails Pro which uses NodeJS to do the server rendering. See the [docs for React on Rails Pro](https://github.com/shakacode/react_on_rails/wiki). -See [this note](https://www.shakacode.com/react-on-rails/docs/guides/client-vs-server-rendering/). +See [this note](./client-vs-server-rendering.md). ## How do you do Server Rendering with React on Rails? diff --git a/docs/guides/render-functions-and-railscontext.md b/docs/guides/render-functions-and-railscontext.md index 8ea8ebd0c..28001bba5 100644 --- a/docs/guides/render-functions-and-railscontext.md +++ b/docs/guides/render-functions-and-railscontext.md @@ -78,7 +78,7 @@ reduxStore = MyReduxStore(props, railsContext); > You never make these calls. React on Rails makes these calls when it does either client or server rendering. You will define functions that take these 2 params and return a React component or a Redux Store. Naturally, you do not have to use second parameter, `railsContext`, if you do not need it. If you don't take a second parameter, then you're probably defining a React function component and you will simply return a React Element, often just JSX. > [!NOTE] -> See [Redux Store](https://www.shakacode.com/react-on-rails/docs/api/redux-store-api/#multiple-react-components-on-a-page-with-one-store) on how to set up Redux stores that allow multiple components to talk to the same store. +> See [Redux Store](../api/redux-store-api.md#multiple-react-components-on-a-page-with-one-store) on how to set up Redux stores that allow multiple components to talk to the same store. The `railsContext` has: (see the implementation in [ReactOnRails::Helper](https://github.com/shakacode/react_on_rails/tree/master/lib/react_on_rails/helper.rb), method `rails_context` for the definitive list). diff --git a/docs/guides/rspec-configuration.md b/docs/guides/rspec-configuration.md index 536bccedc..f62b3bcdc 100644 --- a/docs/guides/rspec-configuration.md +++ b/docs/guides/rspec-configuration.md @@ -1,6 +1,6 @@ # RSpec Configuration -_Click [here for minitest](https://www.shakacode.com/react-on-rails/docs/guides/minitest-configuration/)_ +_Click [here for minitest](./minitest-configuration.md)_ # If your Webpack configurations correspond to Shakapacker's default setup @@ -11,7 +11,7 @@ compiled by Webpack before running tests and during production deployment: 1. **Use Shakapacker's compile option**: Configure your `config/shakapacker.yml` so that `compile: true` is for `test` and `production` environments. Ensure that your `source_path` is correct, or else `Shakapacker` won't correctly detect changes. -2. **Use the React on Rails settings and helpers**. Use the settings in `config/initializers/react_on_rails.rb`. Refer to [docs/configuration](https://www.shakacode.com/react-on-rails/docs/guides/configuration/). +2. **Use the React on Rails settings and helpers**. Use the settings in `config/initializers/react_on_rails.rb`. Refer to [docs/configuration](./configuration.md). ```yml config.build_test_command = "NODE_ENV=test RAILS_ENV=test bin/shakapacker" diff --git a/docs/guides/tutorial.md b/docs/guides/tutorial.md index 17578631b..0e3948687 100644 --- a/docs/guides/tutorial.md +++ b/docs/guides/tutorial.md @@ -330,8 +330,8 @@ versus with server rendering: For more details on server rendering, see: -- [Client vs. Server Rendering](https://www.shakacode.com/react-on-rails/docs/guides/client-vs-server-rendering/) -- [React Server Rendering](https://www.shakacode.com/react-on-rails/docs/guides/react-server-rendering/) +- [Client vs. Server Rendering](./client-vs-server-rendering.md) +- [React Server Rendering](./react-server-rendering.md) ## Moving from the Rails default `/app/javascript` to the recommended `/client` structure diff --git a/docs/guides/upgrading-react-on-rails.md b/docs/guides/upgrading-react-on-rails.md index 0acf7c323..6483136dd 100644 --- a/docs/guides/upgrading-react-on-rails.md +++ b/docs/guides/upgrading-react-on-rails.md @@ -46,7 +46,7 @@ If you still need that feature, please file an issue. In order to solve the issues regarding React Hooks compatibility, the number of parameters for functions is used to determine if you have a Render-Function that will get invoked to return a React component, or you are registering a React component defined by a function. -Please see [Render-Functions and the Rails Context](https://www.shakacode.com/react-on-rails/docs/guides/render-functions-and-railscontext/) for +Please see [Render-Functions and the Rails Context](./render-functions-and-railscontext.md) for more information on what a Render-Function is. ##### Update required for registered functions taking exactly 2 params. diff --git a/docs/guides/webpack-configuration.md b/docs/guides/webpack-configuration.md index 16067ca7f..a21a81e18 100644 --- a/docs/guides/webpack-configuration.md +++ b/docs/guides/webpack-configuration.md @@ -22,7 +22,7 @@ A key decision in your use React on Rails is whether you go with the Shakapacker ## Option 1: Default Generator Setup: Shakapacker app/javascript -Typical Shakapacker apps have a standard directory structure as documented [here](https://github.com/shakacode/shakapacker/blob/master/README.md#configuration-and-code). If you follow [the basic tutorial](https://www.shakacode.com/react-on-rails/docs/guides/tutorial/), you will see this pattern in action. In order to customize the Webpack configuration, consult [Webpack Tips](https://www.shakacode.com/react-on-rails/docs/javascript/webpack/). +Typical Shakapacker apps have a standard directory structure as documented [here](https://github.com/shakacode/shakapacker/blob/master/README.md#configuration-and-code). If you follow [the basic tutorial](./tutorial.md), you will see this pattern in action. In order to customize the Webpack configuration, consult [Webpack Tips](../javascript/webpack.md). The _advantage_ of using Shakapacker to configure Webpack is that there is very little code needed to get started, and you don't need to understand really anything about Webpack customization. diff --git a/docs/home.md b/docs/home.md index 73083556b..8493292b2 100644 --- a/docs/home.md +++ b/docs/home.md @@ -2,18 +2,18 @@ ## Details -1. [Overview](https://www.shakacode.com/react-on-rails/docs/guides/react-on-rails-overview/) -1. [Getting Started](https://www.shakacode.com/react-on-rails/docs/getting-started/) -1. [How React on Rails Works](https://www.shakacode.com/react-on-rails/docs/guides/how-react-on-rails-works/) -1. [Webpack Configuration](https://www.shakacode.com/react-on-rails/docs/guides/webpack-configuration/) -1. [View Helpers API](https://www.shakacode.com/react-on-rails/docs/api/view-helpers-api/) +1. [Overview](./guides/react-on-rails-overview.md) +1. [Getting Started](./getting-started.md) +1. [How React on Rails Works](./guides/how-react-on-rails-works.md) +1. [Webpack Configuration](./guides/webpack-configuration.md) +1. [View Helpers API](./api/view-helpers-api.md) 1. [Caching and Performance: React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/). -1. [Deployment](https://www.shakacode.com/react-on-rails/docs/guides/deployment/). +1. [Deployment](./guides/deployment.md). ## Changes and Upgrades 1. [CHANGELOG.md](https://github.com/shakacode/react_on_rails/tree/master/CHANGELOG.md) -2. [Upgrading React on Rails](https://www.shakacode.com/react-on-rails/docs/guides/upgrading-react-on-rails/#upgrading-to-v12). +2. [Upgrading React on Rails](./guides/upgrading-react-on-rails.md#upgrading-to-v12). ## Example Apps diff --git a/docs/javascript/code-splitting.md b/docs/javascript/code-splitting.md index c33e7e93d..8b747300a 100644 --- a/docs/javascript/code-splitting.md +++ b/docs/javascript/code-splitting.md @@ -71,7 +71,7 @@ ReactOnRails.register({ }); ``` -Note that you should not register a renderer on the server, since there won't be a domNodeId when we're server rendering. Note that the `RouterApp` imported by `serverRegistration.js` is from a different file. For an example of how to set up an app for server rendering, see the [react router docs](https://www.shakacode.com/react-on-rails/docs/javascript/react-router/). +Note that you should not register a renderer on the server, since there won't be a domNodeId when we're server rendering. Note that the `RouterApp` imported by `serverRegistration.js` is from a different file. For an example of how to set up an app for server rendering, see the [react router docs](./react-router.md). #### RouterAppRenderer.jsx @@ -154,7 +154,7 @@ config = { This causes Webpack to prepend the code chunk filename with `/assets/` in the request url. The React on Rails sets up the Webpack config to put Webpack bundles in `app/assets/javascripts/webpack`, and modifies `config/initializers/assets.rb` so that rails detects the bundles. This means that when we prepend the request URL with `/assets/`, rails will know what Webpack is asking for. -See [our Rails assets documentation](https://www.shakacode.com/react-on-rails/docs/outdated/rails-assets/) to learn more about static assets. +See [our Rails assets documentation](../outdated/rails-assets.md) to learn more about static assets. If you forget to set the public path, Webpack will request the code chunk at `/{filename}`. This will cause the request to be handled by the Rails router, which will send back a 404 response, assuming that you don't have a catch-all route. In your JavaScript console, you'll get the following error: diff --git a/docs/javascript/render-functions.md b/docs/javascript/render-functions.md index 1d9bbed81..a5c49cc90 100644 --- a/docs/javascript/render-functions.md +++ b/docs/javascript/render-functions.md @@ -7,7 +7,7 @@ This guide explains how render-functions work in React on Rails and how to use t Render-functions take two parameters: 1. `props`: The props passed from the Ruby helper methods (via the `props:` parameter), which become available in your JavaScript. -2. `railsContext`: Rails contextual information like current pathname, locale, etc. See the [Render-Functions and the Rails Context](https://www.shakacode.com/react-on-rails/docs/guides/render-functions-and-railscontext/) documentation for more details. +2. `railsContext`: Rails contextual information like current pathname, locale, etc. See the [Render-Functions and the Rails Context](../guides/render-functions-and-railscontext.md) documentation for more details. ### Identifying Render-Functions diff --git a/docs/misc/articles.md b/docs/misc/articles.md index 093f6852e..88b45b47d 100644 --- a/docs/misc/articles.md +++ b/docs/misc/articles.md @@ -6,7 +6,7 @@ - [Webpacker Lite: Why Fork Webpacker?](https://blog.shakacode.com/webpacker-lite-why-fork-webpacker-f0a7707fac92) - [React on Rails, 2000+ 🌟 Stars](https://medium.com/shakacode/react-on-rails-2000-stars-32ff5cfacfbf#.6gmfb2gpy) - [The React on Rails Doctrine](https://medium.com/@railsonmaui/the-react-on-rails-doctrine-3c59a778c724) -- [Simple Tutorial](https://www.shakacode.com/react-on-rails/docs/guides/tutorial/). +- [Simple Tutorial](../guides/tutorial.md). ## Videos diff --git a/docs/misc/doctrine.md b/docs/misc/doctrine.md index 399577982..39a6f27e9 100644 --- a/docs/misc/doctrine.md +++ b/docs/misc/doctrine.md @@ -4,7 +4,11 @@ By Justin Gordon, January 26, 2016 This document is an extension and complement to [The Rails Doctrine](http://rubyonrails.org/doctrine/). If you haven't read that document, I suggest you do so first. -As stated in the [React on Rails README](https://www.shakacode.com/react-on-rails/docs/), the project objective is to provide an opinionated and optimal framework for integrating **Ruby on Rails** with modern JavaScript tooling and libraries. When considering what goes into **react_on_rails**, we ask ourselves, is the functionality related to the intersection of using Rails and with modern JavaScript? A good example is view helper integration of React components on a Rails view. If the answer is yes, then the functionality belongs right here. In other cases, we're releasing separate npm packages or Ruby gems. For example, we needed an easy way to integrate [Twitter Bootstrap](http://getbootstrap.com/) with Webpack, and we released the [npm bootstrap-loader](https://github.com/shakacode/bootstrap-loader/). +To paraphrase the [React on Rails Overview](../guides/react-on-rails-overview.md), the project objective is to provide an opinionated and optimal framework for integrating **Ruby on Rails** with modern JavaScript tooling and libraries. + +When considering what goes into **react_on_rails**, we ask ourselves, is the functionality related to the intersection of using Rails and with modern JavaScript? A good example is view helper integration of React components on a Rails view. If the answer is yes, then the functionality belongs right here. + +In other cases, we release separate npm packages or Ruby gems. For example, we needed an easy way to integrate [Twitter Bootstrap](http://getbootstrap.com/) with Webpack, and we released the [npm bootstrap-loader](https://github.com/shakacode/bootstrap-loader/). Besides the project objective, let's stick with the "Rails Doctrine" and keep the following in mind. @@ -20,13 +24,13 @@ The React on Rails setup provides several key components related to front-end de 6. Happiness for us is actively participating in open source, so we want to be where the action is, which is with the NPM libraries on github.com. 7. You can get set up on React on Rails **FAST** using our application generator. 8. By placing all client-side development inside of the `/client` directory, pure JavaScript developers can productively do development separate from Rails. Instead of Rails APIs, stub APIs on an express server can provide a simple backend, allowing for rapid iteration of UI prototypes. -9. Just because we're not relying on the Rails asset pipeline for ES6 conversion does not mean that we're deploying Rails apps in any different way. We still use the asset pipeline to include our Webpack compiled JavaScript. This only requires a few small modifications, as explained in [our heroku deployment documentation](https://www.shakacode.com/react-on-rails/docs/deployment/heroku-deployment/). +9. Just because we're not relying on the Rails asset pipeline for ES6 conversion does not mean that we're deploying Rails apps in any different way. We still use the asset pipeline to include our Webpack compiled JavaScript. This only requires a few small modifications, as explained in [our heroku deployment documentation](../deployment/heroku-deployment.md). ## Convention over Configuration - React on Rails has taken the hard work out of figuring out the JavaScript tooling that works best with Rails. Not only could you spend lots of time researching different tooling, but then you'd have to figure out how to splice it all together. This is where a lot of "JavaScript fatigue" comes from. The following keep the code clean and consistent: -- [Style Guide](https://www.shakacode.com/react-on-rails/docs/misc/style/) -- [linters](https://www.shakacode.com/react-on-rails/docs/contributor-info/linters/) +- [Style Guide](./style.md) +- [linters](../contributor-info/linters.md) We're big believers in this quote from the Rails Doctrine: diff --git a/docs/outdated/rails-assets-relative-paths.md b/docs/outdated/rails-assets-relative-paths.md index a77240df4..2b92bbbd3 100644 --- a/docs/outdated/rails-assets-relative-paths.md +++ b/docs/outdated/rails-assets-relative-paths.md @@ -76,7 +76,7 @@ Note: _You can output these files in the asset pipeline wherever you see fit. My 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. -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](https://www.shakacode.com/react-on-rails/docs/outdated/rails-assets/) to understand how `react_on_rails` allows us to access these files after precompilation, when Rails applies another hash onto the asset._ +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._ 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: @@ -190,4 +190,4 @@ module.exports = { }; ``` -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](https://www.shakacode.com/react-on-rails/docs/outdated/rails-assets/). +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). diff --git a/docs/outdated/rails-assets.md b/docs/outdated/rails-assets.md index d65c29afa..4dfbef7b7 100644 --- a/docs/outdated/rails-assets.md +++ b/docs/outdated/rails-assets.md @@ -31,7 +31,7 @@ will have the Webpack digested name (MD5 hash). Since the Webpack generated CSS just one level of "digesting", this "double-digesting" from Rails will cause such assets to fail to load. -_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](https://www.shakacode.com/react-on-rails/docs/outdated/rails-assets-relative-paths/)_ +_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)_ ## The Solution: Symlink Original File Names to New File Names diff --git a/docs/rails/convert-rails-5-api-only-app.md b/docs/rails/convert-rails-5-api-only-app.md index f4513e8ba..80f8327df 100644 --- a/docs/rails/convert-rails-5-api-only-app.md +++ b/docs/rails/convert-rails-5-api-only-app.md @@ -16,4 +16,4 @@ Rails will start creating the app and will skip the files you have already creat 3. If it is removeing some of your code then press "n" and add all additions manually ``` -3. Run `bundle install` and follow [the instructions for installing into an existing Rails app](https://www.shakacode.com/react-on-rails/docs/guides/installation-into-an-existing-rails-app/) +3. Run `bundle install` and follow [the instructions for installing into an existing Rails app](../guides/installation-into-an-existing-rails-app.md) diff --git a/docs/react-on-rails-pro/react-on-rails-pro.md b/docs/react-on-rails-pro/react-on-rails-pro.md index 426053276..34265fa50 100644 --- a/docs/react-on-rails-pro/react-on-rails-pro.md +++ b/docs/react-on-rails-pro/react-on-rails-pro.md @@ -22,7 +22,7 @@ See https://www.shakacode.com/react-on-rails-pro/docs/. ### Pro: React Server Components -See the [announcement here](https://www.shakacode.com/react-on-rails/docs/react-on-rails-pro/react-server-components/). +See the [announcement here](./react-server-components.md). Yes! Big performance gains for the newest React features! diff --git a/docs/release-notes/15.0.0.md b/docs/release-notes/15.0.0.md index fe61434d2..c2066fa44 100644 --- a/docs/release-notes/15.0.0.md +++ b/docs/release-notes/15.0.0.md @@ -60,7 +60,7 @@ Major improvements to component and store hydration: // Code expecting all components to be hydrated ``` - - If you call it in a `turbolinks:load` listener to work around the issue documented in [Turbolinks](https://www.shakacode.com/react-on-rails/docs/rails/turbolinks/#async-script-loading), the listener can be safely removed. + - If you call it in a `turbolinks:load` listener to work around the issue documented in [Turbolinks](../rails/turbolinks.md#async-script-loading), the listener can be safely removed. ### Script Loading Strategy Migration diff --git a/docs/testimonials/testimonials.md b/docs/testimonials/testimonials.md index a5c72d108..67bc919c3 100644 --- a/docs/testimonials/testimonials.md +++ b/docs/testimonials/testimonials.md @@ -1,22 +1,22 @@ # Testimonials -# [HVMN Testimonial, Written by Paul Benigeri, October 12, 2018](https://www.shakacode.com/react-on-rails/docs/testimonials/hvmn/) +# [HVMN Testimonial, Written by Paul Benigeri, October 12, 2018](./hvmn.md) > The price we paid for the consultation + the React on Rails pro license has already been made back a couple of times from hosting fees alone. The entire process was super hands off, and our core team was able to focus on shipping new feature during that sprint. -Full writeup [here](https://www.shakacode.com/react-on-rails/docs/testimonials/hvmn/). +Full writeup [here](./hvmn.md). --- -# [Leora from ResortPass](https://www.shakacode.com/react-on-rails/docs/testimonials/resortpass/), December 10, 2018 +# [Leora from ResortPass](./resortpass.md), December 10, 2018 Justin and his team were instrumental in assisting us in setting design foundations and standards for our transition to a react on rails application. Just three months of work with the team at Shaka code and we have a main page of our application server-side rendering at exponentially improved speeds. -Full writeup [here](https://www.shakacode.com/react-on-rails/docs/testimonials/resortpass/). +Full writeup [here](./resortpass.md). --- -From Joel Hooks, Co-Founder, Chief Nerd at [egghead.io](https://egghead.io/), January 30, 2017: +From Joel Hooks, Co-Founder, Chief Nerd at [egghead.io](https://egghead.io), January 30, 2017: ![2017-01-30_11-33-59](https://cloud.githubusercontent.com/assets/1118459/22443635/b3549fb4-e6e3-11e6-8ea2-6f589dc93ed3.png)