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, Mapbox API (and 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.

server/

• server/index.js handles server-side rendering (SSR). Built with Express (Node.js framework).
• server/csp.js Content Security Policy, 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.