PartyRooms / Web

Related

• API and Swagger UI
• Desktop
• iOS

Table of contents

• development
• setup
• environment variables

Directory layout

.
├── /bin/                                  # Executables
├── /config/                               # Configuration files
├── /coverage/                             # Test coverage reports
├── /dist/                                 # The folder for compiled output
├── /flow/                                 # flowcheck config
├── /docs/                                 # Documentation files for the project
├── /gulpfile.js/                          # Gulp tasks
├── /node_modules/                         # 3rd-party libraries and utilities
├── /src/                                  # The source code and resources of the application
│   ├── /assets/                           # Static files which are copied to ./dist/public on compile
│   │   ├── /images
│   │   ├── /icons/                        # Icons 
│   │   ├── /fonts/                        # Additional fonts that used in project
│   ├── /scripts/                          # Application scripts
│   │   ├── /api/                          # REST API / Relay endpoints
│   │   ├── /constants/                    # Action type constants
│   │   ├── /components/                   # React components
│   │   ├── /decorators/                   # Decorators for various needs
│   │   ├── /forms/                        # React components representing forms
│   │   ├── /layouts/                      # Application layouts
│   │   ├── /lib/                          # App-specific code, utility classes and functions
│   │   ├── /pages/                        # React components representing pages
│   │   ├── /routes/                       # Routing configuration files
│   │   ├── /stores/                       # Stores contain the application state and logic
│   │   ├── /widets/                       # React widget components
│   │   └── /index.js                      # Applicaton entry point
│   ├── /styles/                           # Additional fonts that used in project
│   └── /templates/                        # Templates for server-side rendering
├── /webpack/                              # Webpack configuration files
│   ├── /common                            # Common build settings for webpack
│   ├── /development                       # Webpack settings to be applied only for development env
│   └── /production                        # Production webpack settings
│── browserlist                            # The list of supporter browsers for autoprefixer
│── config.js                              # The main configuration file
└── package.json                           # The list of 3rd party libraries and utilities

Development

For a smooth dev process you can install these tools (not required):

• greenkeeper
• npm-check-updates
• nvm
• node-foreman

Setup

• cp .example.env .env and set required environment variables
• npm install
• you have to npm i and build modules that is pulled from github by yourself

There is a config section in package.json:

"config": {
  ...

  "https": false,
  "host": "localhost",
  "ports": {
    "app": 3000,
    "socket": 3001,
    "browserSync": 3002,
    "browserSyncUI": 3003
  },
  "sourceMap": true,
  "locale": "en_US",

  ...
}

• sourceMap ­ enable source maps for production (its enabled by default in dev env)

Options

Options:

• verbose ­ set verbosity to the maximum level
• profile
• quiet - set this to true and you'll see no error output in the console and it will make much harder to now whats wrong
• debug
• lint

By default source maps is generated using cheap-module-inline-source-map option. If thats not enough for you then you can change it to eval-source-map or even the slowest source-map. Here is some more info about devtool.

manifest.json is generated automatically for you

Analysis

In dist directory you can find webpack stats file named webpack.stats.json and feed it to webpack stats analyzer to see some useful info about your bundle.

Updating

• Updates are arriving automatically as PR's, thanks to greenkeeper
• If you want to check for updates manually: npm-check-updates

Postcss

If you want to install any additional postcss plugin, first check if its already in precss or in postcss-cssnext

Resources

Base knowledge

• 40 webpack screencasts in russian - takes about 2h to get started
• postcss screencasts - including lost grid system tutorials
• webpack hot reloading magic (habra)
• awesome react
• awesome redux
• redux docs
• redux docs in russian
• npm module checklist
• react-router SSR
• fullstack redux tutorial
• react redux styleguide
• a good post about redux-simple-router

Markup & CSS

• css modules, icss (interoperable css)
• webpack css-laoder css modules
• react-css-modules
• gajus/react-css-modules-examples
• css-modules/webpack-demo

Icons

• thenounproject.com
• simpleicons.org

Testing

• mocha
• chai
• sinon
• sinon-chai
• enzyme
• cheerio

Boilerplates

• mxstbr/react-boilerplate - Quick setup for performance orientated, offline-first React.js applications.

Deployment

Setup:

• web: docker-compose up web

Flow:

• shell: docker-compose run shell
• rebuild: docker-compose build
• deploy: heroku docker:release

To get more info you can read the docs at Heroku devcenter. And here is the docker cheatsheet.

Troubleshooting

• try to run with --verbose --profile keys

Debugging

debug package is used for debugging. So to turn it on simply specify the DEBUG environment variable:

• DEBUG=app:server:(log|info|error) — to see nodejs server debugging output.
• DEBUG=app:webpack — to see app-related webpack output.
• DEBUG=app:* — to see everything.