OADW React.js Front End Template 🎉

This is an opinionated React.js boilerplate to help you get started making front-end applications. The boilerplate takes care of your theme and component libraries, project structure, routing, internationalization (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! 😎

Getting Started 🙌

Step 0

You will need to have Node.js and Yarn installed.

Step 1 - Install

git clone https://github.com/ethanWallace/front_end_template.git
cd front_end_template
yarn install
yarn start

Step 2 - Config 🔧

If your app need to login to your OpenID authentication provider, make sure to update your oidcConfig.dev.js file in the src directory. Don't forget to add this file to your .gitignore.

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! 🍰

Features / What's Included 👍

All the packages discussed are already included in the project.

Project Structure 📁

|-/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

Component Library and Styling 🎨

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.

Apollo Client and GraphQL

Learn about how to leverage Apollo Client for react to handle queries and mutations.

I18N 🌎

Localization is set up and configured with this I18N translation webpack plugin and it's React Helper package.

How to use it

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);

Testing ✏️

Run yarn test to run the testing library.

This project leverages Jest and React Testing Library.

Routing 🚙

Routing in the application is handled by React-Router-Dom.

Routes are defined in src/containers/App.js and should ideally route to another container component.

Linting ✨

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.

Github Pages Deployment

The template already comes prepared to deploy your front-end to Github Pages. First change the homepage in the package.json to the repository you want.

"homepage": "http://username.github.io/repo",

Then run yarn deploy-gh-pages (give it a moment to build. It could take a while 😉)

⚠️ Watch and make sure your config or env files do not get pushed with the build!

Included Layouts 🎁

Included in this project are two example layouts. One is for a product page (/product) and another for a blog page (/blog). Each one features reusable components that you are free to use in your own project. If you have no need for them make sure to delete them from your project.

Additional Links 😉

To learn React, check out the React documentation.

This project was bootstrapped with Create React App.