This is an opinionated Reactjs boilerplate to help you get started making front end applications. The boilerplate takes care of your theme and component libraries, project structure, routing, I18N, OpenID login, testing libraries, redux store, and code linting. 🔥
You are always free to add and remove features or packages that you need!
This project will not provide your app with a graphQL backend / data store, but not to worry, we have a template for that too! 😎
You will need to have Nodejs and Yarn installed.
git clone https://github.com/ethanWallace/front_end_template.git
cd front_end_template
yarn install
yarn start
You will need to create an oidcConfig.dev.js file in the src directory to allow your app to login to your OpenID authentication provider. The file should be formated a little something like so:
const url = window.location.origin;
module.exports = {
authority: 'https://your.OpenID.provider/openid',
client_id: '123456',
client_secret:
'shhhhhhhh-its-a-secret-to-everyone-replace-me',
scope: 'openid YOUR_SCOPES_HERE,
post_logout_redirect_uri: `${url}/#!logout`,
redirect_uri: `${url}/#!callback`,
silent_redirect_uri: `${url}/#!silent`,
};
Next if you have a graphQL backend set up that you wish to point your front end app to, in src/index.js replace the Apollo Client uri with your endpoint:
const client = new ApolloClient({
uri: 'https://link.to.your.backend/graphql',
});
Need a graphQL backend? Here is handy template to help you build one!
Now you're ready to go! 🍰
All the packages discussed are already included in the project.
|-/config/
|-/i18n/ # Translations
|-/public/
|-/scripts/
|-/src/
| |-/assets/
| | |-css # A place for additional styling
| | |-imgs # Image / graphic assets
| |-/components/
| | |-/core/ # Ideally components you know that will be used in multiple places
| | |-/page_or_feature_specific/ # Create folders for each page
| |-/conatiners/ # Top level page containers for your app
| |-/gql/ # Place your graphQL queries and mutations in one place to be leveraged througout the app
We leverage the Aurora Design system which is a theme based on Bootstrap. The boilerplate comes already packaged with the Aurora stylesheet and reactstrap to help you build components quickly.
Learn about how to leverage Apollo Client for react to handle queries and mutations.
Localization is set up and configured with this I18N translation webpack plugin and it's React Helper package.
import React from 'react';
import LocalizedComponent
from '@gctools-components/react-i18n-translation-webpack';
class MyComponent extends React.Component {
render() {
<p>{__('this is translated text')}</p>
}
}
export default LocalizedComponent(MyComponent);
Run yarn test to run the testing library.
This project leverages Jest and React Testing Library.
Routing in the application in handled by React-Router-Dom.
Routes are defined in src/containers/App.js and should ideally route to another container component.
Please keep your code pretty, or else the app will not compile. ESLint is configured through this config package. It is an extension of the Airbnb Javascript Style Guide with some small changes.
To learn React, check out the React documentation.
Learn about Storybook for building custom components in your project. Storybook is included in this template. Run yarn run storybook.
This project was bootstrapped with Create React App.