From 6c8582041dfc076729659ef8368fd16089d2fb86 Mon Sep 17 00:00:00 2001 From: Charlie Gleason Date: Thu, 16 Feb 2017 19:54:15 +0000 Subject: [PATCH 1/8] Added a how-to on react-snapshot Added a section with a short description and link to a tutorial on generating static html pages with react-snapshot, and also linked to it from the section on managing the page title. --- packages/react-scripts/template/README.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 6d237efd95a..fda6572ce42 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -41,6 +41,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Proxying API Requests in Development](#proxying-api-requests-in-development) - [Using HTTPS in Development](#using-https-in-development) - [Generating Dynamic `` Tags on the Server](#generating-dynamic-meta-tags-on-the-server) +- [Pre-Generating `` Tags with `react-snapshot`](#pre-generating-meta-tags-with-react-snapshot) - [Injecting Data from the Server into the Page](#injecting-data-from-the-server-into-the-page) - [Running Tests](#running-tests) - [Filename Conventions](#filename-conventions) @@ -255,7 +256,7 @@ Note that normally you wouldn't edit files in the `public` folder very often. Fo If you need to dynamically update the page title based on the content, you can use the browser [`document.title`](https://developer.mozilla.org/en-US/docs/Web/API/Document/title) API. For more complex scenarios when you want to change the title from React components, you can use [React Helmet](https://github.com/nfl/react-helmet), a third party library. -Finally, if you use a custom server for your app in production and want to modify the title before it gets sent to the browser, you can follow advice in [this section](#generating-dynamic-meta-tags-on-the-server). +If you use a custom server for your app in production and want to modify the title before it gets sent to the browser, you can follow advice in [this section](#generating-dynamic-meta-tags-on-the-server). Alternatively, you can pre-build each page as a static html file which then loads the JavaScript bundle, which is covered [here](#pre-generating-meta-tags-with-react-snapshot). ## Installing a Dependency @@ -813,6 +814,12 @@ Then, on the server, regardless of the backend you use, you can read `index.html If you use a Node server, you can even share the route matching logic between the client and the server. However duplicating it also works fine in simple cases. +## Pre-Generating `` Tags with `react-snapshot` + +If you'd prefer to host your `build` with a static hosting provider, like [Surge](https://surge.sh), you can use [react-snapshot](https://www.npmjs.com/package/react-snapshot), [react-router](https://reacttraining.com/react-router/) and [react-helmet](https://github.com/nfl/react-helmet) to generate html pages for each route in your application. These pages will then seamlessly become active, or "hydrated", when the JavaScript bundle has loaded. + +You can read more about [zero configuration server side rendering here](https://medium.com/superhighfives/an-almost-static-stack-6df0a2791319). + ## Injecting Data from the Server into the Page Similarly to the previous section, you can leave some placeholders in the HTML that inject global variables, for example: From 9139cab9748af04ca07802103cf0b8c7862fe575 Mon Sep 17 00:00:00 2001 From: Charlie Gleason Date: Thu, 16 Feb 2017 23:26:38 +0000 Subject: [PATCH 2/8] Updated link title for react-snapshot overview --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index fda6572ce42..118c65082da 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -818,7 +818,7 @@ If you use a Node server, you can even share the route matching logic between th If you'd prefer to host your `build` with a static hosting provider, like [Surge](https://surge.sh), you can use [react-snapshot](https://www.npmjs.com/package/react-snapshot), [react-router](https://reacttraining.com/react-router/) and [react-helmet](https://github.com/nfl/react-helmet) to generate html pages for each route in your application. These pages will then seamlessly become active, or "hydrated", when the JavaScript bundle has loaded. -You can read more about [zero configuration server side rendering here](https://medium.com/superhighfives/an-almost-static-stack-6df0a2791319). +You can read more about [zero-configuration snapshotting (also called pre-rendering) here](https://medium.com/superhighfives/an-almost-static-stack-6df0a2791319). ## Injecting Data from the Server into the Page From 829df2bc64b7027923deaa74680ba127d4ca4085 Mon Sep 17 00:00:00 2001 From: Charlie Gleason Date: Fri, 24 Feb 2017 18:45:29 +0000 Subject: [PATCH 3/8] Explained pre-rendering in a more generic way --- packages/react-scripts/template/README.md | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 118c65082da..46d1047770e 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -41,7 +41,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Proxying API Requests in Development](#proxying-api-requests-in-development) - [Using HTTPS in Development](#using-https-in-development) - [Generating Dynamic `` Tags on the Server](#generating-dynamic-meta-tags-on-the-server) -- [Pre-Generating `` Tags with `react-snapshot`](#pre-generating-meta-tags-with-react-snapshot) +- [Pre-Rendering into Static HTML Files](#pre-rendering-into-static-html-files) - [Injecting Data from the Server into the Page](#injecting-data-from-the-server-into-the-page) - [Running Tests](#running-tests) - [Filename Conventions](#filename-conventions) @@ -403,7 +403,7 @@ Then in `package.json`, add the following lines to `scripts`: "test": "react-scripts test --env=jsdom", ``` ->Note: To use a different preprocessor, replace `build-css` and `watch-css` commands according to your preprocessor’s documentation. +>Note: To use a different preprocessor, replace `build-css` and `watch-css` commands according to your preprocessor’s documentation. Now you can rename `src/App.css` to `src/App.scss` and run `npm run watch-css`. The watcher will find every Sass file in `src` subdirectories, and create a corresponding CSS file next to it, in our case overwriting `src/App.css`. Since `src/App.js` still imports `src/App.css`, the styles become a part of your application. You can now edit `src/App.scss`, and `src/App.css` will be regenerated. @@ -814,11 +814,15 @@ Then, on the server, regardless of the backend you use, you can read `index.html If you use a Node server, you can even share the route matching logic between the client and the server. However duplicating it also works fine in simple cases. -## Pre-Generating `` Tags with `react-snapshot` +## Pre-Rendering into Static HTML Files -If you'd prefer to host your `build` with a static hosting provider, like [Surge](https://surge.sh), you can use [react-snapshot](https://www.npmjs.com/package/react-snapshot), [react-router](https://reacttraining.com/react-router/) and [react-helmet](https://github.com/nfl/react-helmet) to generate html pages for each route in your application. These pages will then seamlessly become active, or "hydrated", when the JavaScript bundle has loaded. +If you're hosting your `build` with a static hosting provider, like [Surge](https://surge.sh), you can use [react-snapshot](https://www.npmjs.com/package/react-snapshot), [react-router](https://reacttraining.com/react-router/) and [react-helmet](https://github.com/nfl/react-helmet) to generate html pages for each route, or relative link, in your application. These pages will then seamlessly become active, or "hydrated", when the JavaScript bundle has loaded. -You can read more about [zero-configuration snapshotting (also called pre-rendering) here](https://medium.com/superhighfives/an-almost-static-stack-6df0a2791319). +There are also opportunities to use this outside of static hosting, to take the pressure off the server when generating and caching routes. + +The primary benefit of pre-rendering is that you get the core content of each page _with_ the HTML payload - regardless of whether or not your JavaScript bundle successfully downloads. It also increases the likelihood that each route of your application will be picked up by search engines. + +You can read more about [zero-configuration pre-rendering (also called snapshotting) here](https://medium.com/superhighfives/an-almost-static-stack-6df0a2791319). ## Injecting Data from the Server into the Page From 51d1387222f2243730d51ea7955cd012f61978d8 Mon Sep 17 00:00:00 2001 From: Charlie Gleason Date: Fri, 24 Feb 2017 18:57:56 +0000 Subject: [PATCH 4/8] Added link to top level README.md, and removed specifics from overview --- README.md | 1 + packages/react-scripts/template/README.md | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 0b9ed59b5b2..28e112d8bb0 100644 --- a/README.md +++ b/README.md @@ -124,6 +124,7 @@ The [User Guide](https://github.com/facebookincubator/create-react-app/blob/mast - [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) - [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) - [Generating Dynamic `` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) +- [Pre-Rendering into Static HTML Files](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#pre-rendering-into-static-html-files) - [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) - [Developing Components in Isolation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#developing-components-in-isolation) - [Making a Progressive Web App](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 46d1047770e..baf8b0a932c 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -816,11 +816,11 @@ If you use a Node server, you can even share the route matching logic between th ## Pre-Rendering into Static HTML Files -If you're hosting your `build` with a static hosting provider, like [Surge](https://surge.sh), you can use [react-snapshot](https://www.npmjs.com/package/react-snapshot), [react-router](https://reacttraining.com/react-router/) and [react-helmet](https://github.com/nfl/react-helmet) to generate html pages for each route, or relative link, in your application. These pages will then seamlessly become active, or "hydrated", when the JavaScript bundle has loaded. +If you're hosting your `build` with a static hosting provider you can use [react-snapshot](https://www.npmjs.com/package/react-snapshot) to generate html pages for each route, or relative link, in your application. These pages will then seamlessly become active, or "hydrated", when the JavaScript bundle has loaded. There are also opportunities to use this outside of static hosting, to take the pressure off the server when generating and caching routes. -The primary benefit of pre-rendering is that you get the core content of each page _with_ the HTML payload - regardless of whether or not your JavaScript bundle successfully downloads. It also increases the likelihood that each route of your application will be picked up by search engines. +The primary benefit of pre-rendering is that you get the core content of each page _with_ the HTML payload—regardless of whether or not your JavaScript bundle successfully downloads. It also increases the likelihood that each route of your application will be picked up by search engines. You can read more about [zero-configuration pre-rendering (also called snapshotting) here](https://medium.com/superhighfives/an-almost-static-stack-6df0a2791319). From edce66e888cc99ebe1c46e949d986d364b1128a1 Mon Sep 17 00:00:00 2001 From: Charlie Gleason Date: Fri, 24 Feb 2017 19:13:57 +0000 Subject: [PATCH 5/8] Updated html -> HTML --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index baf8b0a932c..8d0319f7b64 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -816,7 +816,7 @@ If you use a Node server, you can even share the route matching logic between th ## Pre-Rendering into Static HTML Files -If you're hosting your `build` with a static hosting provider you can use [react-snapshot](https://www.npmjs.com/package/react-snapshot) to generate html pages for each route, or relative link, in your application. These pages will then seamlessly become active, or "hydrated", when the JavaScript bundle has loaded. +If you're hosting your `build` with a static hosting provider you can use [react-snapshot](https://www.npmjs.com/package/react-snapshot) to generate HTML pages for each route, or relative link, in your application. These pages will then seamlessly become active, or "hydrated", when the JavaScript bundle has loaded. There are also opportunities to use this outside of static hosting, to take the pressure off the server when generating and caching routes. From bfce784b0783927ab1b3c23823141a52a39b32c2 Mon Sep 17 00:00:00 2001 From: Charlie Gleason Date: Fri, 24 Feb 2017 19:39:55 +0000 Subject: [PATCH 6/8] Updated quotes and apostrophes --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 8d0319f7b64..51b8613eefb 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -816,7 +816,7 @@ If you use a Node server, you can even share the route matching logic between th ## Pre-Rendering into Static HTML Files -If you're hosting your `build` with a static hosting provider you can use [react-snapshot](https://www.npmjs.com/package/react-snapshot) to generate HTML pages for each route, or relative link, in your application. These pages will then seamlessly become active, or "hydrated", when the JavaScript bundle has loaded. +If you’re hosting your `build` with a static hosting provider you can use [react-snapshot](https://www.npmjs.com/package/react-snapshot) to generate HTML pages for each route, or relative link, in your application. These pages will then seamlessly become active, or “hydrated”, when the JavaScript bundle has loaded. There are also opportunities to use this outside of static hosting, to take the pressure off the server when generating and caching routes. From 18b2a416db1c913959389ecc29f4253560789711 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 24 Feb 2017 19:43:45 +0000 Subject: [PATCH 7/8] html -> HTML --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 51b8613eefb..8d9f2c3de94 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -256,7 +256,7 @@ Note that normally you wouldn't edit files in the `public` folder very often. Fo If you need to dynamically update the page title based on the content, you can use the browser [`document.title`](https://developer.mozilla.org/en-US/docs/Web/API/Document/title) API. For more complex scenarios when you want to change the title from React components, you can use [React Helmet](https://github.com/nfl/react-helmet), a third party library. -If you use a custom server for your app in production and want to modify the title before it gets sent to the browser, you can follow advice in [this section](#generating-dynamic-meta-tags-on-the-server). Alternatively, you can pre-build each page as a static html file which then loads the JavaScript bundle, which is covered [here](#pre-generating-meta-tags-with-react-snapshot). +If you use a custom server for your app in production and want to modify the title before it gets sent to the browser, you can follow advice in [this section](#generating-dynamic-meta-tags-on-the-server). Alternatively, you can pre-build each page as a static HTML file which then loads the JavaScript bundle, which is covered [here](#pre-generating-meta-tags-with-react-snapshot). ## Installing a Dependency From 2d8f7adf9b452e9c158f1b5d59676b716c7448dc Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 24 Feb 2017 19:44:19 +0000 Subject: [PATCH 8/8] Fix link --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 8d9f2c3de94..9e7abe5ff40 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -256,7 +256,7 @@ Note that normally you wouldn't edit files in the `public` folder very often. Fo If you need to dynamically update the page title based on the content, you can use the browser [`document.title`](https://developer.mozilla.org/en-US/docs/Web/API/Document/title) API. For more complex scenarios when you want to change the title from React components, you can use [React Helmet](https://github.com/nfl/react-helmet), a third party library. -If you use a custom server for your app in production and want to modify the title before it gets sent to the browser, you can follow advice in [this section](#generating-dynamic-meta-tags-on-the-server). Alternatively, you can pre-build each page as a static HTML file which then loads the JavaScript bundle, which is covered [here](#pre-generating-meta-tags-with-react-snapshot). +If you use a custom server for your app in production and want to modify the title before it gets sent to the browser, you can follow advice in [this section](#generating-dynamic-meta-tags-on-the-server). Alternatively, you can pre-build each page as a static HTML file which then loads the JavaScript bundle, which is covered [here](#pre-rendering-into-static-html-files). ## Installing a Dependency