React-Boilderplate Documentation

• The Hitchhikers Guide to react-boilerplate: An introduction for newcomers to this boilerplate.
• Overview: A short overview of the included tools
• Commands: Getting the most out of this boilerplate
• Testing: How to work with the built-in test harness
• Styling: How to work with the CSS tooling
• Your app: Supercharging your app with Routing, Redux, simple asynchronicity helpers, etc.
• Troubleshooting: Solutions to common problems faced by developers.

Reconnect to AWS Backend project

1. install aws-cli - https://docs.aws.amazon.com/cli/latest/userguide/installing.html
2. get personal aws accessKey and accessSecret from AWS IAM
3. configure the aws-cli by running 'aws configure'
4. get aws project id - aws mobile list-projects
5. re-connect to aws backend project by - awsmobile init {project-id}

AWS Cognito Command

1. Delete user aws cognito-idp admin-delete-user --user-pool-id us-east-1_fJaf2Yg7U --username {username-to-be-deleted}

AWS Mobile CLI commands

awsmobilejs/.awsmobile is the workspace of awsmobile-cli, please do not modify its contents

awsmobilejs/#current-backend-info contains information of the backend awsmobile project from the last synchronization with the cloud

awsmobilejs/backend is where you develop the codebase of the backend awsmobile project

awsmobile console opens the web console of the backend awsmobile project

awsmobile run pushes the latest development of the backend awsmobile project to the cloud, and runs the frontend application locally

awsmobile publish pushes the latest development of the backend awsmobile project to the cloud, and publishes the frontend application to aws S3 for hosting

Internationalization

Internationalization is based on react-intl library.

Main components:

• app/containers/LanguageProvider/ this folder contains the redux store and some other utilities added by the react boilerplate. This code was modified to accomodate the new requirements.
• messages.js files that contains the keys an the default language translation, English. This is NOT the final language file. This file is used to generate the language files located in app/translation/ folder.
• script from command line to extract the default language keys yarn extract-intl. Please make sure that the new keys and updated once make their way to the translation files; I experienced when the script is running while applicaiton is running the keys are not generated. The safest way is to delete all the keys in en.js and run the script.

How to add internationalization to a react component

• Import injector

import { injectIntl } from 'react-intl';

• Wrap the react component

export default injectIntl(MyComponent)

• Use intl as part of the components properties like:

   getThisGreatMessage() {
    const { intl} = this.props;
    return intl.formatMessage({ id: 'app.components.Example.EnjoyYourLife' }
  }

Handling internationalization parameters

• use curly brakets to denote parameter inside the language key:

  invalidAmount: {
    id: 'app.components.Calculator.invalidAmount',
    defaultMessage: 'Enter an amount between ${minLoan} and ${maxLoan}.',
  },

• call intl method passing an object with the keys needed

intl.formatMessage({ id: 'app.components.Calculator.invalidAmount' } , { minLoan: formatDollars(minLoan), maxLoan: formatDollars(maxLoan) });

Testing Ledn NPM modules locally

• Make updates to the desired npm module repo, then run:

    yarn build

• This should update the dist/ folder up the module with the latest version
• Next, add a relative path in the package.json to the module, example:

    "@ledn-org/ledn-2x-calculator": "file:../ledn-2x-calculator/dist",

• Every time you make changes to the module, rerun the build command and then force a reinstall by removing the node modules and then reinstalling them:

    rm -rf node_modules/
    yarn