maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-25 22:37:18 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Format markdown files

Browse source
This commit is contained in:
Kimmo Puputti 2017-12-11 11:03:08 +02:00
parent 9813c974f9
commit 1f733e3e75
10 changed files with 204 additions and 190 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
README.md
View file

@ -2,11 +2,10 @@
[![CircleCI](https://circleci.com/gh/sharetribe/sharetribe-starter-app.svg?style=shield&circle-token=198451e83e5cecb0d662949260dbc3273ac44a67)](https://circleci.com/gh/sharetribe/sharetribe-starter-app)
This is a template application for a Sharetribe marketplace that can
be extended and customised. It is based on an application bootstrapped
with
[create-react-app](https://github.com/facebookincubator/create-react-app) with
some additions, namely server side rendering and a custom CSS setup.
This is a template application for a Sharetribe marketplace that can be extended and customised. It
is based on an application bootstrapped with
[create-react-app](https://github.com/facebookincubator/create-react-app) with some additions,
namely server side rendering and a custom CSS setup.
## Documentation
@ -16,8 +15,8 @@ Documentation can be found in the [docs directory](docs/).
Install required tools:
- [Node.js](https://nodejs.org/)
- [Yarn](https://yarnpkg.com/)
* [Node.js](https://nodejs.org/)
* [Yarn](https://yarnpkg.com/)
Clone this repository and install dependencies:
@ -25,18 +24,16 @@ Clone this repository and install dependencies:
## Development
To develop the application and to see changes live, start the frontend
development server:
To develop the application and to see changes live, start the frontend development server:
yarn run dev
**Known issues:**
* Adding/changing `import`s may not be synced properly with
ESLint. You may see an error `Unable to resolve path to module` even
though the module existing in right path. Restarting the server
doesn't help. To solve the issue, you need to make a change to the
file where the error occurs.
* Adding/changing `import`s may not be synced properly with ESLint. You may see an error
`Unable to resolve path to module` even though the module existing in right path. Restarting the
server doesn't help. To solve the issue, you need to make a change to the file where the error
occurs.
## Development Server
@ -44,13 +41,11 @@ To develop the server setup, run:
yarn run dev-server
This runs the frontend production build and starts the Express.js
server in `server/index.js` that renders the application routes in the
server. The server is automatically restarted when there are changes
in the `server/` directory.
This runs the frontend production build and starts the Express.js server in `server/index.js` that
renders the application routes in the server. The server is automatically restarted when there are
changes in the `server/` directory.
Not that this server does **not** pick up changes in the frontend
application code.
Not that this server does **not** pick up changes in the frontend application code.
## Tests
@ -62,8 +57,7 @@ See more in the [testing documentation](docs/testing.md).
## Deployment
The `master` branch is automatically deployed to Heroku. If you want
to deploy a feature branch, setup the `sharetribe-starter-app` Heroku
app and push the feature branch:
The `master` branch is automatically deployed to Heroku. If you want to deploy a feature branch,
setup the `sharetribe-starter-app` Heroku app and push the feature branch:
git push heroku my-feature-branch:master

27
docs/README.md
View file

@ -1,20 +1,19 @@
# Sharetribe Starter App Documentation
The application was bootstrapped with a forked version of
[create-react-app](https://github.com/facebookincubator/create-react-app). While
most of the original documentation still apply, there are some
important differences listed in the
[sharetribe-scripts](https://www.npmjs.com/package/sharetribe-scripts)
NPM package.
[create-react-app](https://github.com/facebookincubator/create-react-app). While most of the
original documentation still apply, there are some important differences listed in the
[sharetribe-scripts](https://www.npmjs.com/package/sharetribe-scripts) NPM package.
Documentation for specific topics can be found in the following files:
- Original [create-react-app documentation](https://github.com/sharetribe/create-react-app/blob/master/packages/react-scripts/template/README.md)
- [Testing](testing.md)
- [Error logging with Sentry](sentry.md)
- [CI](ci.md)
- [Static pages](static-pages.md)
- [Analytics](analytics.md)
- [Terms of Service and Privacy Policy](terms-of-service-and-privacy-policy.md)
- [i18n](i18n.md)
- [Colors and icons](colors-and-icons.md)
* Original
[create-react-app documentation](https://github.com/sharetribe/create-react-app/blob/master/packages/react-scripts/template/README.md)
* [Testing](testing.md)
* [Error logging with Sentry](sentry.md)
* [CI](ci.md)
* [Static pages](static-pages.md)
* [Analytics](analytics.md)
* [Terms of Service and Privacy Policy](terms-of-service-and-privacy-policy.md)
* [i18n](i18n.md)
* [Colors and icons](colors-and-icons.md)

38
docs/analytics.md
View file

@ -1,13 +1,11 @@
# Analytics
The application supports tracking page views with pluggable analytics
handlers.
The application supports tracking page views with pluggable analytics handlers.
## Google Analytics
Google Analytics (GA) is supported by default. The enable GA, set the
GA tracker ID to the environment variable
`REACT_APP_GOOGLE_ANALYTICS_ID`;
Google Analytics (GA) is supported by default. The enable GA, set the GA tracker ID to the
environment variable `REACT_APP_GOOGLE_ANALYTICS_ID`;
## Custom analytics handler
@ -15,29 +13,25 @@ If you want to add a new analytics library, you can do as follows:
1. Add the analytics library script
If the analytics library has an external script, add the library
script tag to the [src/public/index.html](../public/index.html)
file. If you need more control, see how the GA script is added in
[server/renderer.js](../server/renderer.js).
If the analytics library has an external script, add the library script tag to the
[src/public/index.html](../public/index.html) file. If you need more control, see how the GA
script is added in [server/renderer.js](../server/renderer.js).
1. Create a handler
To track page views, create a custom handler e.g. in
[src/analytics/handlers.js](../src/analytics/handlers.js). The
handler should be a class that implements a `trackPageView(url)`
method.
[src/analytics/handlers.js](../src/analytics/handlers.js). The handler should be a class that
implements a `trackPageView(url)` method.
Note that the `url` parameter might not be the same as in the URL
bar of the browser. It is the canonical form of the URL. For
example, in the listing page it doesn't have the dynamic title slug
in the middle. This allows unified analytics and correct tracking
of pages that can be accessed from multiple different URLs.
Note that the `url` parameter might not be the same as in the URL bar of the browser. It is the
canonical form of the URL. For example, in the listing page it doesn't have the dynamic title
slug in the middle. This allows unified analytics and correct tracking of pages that can be
accessed from multiple different URLs.
If you analytics library takes the page URL from the browser, you
might need to override that behavior to use the canonical URL that
is given to the method.
If you analytics library takes the page URL from the browser, you might need to override that
behavior to use the canonical URL that is given to the method.
1. Initialise the handler
Initialise the handler in the `setupAnalyticsHandlers()` function
in [src/index.js](../src/index.js).
Initialise the handler in the `setupAnalyticsHandlers()` function in
[src/index.js](../src/index.js).

28
docs/ci.md
View file

@ -1,9 +1,8 @@
# CI
The application provides a configuration to use
[CircleCI](https://circleci.com/) as a continuous integration server
to run tests and other scripts. This ensures quality and can be forced
to avoid merging changes that break tests or fail audits.
The application provides a configuration to use [CircleCI](https://circleci.com/) as a continuous
integration server to run tests and other scripts. This ensures quality and can be forced to avoid
merging changes that break tests or fail audits.
The [circle.yml](../circle.yml) file is used to configure CircleCI.
@ -11,23 +10,20 @@ Currently the CI runs the following scripts:
## Security audit: `yarn run audit`
This command runs the security audit using
[nsp](https://www.npmjs.com/package/nsp). The audit checks for
installed packages with known vulnerabilities and warns about those.
This command runs the security audit using [nsp](https://www.npmjs.com/package/nsp). The audit
checks for installed packages with known vulnerabilities and warns about those.
The scripts outputs information about the dependency path that added
the package. If that information is not enough, `yarn why
package-name` can be used to get more detailed information about why
the package is installed.
The scripts outputs information about the dependency path that added the package. If that
information is not enough, `yarn why package-name` can be used to get more detailed information
about why the package is installed.
If you are convinced that the vulnerability can be ignored, exceptions
can be added to the [.nsprc](../.nsprc) file.
If you are convinced that the vulnerability can be ignored, exceptions can be added to the
[.nsprc](../.nsprc) file.
## Code formatting: `yarn run format-ci`
This command fails if there are changes in the formatting that are not
committed. Run `yarn run format` to format the code and get rid of the
error.
This command fails if there are changes in the formatting that are not committed. Run
`yarn run format` to format the code and get rid of the error.
## Build: `yarn run build`

36
docs/colors-and-icons.md
View file

@ -1,13 +1,11 @@
# Colors and icons
One of the first customisations is to change the marketplace colors
and icons.
One of the first customisations is to change the marketplace colors and icons.
## Colors
To change the marketplace colors, open the
[src/marketplace.css](../src/marketplace.css) file and change the
color variables:
To change the marketplace colors, open the [src/marketplace.css](../src/marketplace.css) file and
change the color variables:
```css
--marketplaceColor: #c0392b;
@ -17,11 +15,9 @@ color variables:
## Icons
The default icons are generated with
[RealFaviconGenerator](https://realfavicongenerator.net/). You can
upload your original icon to the tool, customise the colors and
themes, and download a generated set if icons and an HTML snippet to
point to those images.
The default icons are generated with [RealFaviconGenerator](https://realfavicongenerator.net/). You
can upload your original icon to the tool, customise the colors and themes, and download a generated
set if icons and an HTML snippet to point to those images.
1. Open https://realfavicongenerator.net/
@ -35,17 +31,14 @@ point to those images.
1. Generate the icons
1. Unzip the favicons.zip archive and replace the default icons and
files in [public/static/icons/](../public/static/icons/) with the
new icons
1. Unzip the favicons.zip archive and replace the default icons and files in
[public/static/icons/](../public/static/icons/) with the new icons
1. Replace the default HTML snippet in
[public/index.html](../public/index.html) with the snippet from the
generator.
1. Replace the default HTML snippet in [public/index.html](../public/index.html) with the snippet
from the generator.
**Note:** Remove the manifest link from the snippet as we have a
default manifest with extra data compared to the generated one. You
can edit the default file as you wish.
**Note:** Remove the manifest link from the snippet as we have a default manifest with extra data
compared to the generated one. You can edit the default file as you wish.
**Example HTML snippet:**
@ -64,6 +57,5 @@ point to those images.
## Map marker icon
The map marker icon in the listing can be found in
[src/components/Map/images/marker.png](../src/components/Map/images/marker.png). The
dimensions should be 32x32 pixels, so the `favicon-32x32.png` file can
be used to replace the map icon.
[src/components/Map/images/marker.png](../src/components/Map/images/marker.png). The dimensions
should be 32x32 pixels, so the `favicon-32x32.png` file can be used to replace the map icon.

18
docs/i18n.md
View file

@ -1,22 +1,18 @@
# i18n
The application supports having a single language for the UI. By
default the language is English.
The application supports having a single language for the UI. By default the language is English.
We are using the [react-intl](https://github.com/yahoo/react-intl)
package to translate UI texts and to format dates, numbers, money
values, etc.
We are using the [react-intl](https://github.com/yahoo/react-intl) package to translate UI texts and
to format dates, numbers, money values, etc.
To change the language, do the following:
1. Copy the default
[src/translations/en.json](../src/translations/en.json) English
translation messages file into some other file like `es.json`.
1. Copy the default [src/translations/en.json](../src/translations/en.json) English translation
messages file into some other file like `es.json`.
1. Change the messages in the new messages file to your language.
1. In [src/config.js](../src/config.js), change the `locale` variable value
1. In [src/app.js](../src/app.js), change the translation imports to
come from the correct `react-intl` locale and the new messages file
you created.
1. In [src/app.js](../src/app.js), change the translation imports to come from the correct
`react-intl` locale and the new messages file you created.

20
docs/sentry.md
View file

@ -1,15 +1,21 @@
# Error logging with Sentry
The Starter App supports error logging with [Sentry](https://sentry.io/) out of the box provided
that required environment variables are set in place. Other logging solutions can also be used but
the Sentry client comes already strapped into the Starter App.
The Starter App supports error logging with [Sentry](https://sentry.io/) out of the box provided that required environment variables are set in place. Other logging solutions can also be used but the Sentry client comes already strapped into the Starter App.
To enable the Sentry error logging a DSN, _Data Source Name_ has to be provided as an environment
variable. Browser and Node environments both require their own keys. The key names are as follows:
To enable the Sentry error logging a DSN, _Data Source Name_ has to be provided as an environment variable. Browser and Node environments both require their own keys. The key names are as follows:
* **SERVER_SENTRY_DSN** - the private Sentry DSN, used on the server side
* **REACT_APP_PUBLIC_SENTRY_DSN** - the public Sentry DSN, used in the browser
- __SERVER_SENTRY_DSN__ - the private Sentry DSN, used on the server side
- __REACT_APP_PUBLIC_SENTRY_DSN__ - the public Sentry DSN, used in the browser
The DSN keys can be aquired from the Sentry project settings. To test them in your local environment they can be passed for example to the `yarn run dev-server` command:
The DSN keys can be aquired from the Sentry project settings. To test them in your local environment
they can be passed for example to the `yarn run dev-server` command:
REACT_APP_PUBLIC_SENTRY_DSN='<public-sentry-dsn>' SERVER_SENTRY_DSN='<private-sentry-dsn>' yarn run dev-server
If the Sentry DSN keys are not provided Starter App will log errors to the console. The logging and Sentry setup is implemented in [util/log.js](../src/util/log.js) and [server/log.js](../server/log.js) so refer to those files to change the external logging service or the logging logic in general.
If the Sentry DSN keys are not provided Starter App will log errors to the console. The logging and
Sentry setup is implemented in [util/log.js](../src/util/log.js) and
[server/log.js](../server/log.js) so refer to those files to change the external logging service or
the logging logic in general.

166
docs/static-pages.md
View file

@ -1,33 +1,36 @@
# Static pages
If you want to create simple pages that just show static content without need for data fetches,
you can create a static page.
If you want to create simple pages that just show static content without need for data fetches, you
can create a static page.
Steps for creating a static page:
1) [Create a new folder under `src/containers/`](#1-creating-a-new-folder)
2) [Create a new JavaScript file using the same name.](#2-creating-a-javascript-file)
3) [Create a new CSS file using the same name.](#3-creating-a-css-file)
4) [Write the content to a JavaScript file (i.e. AboutPage.js in our example).](#4-creating-the-component)
5) [Write the style rules to CSS file (i.e. AboutPage.css in our example).](#5-adding-some-styles-to-the-css-file)
6) [Add the newly created page component to `src/containers/index.js`](#6-adding-the-component-to-the-component-directory)
7) [Add the newly created page to `src/routeConfiguration.js`](#7-adding-a-route-to-the-page)
1. [Create a new folder under `src/containers/`](#1-creating-a-new-folder)
2. [Create a new JavaScript file using the same name.](#2-creating-a-javascript-file)
3. [Create a new CSS file using the same name.](#3-creating-a-css-file)
4. [Write the content to a JavaScript file (i.e. AboutPage.js in our example).](#4-creating-the-component)
5. [Write the style rules to CSS file (i.e. AboutPage.css in our example).](#5-adding-some-styles-to-the-css-file)
6. [Add the newly created page component to `src/containers/index.js`](#6-adding-the-component-to-the-component-directory)
7. [Add the newly created page to `src/routeConfiguration.js`](#7-adding-a-route-to-the-page)
## 1. Creating a new folder
Create a new folder under `src/containers/` with the name of your static page. E.g. "about" page should be named as `AboutPage`.
Create a new folder under `src/containers/` with the name of your static page. E.g. "about" page
should be named as `AboutPage`.
## 2. Creating a JavaScript file
Create a new JavaScript file using the folder name. The path should look like `src/containers/AboutPage/AboutPage.js`.
Create a new JavaScript file using the folder name. The path should look like
`src/containers/AboutPage/AboutPage.js`.
## 3. Creating a CSS file
Create a new CSS file using the folder name. The path should look like `src/containers/AboutPage/AboutPage.css`.
Create a new CSS file using the folder name. The path should look like
`src/containers/AboutPage/AboutPage.css`.
## 4. Creating the component
Template for a single column static page (AboutPage.js):
(We'll go through this line-by-line below.)
Template for a single column static page (AboutPage.js): (We'll go through this line-by-line below.)
```jsx
import React from 'react';
@ -39,7 +42,7 @@ import {
LayoutWrapperFooter,
Footer,
NamedLink,
ExternalLink
ExternalLink,
} from '../../components';
import css from './AboutPage.css';
@ -51,10 +54,10 @@ const AboutPage = () => {
className={css.root}
title="About"
schema={{
"@context": "http://schema.org",
"@type": "AboutPage",
"description": "Description of this page",
"name": "About page",
'@context': 'http://schema.org',
'@type': 'AboutPage',
description: 'Description of this page',
name: 'About page',
}}
>
<LayoutSingleColumn>
@ -75,32 +78,40 @@ const AboutPage = () => {
</LayoutSingleColumn>
</StaticPage>
);
}
};
export default AboutPage;
```
We are using [React](https://reactjs.org/) and [JSX](https://reactjs.org/docs/introducing-jsx.html) to create components and pages. Therefore, we need to import React to our new component which is done in the first line.
We are using [React](https://reactjs.org/) and [JSX](https://reactjs.org/docs/introducing-jsx.html)
to create components and pages. Therefore, we need to import React to our new component which is
done in the first line.
```jsx
import React from 'react';
```
In the second line we are importing two containers:
- `StaticPage`: helps in creating static pages
- `TopbarContainer`: creates our Topbar component and fetches the data it needs.
* `StaticPage`: helps in creating static pages
* `TopbarContainer`: creates our Topbar component and fetches the data it needs.
```jsx
import { StaticPage, TopbarContainer } from '../../containers';
```
After that we need to import some components:
- `LayoutSingleColumn` and wrappers that it needs to position content
- `Footer` component (to be added inside LayoutWrapperFooter)
- `NamedLink` makes it easier to point to different pages inside Starter app
- `ExternalLink` can be used to link outside of Starter app. It creates a normal `<a>`link with extra attributes `target="_blank" rel="noopener noreferrer"` that add some security to these outbound links.
`LayoutSingleColumn` (and other layouts like LayoutSideNavigation) need to understand what the content is about. Therefore, different parts of the page need to be wrapped with specific components - in this case: `LayoutWrapperTopbar`, `LayoutWrapperMain`, and `LayoutWrapperFooter`.
* `LayoutSingleColumn` and wrappers that it needs to position content
* `Footer` component (to be added inside LayoutWrapperFooter)
* `NamedLink` makes it easier to point to different pages inside Starter app
* `ExternalLink` can be used to link outside of Starter app. It creates a normal `<a>`link with
extra attributes `target="_blank" rel="noopener noreferrer"` that add some security to these
outbound links.
`LayoutSingleColumn` (and other layouts like LayoutSideNavigation) need to understand what the
content is about. Therefore, different parts of the page need to be wrapped with specific
components - in this case: `LayoutWrapperTopbar`, `LayoutWrapperMain`, and `LayoutWrapperFooter`.
```jsx
import {
@ -110,26 +121,31 @@ import {
LayoutWrapperFooter,
Footer,
NamedLink,
ExternalLink
ExternalLink,
} from '../../components';
```
Then we need to import styles and possible other files from current folder. With CSS we are using [CSS Modules](https://github.com/css-modules/css-modules) to tackle possible classhes of different class names. [Read more.](#5-creating-the-css-file)
Then we need to import styles and possible other files from current folder. With CSS we are using
[CSS Modules](https://github.com/css-modules/css-modules) to tackle possible classhes of different
class names. [Read more.](#5-creating-the-css-file)
```jsx
import css from './AboutPage.css';
```
Then we also import an image which is used later (`<img src={image} alt="My first ice cream." />`).
Then we also import an image which is used later (`<img src={image} alt="My first ice cream." />`).
```jsx
import image from './path/to/image.png';
```
Then after all the imports we are finally getting into phase were we define the component.
`const AboutPage = props => { return <div></div>}` defines a component called AboutPage with content defined in return part. This is a [functional component](https://reactjs.org/docs/components-and-props.html).
`const AboutPage = props => { return <div></div>}` defines a component called AboutPage with content
defined in return part. This is a
[functional component](https://reactjs.org/docs/components-and-props.html).
In the template above we are using StaticPage component with some attributes:
```jsx
<StaticPage
className={css.root}
@ -143,36 +159,43 @@ In the template above we are using StaticPage component with some attributes:
>
```
- `className` is JSX name for `class` attribute used in plain HTML.
- `title="About"` creates `<title>About</title>` element to `<head>` section of the page. (That title is also used in OpenGraph meta tags). You could also add `description="This is about page description"`
- Then we have `schema` tag that defines some data for search engines in JSON-LD format. Check [schema.org](http://schema.org/docs/full.html) for more information.
* `className` is JSX name for `class` attribute used in plain HTML.
* `title="About"` creates `<title>About</title>` element to `<head>` section of the page. (That
title is also used in OpenGraph meta tags). You could also add
`description="This is about page description"`
* Then we have `schema` tag that defines some data for search engines in JSON-LD format. Check
[schema.org](http://schema.org/docs/full.html) for more information.
Inside `StaticPage` component we define layout (`LayoutSingleColumn`) and add other components inside semantic content wrappers so that the layout is able to understand where to render those blocks.
Inside `StaticPage` component we define layout (`LayoutSingleColumn`) and add other components
inside semantic content wrappers so that the layout is able to understand where to render those
blocks.
```jsx
<LayoutSingleColumn>
<LayoutWrapperTopbar>
<TopbarContainer />
</LayoutWrapperTopbar>
<LayoutWrapperMain>
<h1>Some content</h1>
<img src={image} alt="My first ice cream." />
<div>
<NamedLink name="LandingPage">Go to home page</NamedLink> or
<ExternalLink href="https://google.com">Go to Google</ExternalLink>
</div>
</LayoutWrapperMain>
<LayoutWrapperFooter>
<Footer />
</LayoutWrapperFooter>
</LayoutSingleColumn>
<LayoutSingleColumn>
<LayoutWrapperTopbar>
<TopbarContainer />
</LayoutWrapperTopbar>
<LayoutWrapperMain>
<h1>Some content</h1>
<img src={image} alt="My first ice cream." />
<div>
<NamedLink name="LandingPage">Go to home page</NamedLink> or
<ExternalLink href="https://google.com">Go to Google</ExternalLink>
</div>
</LayoutWrapperMain>
<LayoutWrapperFooter>
<Footer />
</LayoutWrapperFooter>
</LayoutSingleColumn>
```
And as a final step we need to export the component. `export default AboutPage;`. See more from [babeljs.org](https://babeljs.io/learn-es2015/#ecmascript-2015-features-modules)
And as a final step we need to export the component. `export default AboutPage;`. See more from
[babeljs.org](https://babeljs.io/learn-es2015/#ecmascript-2015-features-modules)
## 5. Adding some styles to the CSS file
Here's an example what your AboutPage.css file could look like:
```css
@import '../../marketplace.css';
@ -184,21 +207,26 @@ Here's an example what your AboutPage.css file could look like:
}
```
## 6. Adding the component to the component directory
New component needs to be added to `src/containers/index.js` file or if it's a presentational component (not page or form) it should be inside components folder and therefore added to `src/components/index.js`
Inside that index.js you need to add line `export { default as AboutPage } from './AboutPage/AboutPage';`. This helps other parts of the app to import new components easily with `import { AboutPage } from '../../components'`.
New component needs to be added to `src/containers/index.js` file or if it's a presentational
component (not page or form) it should be inside components folder and therefore added to
`src/components/index.js`
Inside that index.js you need to add line
`export { default as AboutPage } from './AboutPage/AboutPage';`. This helps other parts of the app
to import new components easily with `import { AboutPage } from '../../components'`.
## 7. Adding a route to the page
As a last step you need to add the newly created static page to Starter apps routing. This can be done in `src/routeConfiguration.js`.
As a last step you need to add the newly created static page to Starter apps routing. This can be
done in `src/routeConfiguration.js`.
Inside routeConfiguration function you should add a URL path, a page name (it should not conflicting with other pages), and the component itself.
Inside routeConfiguration function you should add a URL path, a page name (it should not conflicting
with other pages), and the component itself.
Add it as first to the list of imported pages in alphabetical order (2nd line):
```jsx
import {
AboutPage,
@ -206,8 +234,9 @@ import {
CheckoutPage,
```
and after that add the route configuration to your newly created page:
(In this example we created about page so '/about' would work well as a path.)
and after that add the route configuration to your newly created page: (In this example we created
about page so '/about' would work well as a path.)
```javascript
{
path: '/about',
@ -219,8 +248,11 @@ and after that add the route configuration to your newly created page:
## Read more
We are using several libraries in this example. If you want to read more, here's some pointers:
- [ES2015](https://babeljs.io/learn-es2015/): imports, exports, arrow functions
- [React](https://reactjs.org/): for creating components
- [JSX](https://reactjs.org/docs/introducing-jsx.html): for getting HTML-like markup syntax for own components
- [CSS Modules](https://github.com/css-modules/css-modules)
- [React Router](https://reacttraining.com/react-router/web/guides/philosophy): routing inside Starter app pages.
* [ES2015](https://babeljs.io/learn-es2015/): imports, exports, arrow functions
* [React](https://reactjs.org/): for creating components
* [JSX](https://reactjs.org/docs/introducing-jsx.html): for getting HTML-like markup syntax for own
components
* [CSS Modules](https://github.com/css-modules/css-modules)
* [React Router](https://reacttraining.com/react-router/web/guides/philosophy): routing inside
Starter app pages.

4
docs/terms-of-service-and-privacy-policy.md
View file

@ -1,7 +1,7 @@
# Terms of Service and Privacy Policy
The Terms of Service and Privacy Policy of a marketplace are static
components that can be edited to suit the marketplace.
The Terms of Service and Privacy Policy of a marketplace are static components that can be edited to
suit the marketplace.
## Terms of Service

17
docs/testing.md
View file

@ -1,6 +1,10 @@
# Sharetribe Starter App Testing
The test setup is based on the `create-react-app` test setup and is using the [Jest testing framework](https://facebook.github.io/jest/). See the [Testing Components](create-react-app.md#testing-components) and [Experimental Snapshot Testing](create-react-app.md#experimental-snapshot-testing) sections in the `create-react-app` documentation.
The test setup is based on the `create-react-app` test setup and is using the
[Jest testing framework](https://facebook.github.io/jest/). See the
[Testing Components](create-react-app.md#testing-components) and
[Experimental Snapshot Testing](create-react-app.md#experimental-snapshot-testing) sections in the
`create-react-app` documentation.
## Running tests
@ -18,8 +22,9 @@ Note that this also runs the linter.
To learn more about testing with Jest, read the following documentation:
- [Getting Started](https://facebook.github.io/jest/docs/getting-started.html)
- [Tutorial - React](https://facebook.github.io/jest/docs/tutorial-react.html)
- [Tutorial - Async](https://facebook.github.io/jest/docs/tutorial-async.html)
- [Snapshot Testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html) blog post
- [API Reference](https://facebook.github.io/jest/docs/api.html) lists the global environment with the available functions and the assertion matchers
* [Getting Started](https://facebook.github.io/jest/docs/getting-started.html)
* [Tutorial - React](https://facebook.github.io/jest/docs/tutorial-react.html)
* [Tutorial - Async](https://facebook.github.io/jest/docs/tutorial-async.html)
* [Snapshot Testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html) blog post
* [API Reference](https://facebook.github.io/jest/docs/api.html) lists the global environment with
the available functions and the assertion matchers