diff --git a/docs/folder-structure.md b/docs/folder-structure.md new file mode 100644 index 00000000..3bcef81c --- /dev/null +++ b/docs/folder-structure.md @@ -0,0 +1,101 @@ +# Folder structure + +After cloning the repo, your project should look like this: + +``` +├── ext +│   └── default-mail-templates +├── package.json +├── docs +├── public +│   ├── 500.html +│   ├── index.html +│   ├── robots.txt +│   └── static +├── server +│   ├── index.js +│   ├── csp.js +│   ├── sitemap.js +│   └ ... +└── src + ├── Routes.js + ├── analytics + ├── app.js + ├── assets + ├── components + ├── config.js + ├── containers + ├── ducks + ├── examples.js + ├── forms + ├── index.js + ├── marketplace-custom-config.js + ├── marketplace.css + ├── marketplaceFonts.css + ├── marketplaceIndex.css + ├── reducers.js + ├── routeConfiguration.js + ├── store.js + ├── translations + └── util +``` + +## public/index.html + +This is the page template. It includes fonts, Stripe SDK, Google Maps JavaScript API, and app icons. +It also specifies placeholders for tags generated by +[React Helmet](https://github.com/nfl/react-helmet) + +## src/ + +* `src/index.js` is the JavaScript entry point on the client-side (it also exports `renderApp` + function to be used for server-side rendering). +* `src/app.js` creates ClientApp and ServerApp +* `src/routeConfiguration.js` defines logic between routes and page-level components +* `src/marketplace.css`, `src/marketplaceIndex.css`, `src/marketplaceIndex.css` define marketplace + level styling using [CSS Properties](http://cssnext.io/features/#custom-properties-var) and CSS + Property Sets. +* `src/translations/en.json` all English translations used in Saunatime template app. (A good place + to start customization.) + +### `src/components/` + +Normal components used in Flex Template for Web are defined here. The main file for the component is +behind path `src/components/ComponentName/ComponentName.js`, but you can import it through +`component/index.js`: + +`import { NamedLink } from 'path/to/components';` + +When creating new components, remember to import marketplace.css file to component's own CSS file - +that way you can use CSS Property variables defined in **marketplace.css**. + +### `src/containers/` + +Containers are components that are connected to [Redux](https://redux.js.org/) store. Currently, +this folder contains only page-level components and one common component: TopbarContainer. + +### `src/forms/` + +Forms are in their own folder since they are using a special library to handle validations, errors, +etc. - and we have had forms that have been connected to Redux store. + +_**NOTE:** Currently, we are migrating to +[🏁 Final Form](https://github.com/final-form/react-final-form) (away from +[Redux Form](http://redux-form.com/))._ + +## server/ + +* `server/index.js` handles server-side rendering (SSR). Build with [Express](http://expressjs.com) + (Node.js framework) +* `server/csp.js` [content security policy](https://content-security-policy.com) (a whitelist of + domains that external scripts are allowed to access) +* `server/sitemap.js` generates a minimal sitemap.xml for SEO purposes + +## ext/default-mail-templates/ + +This file contains default email templates for various needs (e.g. _booking-request-accepted_, or +_verify-your-email_). You should customize all the different files (\*-html.html, \*-subject.txt, +and \*-text.txt). + +_**NOTE:** Changing these doesn't change actual email templates - you need to send customized +templates to your FLEX contact person._