Permalink
Browse files

A few doc updates after discussion on Spectrum (#962)

## Description
Each change is a separate commit and there are few enough to just read the commit messages

## Changes/Tasks
Update to several README.md and added a new one for templates

## Motivation and Context
Improvments to docs

<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->
- [ ] Refactoring/add tests (refactoring or adding test which isn't a fix or add a feature)
- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

## Checklist:
<!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
- [ ] My change requires a change to the documentation.
  - [x] I have updated the documentation accordingly.
- [ ] My changes have tests around them
  • Loading branch information...
SteveALee authored and tannerlinsley committed Jan 11, 2019
1 parent 70947c9 commit 8915fda5b206b7d9f6a828adc464b518d9883486
Showing with 27 additions and 5 deletions.
  1. +7 −1 README.md
  2. +5 −4 docs/concepts.md
  3. +15 −0 packages/react-static/templates/README.md
@@ -90,6 +90,12 @@ $ npm install -g react-static
$ react-static create
```

Or use `npx` to create an app without global installing the CLI

```bash
npx react-static create --name=my-app
```

3. Pick a template! [See the full list of templates](#templates-and-guides)
4. Navigate to your new project:

@@ -144,8 +150,8 @@ For a list of supported plugins, [view the Plugin documentation](/docs/plugins/)

React Static ships with a few basic templates to you get you started quickly with `react-static create`, then provides in-depth guides for further enhancement. You can check them out here!

- [**Guides**](/docs/guides/)
- [**Templates**](/packages/react-static/templates/)
- [**Guides**](/docs/guides/)

Can't find an guide? You should write one! [Here's how to get started.](/docs/guides/)

@@ -21,9 +21,9 @@ React-Static is different from most React-based static-site generators. It follo

### Dev Stage

1. **All of the data your site needs to render** is gathered up-front in your `static.config.js` by any means you want. This data can come from markdown files, headless CMSs, graphql endpoints, etc.
2. Using your data, you define or generate **static route** for your site and supply the appropriate data to each one.
3. Simultaneously, you provide each route with the component that should be used to render it.
1. **All of the data your site needs to render** is gathered up-front in your `static.config.js` by any means you want. This data can come from markdown files, headless CMSs, graphql endpoints, etc. The data is compiled during the build stage.
2. Pages are defined by files that export a single React component that is rendered when required. Any files in the `pages` folder will **automatically routed**.
3. You can also provide a **static route** for your data and specify the file containing the page Component.
4. Using React-Static's components like `RouteProps` and `SiteProps` you can access the data for each route and use it to render your site! You can also use HOC versions of those components if you wish.
5. React-Static can then export every page in your site with tenacious speed and accuracy.

@@ -53,7 +53,7 @@ React Static also has a very unique and amazing way of requesting the least amou

# Writing universal, "node-safe" code

Because React-Static code is both used in the browser and node (during build), it's very, very important that your code be "universal" or in other words "node safe". Most of us are used to writing javascript from the browser's perspective, so there are some things to watch out for:
Because React-Static code is both used in the browser and node (during build), it's very, very important that **ALL** your code be "universal" or in other words "node safe". Most of us are used to writing javascript from the browser's perspective, so there are some things to watch out for:

- Check before using `window`, `document` or browser only APIs. Since these objects do not technically exist in the node environment, make sure you check that they exist before attempting to use them. The easiest way to do this is to keep code that relies on them in `componentDidMount` or inside a condition, eg.

@@ -100,6 +100,7 @@ If your static site has static content that is changing often, you may want to s
Deploying a static site has never been easier on today's internet! There are so many solutions where you can host static files for very cheap, sometimes even for free. This is, in fact, one of the great benefits to hosting a static site: there is no server to maintain and scalability is less of a problem. Here is a list of static-site hosting solutions we recommend:

- [Netlify](https://netlify.com) (Our favorite!)
- [Zeit now](https://zeit.co/now)
- [Github Pages](https://pages.github.com/)
- [Heroku](http://blog.teamtreehouse.com/deploy-static-site-heroku)
- [AWS (S3 + Cloudfront)](https://aws.amazon.com/getting-started/projects/host-static-website/)
@@ -0,0 +1,15 @@
# Templates

The templates in the directory will get you started. They are designed to be selected when using the ```react-static create``` CLI command.

## blank

An absolutely minimal app.

## basic

A Single Page App with multiple pages and a shared navigation component. The pages are automatically routed based on their filename in the pages folder using ```@reach/router```.

## stress test

A website with a large number of fake routes for testing performance.

0 comments on commit 8915fda

Please sign in to comment.