fe-main v1.0.7

#auto.de Most popular e-commerce auto selling platform either in Germany and across EU region. Created using advanced, modern technologies.

General

Concept

The main idea is to create FE application that is as independent from BE as possible and also is very fast and comfortable to use from UX point of view. Because of that this is a single page application with node.js as BE.

Tools

Here is list of used tools. It will be extended as soon as new tools added to project:

• Type Script
• React.js v16
• React-router v4
• MobX
• Webpack v4
• Stylus
• CSS Modules

Structure

This is basic project structure with some explanation to most important folders and core concepts.

.search-app
├── config            # 
│   ├── build         # <-- all webpack related configuration
│   └── app           # <-- all app related configuration
├── coverage          # <-- test coverage output folder      
├── media             # <-- all static media (images, fonts, music, videos) that will be placed into public folder
├── public            # <-- public web folder (setup your server to host this)
│   └── assets        
├── source            # <-- app sources (since we use redux/react there is appropriate structure)      
│   ├── components
│   │   ├── ui        # <-- ui related components (buttons, dropdowns, inputs, tables, etc...)
│   │   └── layout    # <-- layout related components (footer, menu, header, etc...)
│   ├── stores        # <-- MobX stores
│   ├── services
│   ├── framework     # <-- some usefull libraries that can be used across the app
│   ├── constants.js
│   ├── AppRouter.tsx
│   ├── AppStore.js
│   └── routes.js 
├── app.html          # <-- main page template. after build this file become in /public/index.html
└── app.ts            # <-- app entry point. after build this file become /public/assets/main.[hash].js

Setup

Update your local ~/.npmrc file with this code. Ask your teammates for the proper _authToken:

//registry.npmjs.org/:_authToken=XXXXXXX
scope=@bytebrand
init-license=UNLICENSED
always-auth=true

Please make sure that you have node.js >= 6.10.0 and yarn installed on your system. If so, then just clone this repo and run:

npm install -g @bytebrand/fe-cli@latest --unsafe-perm=true --allow-root
yarn install

and all runtime and development dependencies will be installed to ./node_modules.
When all dependencies installed (it will take a while) and no errors occur, you are able to launch app locally or build for specific environment.
To run application in development mode, just write this in your terminal:

# yarn run start
auto-cli start --host local.autode-dev.de

after that special dev. server will start and you will be able to see running application on http://localhost:8080.

If you want to run production ready application, then simply run in your terminal

yarn run build:[env]

where env have to be production.

After this command succeed please upload all files from ./public to your server documentRoot folder and visit appropriate url.

Development

📚 General Information

In most cases, the development is reduced to creating new react.js component or reuse existing one with addition of some new data to MobX store or some new api calls to server.
Every react.js component it is a separate folder in ./source/components and it contains it's own code, styles and tests. All components separated in two different categories according to the basic react.js concept:

• smart components
• dump components

Note that this app have to be lightning fast so try to optimize your code during development. Here is a few links to read about optimization in react.js and javascript in general:

• React.js performance optimization
• Rendering optimisations for React applications
• Javascript code optimization

🏞 SVG React Components

We use inline SVG components. Check Doc file with detailed instractions

Testing

//TODO:

npm ls -g --depth=0 --link=true