flex-template-web/docs/folder-structure.md

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

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 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 src/marketplace.css.

src/containers/

Containers are components that are connected to Redux 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, internal state, etc.

NOTE: Currently, we are migrating to 🏁 Final Form (away from Redux Form).

server/

• server/index.js handles server-side rendering (SSR). Built with Express (Node.js framework)
• server/csp.js content security policy A whitelist of domains that the application and loaded scripts are allowed to access from the browser.
• 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.