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! 😎
You will need to have Node.js and Yarn installed.
git clone https://github.com/gctools-outilsgc/front_end_template.git
cd front_end_template
yarn install
yarn start
The installation works best on Linux. If you are using Windows you may want to use the no-i18n branch and find an alternative i18n solution. Also see the linting section to fix linting errors.
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! 🍰
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 is 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.
If you developing on Windows you may encounter many linting errors when first starting your app. Run yarn eslint --fix .\src . and try starting the app again.
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 😉)
config or env files do not get pushed with the build!
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.
To learn React, check out the React documentation.
This project was bootstrapped with Create React App.