Webpack React Template

A standard framework for special projects powered by react and scss
Explore the docs »

Report Bug · Request Feature

About The Project

A standard framework for special projects powered by react and scss. Webpack allows you to bundle your codebase, opening the door to using react, scss and npm packages in the browser with great ease. The webpack rules include transpiling via Babel for excellent compatibility.

This template also includes hot reload logic so that as you work, your browser will auto refresh, showing your changes. The webpack logic includes opinionated code formatting and linting to ensure your code adheres to Newsday's standards. Auto formatting helps ensure consistent formatting and clean PRs between multiple developers.

Exceptions to linting, formatting and committing can be added using the .eslintignore, .gitignore, and .prettierignore files.

(back to top)

Built With

• 
• 
• 
• 
• 
• 

(back to top)

Getting Started

Copy this template's contents into your project path. Once you've done that, navigate to the directory on the command line and run

yarn install

You can start up webpack in development mode after by doing

yarn dev

You can also do dev, without hot reload, by doing

yarn dev:no-serve

Prior committing to your repo, you stop your dev process and run

yarn build

This will compile all of your production-ready code, with everything minified.

Prerequisites

• node
• yarn

  sudo npm install yarn -g

Usage

Your project needs to include some variation of

<script src="/path/to/dist/bundle.js">

React will mount inside a DOM element. By default, this template expects #app to exist on the page. You can change this in src/index.jsx. Likewise all of your code should be authored in src/. When creating components, you can safely duplicate the src/components/App directory and modify the SCSS, JSX and JS files in the dupe to reflect your components needs. This template uses node-scss so including your component's styles is as easy as adding the following to the top of the JSX file

import './path/to/styles.scss'

The directory also includes an index.js file, which can be used to declare the directory's default and named exports. This allows for easy imports like

import App from './components/App'

instead of

import App './components/App/App'

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

TC McCarthy - @tc_mccarthy - [email protected]

Project Link: https://github.com/newsdaycom/webpack-template

(back to top)