---

Initialise a React project easily using the anynines React boilerplate.

It comes with preconfigured features like:

• 📦 Webpack
• 🏷️ TypeScript
• ⚛️ React
  • 💄 styled-components
  • 🎨 design-system
• 🌗 Theming
• ✅ Testing
• 🚨 Linter
• 👷 Travis
• 🤡 Mocked API

🎉 Quick Start

Generate your new GitHub repositories with this repository templates or fetch it locally using degit:

npx degit anynines/anynines-react-boilerplate react-app
cd react-app

Install the dependencies...

yarn install

...then start development environment:

yarn start

Navigate to localhost:9000. You should see your app running. Edit the App component file in src, save it, wait that the page reload: you should see your changes.

📦 Build the app

We use webpack to bundle the React app.

You can build it for development:

yarn start

or for production:

yarn build

The generated web app is located in public.

🏷️ TypeScript

TypeScript's pre-configuration is written in a simple tsconfig.json. Modify it as you want.

To easily share global types definition, you can define them in a .ts file in src/types.

Then export these types in src/types/index.ts:

export * from './myCreatedTypes'

Now you are able to consume them using the @types alias:

import { CustomType } from '@types'

🎨 Design system

The boilerplate render for you a design-system instance in src/theme/ThemeProvider.tsx. Adjust your options as you want by modifying DesignSystemInstance component's props.

Consume the design-system components in the app:

import { Button, Icon } from '@anynines/design-system'

🌗 Theming

You can customize the default theme by modifying the CUSTOM_THEME object located in src/theme/customTheme.ts.

Consume the ThemeContext using the @theme alias:

import { ThemeContext } from '@theme'

const { theme } = React.useContext(ThemeContext)

Note: The design-system is instanciate and store in src/designSystemStore.ts.

💄 Styling

You can style you application by using styled-components which is already set-up. You can modify the global styles in the src/theme/ThemeProvider.tsx file where you will see the createGlobalStyle declaration:

// S T Y L E S
const AdditionalGlobalStyle = createGlobalStyle<AdditionalGlobalStyle>`
  body {
    margin: 0;
    padding:0;
  }

  /* add you global styles here */
`

✅ Testing

Jest is already configured with enzyme. Run the tests using:

yarn test # run all tests
yarn test:watch # rerun tests after modification
yarn test:coverage # generate tests coverage

Add tests by creating a new file [MyComponent].test.js. It should be located inside src.

🚨 Linter

Eslint and stylelint are already configured. Check your code by running:

yarn lint # run linters
yarn lint:js # run eslint linter
yarn lint:css # run stylelint linter

👷 Travis

The boilerplate provide a TravisCI basic configuration. On each new commit, it makes sure that the app build, that there are no linter errors and that the tests do not fail:

yarn build && yarn lint && yarn test

🤡 Mocked API

The boilerplate run a local mocked API in development environment. You can create .json files in src/mockedApi and fetch them at /api/[filename].json.

You can see it in action by running yarn start and go to localhost:9000/api/users.json. This file is located at src/mockedApi/users.json.

You can access these files by using the @mockedApi alias:

import users from '@mockedApi/users.json'

Cloud Foundry Deployment

You can deploy your react-boilerplate on any Cloud Foundry Platform like anynines. For a Cloud Foundry deployment you need to install the Cloud Foundry CLI.

Specify your Cloud Foundry API endpoint and authenticate with your account.

cf api [URL_FOR_API_ENDPOINT]
cf login

You can select or change the target for your app with:

cf target -o [YOUR_ORG] -s [YOUR_SPACE]

Replace [YOUR_APP_NAME] with the name of your app in the manifest.yml and respectively in the deploy.sh or the deploy.bat file if you are using a unix-like or windows environment.

To start deploying the app you just have to run the corresponding deploy script for your environment.

deploy.sh

After the deployment you can see the URL of your running app with:

cf app [YOUR_APP_NAME]