mirror of
https://github.com/kingomarnajjar/flex-template-web.git
synced 2026-07-26 14:57:18 +10:00
97 lines
3.4 KiB
Markdown
97 lines
3.4 KiB
Markdown
# 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](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 `src/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,
|
|
internal state, etc.
|
|
|
|
## server/
|
|
|
|
- `server/index.js` handles server-side rendering (SSR). Built with [Express](http://expressjs.com)
|
|
(Node.js framework).
|
|
- `server/csp.js` [Content Security Policy](https://content-security-policy.com), 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._
|