backbone-react-ui-rely v0.1.6

React.BackBone.UI

TOC

About

Starter boiler plate app using the following technologies:

• React
• Create React App best way to start building a new single-page application in React
• React Router
• Redux's futuristic Flux implementation
• redux-saga separate thread in your application that's solely responsible for side effects
• ESLint to maintain a consistent code style
• Flow static type checker for JavaScript by Facebook
• Jest JavaScript Testing Framework with a focus on simplicity
• React Testing Library as Unit testing suite for react
• styled-components using components as a low-level styling construct
• SignalR for real-time communication
• Semantic React
• i18next internationalization-framework written in and for JavaScript
• Husky Git hooks made easy
• lint-staged Run linters against staged git files
• Prettier code formatter

Installation

yarn:

yarn;

npm:

npm install

Run

yarn:

yarn start

npm:

npm start

If you already changed the environment variables you need to run the following script to apply that changes and update the env-config file.

Powershell

yarn:

yarn run ps1-env

npm:

npm run ps1-env

Bash

yarn:

yarn run bash-env

npm:

npm run bash-env

With this script you will have the latest environment variables that you defined in the .env.dev.

Repository structure

This is the structure configuration that we recommend in order to follow a good separation of all the files and have all the things in the correct place and accessible for everyone.

Public

public
 ┣ locales
 ┃ ┣ en
 ┃ ┃ ┗ translation.json
 ┃ ┗ sp
 ┃ ┃ ┗ translation.json
 ┣ env-config.js
 ┣ favicon.ico
 ┗ index.html

src

All the react/JavaScript files of the application should be placed inside the src directory as is shown below.

src
 ┣ Azure
 ┃ ┗ adal.utils.js
 ┣ components
 ┃ ┣ chat
 ┃ ┃ ┣ chat.component.jsx
 ┃ ┃ ┗ chat.styles.jsx
 ┃ ┣ custom-button
 ┃ ┃ ┣ custom-button.component.jsx
 ┃ ┃ ┣ custom-button.styles.jsx
 ┃ ┃ ┗ custom-button.test.jsx
 ┃ ┣ error-boundary
 ┃ ┃ ┣ error-boundary.component.jsx
 ┃ ┃ ┣ error-boundary.styles.jsx
 ┃ ┃ ┗ error-boundary.test.jsx
 ┃ ┣ spinner
 ┃ ┃ ┣ spinner.component.jsx
 ┃ ┃ ┗ spinner.styles.jsx
 ┃ ┣ user
 ┃ ┃ ┣ user.component.jsx
 ┃ ┃ ┗ user.styles.jsx
 ┃ ┣ users-list
 ┃ ┃ ┣ users-list.component.jsx
 ┃ ┃ ┗ users-list.styles.jsx
 ┃ ┗ with-spinner
 ┃ ┃ ┗ with-spinner.component.jsx
 ┣ constants
 ┃ ┗ index.js
 ┣ i18next
 ┃ ┣ i18n.js
 ┃ ┗ readme.md
 ┣ middleware
 ┃ ┣ api.js
 ┃ ┣ app-service.js
 ┃ ┗ signalR.js
 ┣ pages
 ┃ ┗ homepage
 ┃ ┃ ┣ homepage.component.jsx
 ┃ ┃ ┣ homepage.container.jsx
 ┃ ┃ ┗ homepage.styles.jsx
 ┣ redux
 ┃ ┣ chat
 ┃ ┃ ┣ chat.action.js
 ┃ ┃ ┣ chat.reducer.js
 ┃ ┃ ┣ chat.selector.js
 ┃ ┃ ┣ chat.selectors.js
 ┃ ┃ ┗ chat.types.js
 ┃ ┣ user
 ┃ ┃ ┣ user.actions.js
 ┃ ┃ ┣ user.reducer.js
 ┃ ┃ ┣ user.sagas.js
 ┃ ┃ ┣ user.selectors.js
 ┃ ┃ ┗ user.types.js
 ┃ ┣ root-reducer.js
 ┃ ┣ root-saga.js
 ┃ ┣ saga-testing.utils.js
 ┃ ┗ store.js
 ┣ utils
 ┃ ┗ settings.utils.js
 ┣ App.jsx
 ┣ global.styles.js
 ┣ index.jsx
 ┣ serviceWorker.js
 ┗ setupTests.js

Explanation

public/locales

Here are placed all the different resources that the application will take for the i18n, each language should be separated by a folder with the name and culture that reference it. Inside we will find the json file with the translation.

{
  "welcome1": "welcome 1 test message, english",
  "welcome2": "welcome 2 test message, english",
  "welcome3": "welcome 3 test message, english",
  "sample": "this is a sample text, english",
  "description": {
    "part1": "description part 1. Sample description divided in several sections, english",
    "part2": "description part 2.  Sample description divided in several sections, english"
  },
  "users-collection-title": "USERS"
}

public/env-config.js

All the runtime environment variables should be inside env-config.js, this file is auto generated running the env.ps1 or env.sh scripts. The scripts takes all the key-value pairs defined in the .env files and they loads in the window.runConfig object.

src/Azure

In this directory we recommend put all the Azure dependencies/tools. Currently the template implements ADAL and Application Insights out of the box.

src/components

All jsx files as styled-components, React components and testing files.

src/constants

Constants shared though all the application.

src/i18next

i18next Internationalization and localization library configuration.

src/middleware

All custom redux middleware. SignalR middleware already implemented.

src/pages

Pages of the application that hold one or many components within.

src/redux

Directory that holds all the redux dependencies as the store, reducers, actions, types, sagas, selectors.

src/utils

Here you can place small snippets you can use throughout the application. Small functions to build bigger things with.

Contributing

Pull requests are welcome. If you are interested in contributing directly to the code base, please see the wiki to following the code guidelines and good practices