An application using React and Redux designed to be used as a starting point for front-end applications.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
You'll need to download and install Node.js version 6 or higher and Node Package Manager for installing dependencies. Node Package Manager is installed when installing Node.js. Download the latest version of Node.js here.
You'll need to clone this repository to your working directory on your local machine, then install the project dependencies using Node Package Manager through the command line.
First, navigate to your working directory:
cd path/to/your/working/directory
Clone this repository to your working directory: First clone the repository:
git clone https://github.com/joeyschroeder/front-end-starter.git
After cloning is complete, navigate inside the newly cloned repository:
cd front-end-starter
Finally, run npm install to install all project dependencies:
npm install
During development, this application can be run in a web browser using Webpack Dev Server. To start the application in a web browser, navigate to the root of the project directory in the command line and run npm run start. This command will print out a URL which can be opened in a web browser.
First, navigate to the root of the project:
cd path/to/your/working/directory/front-end-starter
Then start the application:
npm run start
After Webpack Dev Server has compiled the development bundle, it will print out something similar to following:
ℹ ｢wds｣: Project is running at http://localhost:9090/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to /index.html
ℹ ｢wdm｣:
ℹ ｢wdm｣: Compiled successfully.
Open the URL http://localhost:9090/ in your web browser.
This project is equipped with Webpack Hot Module Replacement. This means that while Webpack Dev Server is running the documentation application, you can make changes to the files and they will automatically update in the web browser. Occasionally, the web browser may need a manual refresh if you're changes affect application state or changes outside of the React life-cycle.
This project is equipped with ESLint and Prettier.io to ensure a homogeneous code-style and JavaScript syntactical error prevention.
During development, you can run npm run eslint:fix in the root of the project to automatically fix any fixable ESLint errors/warnings, and format your JavaScript to match the Prettier standards.
To ensure the commit history of this project remains helpful, please use the commit rules outlined here when committing.
To making following these rules easier, this project is equipped with a Git commit template:
# <type>: (If applied, this commit will...) <subject> (Max 50 char)
# |<---- Using a Maximum Of 50 Characters ---->|
# Explain why this change is being made
# |<---- Try To Limit Each Line to a Maximum Of 72 Characters ---->|
# Provide links or keys to any relevant tickets, articles or other resources
# Example: JIRA issue #23
# --- COMMIT END ---
# Type can be
# breaking (changes that break previous implementations)
# feat (new feature)
# fix (bug fix)
# refactor (refactoring production code)
# revert (changes that revert a previous commit)
# style (formatting, missing semi colons, etc; no code change)
# docs (changes to documentation)
# test (adding or refactoring tests; no production code change)
# chore (updating grunt tasks etc; no production code change)
# other (changes that do not fit in above categories)
# --------------------
# Remember to
# Capitalize the subject line
# Use the imperative mood in the subject line
# Do not end the subject line with a period
# Separate subject from body with a blank line
# Use the body to explain what and why vs. how
# Can use multiple lines with "-" for bullet points in body
# --------------------
To enable this Git commit template, run the following command from the root of the project:
git config --global commit.template commit.template.txt
This project is equipped with Git Pre-Commit Hooks to help ensure successful builds. These "hooks" are a set of scripts that will run before allowing a developer to commit to the project. If any of these scripts fail the commit will cancel.
Before allowing a successful commit Git will run the following scripts:
npm run eslint
npm run stylelint
npm run test:changed
It's recommended a developers run npm run eslint:fix often during development to prevent any failures from code-style or JavaScript syntactical errors.
This project is equipped with Jest, and Enzyme to assist in testing JavaScript files. Each JavaScript file in the application should be in it's own folder with a sibling .test.js test file. The test file should test as close to 100% of it's sibling.
To check the test coverage of the application run npm run lib:coverage. This script will print out a code coverage report in the command line and generate an LCOV code coverage report in the project's ./coverage/ folder.
This command runs webpack in "production" mode. It uses the src/index.js file as it's entry point, and generates a JavaScript main.js and vendor.js file in dist/.
This command delets the dist/ directory.
This command runs eslint src/. It prints eslint warnings and errors in the command line.
This command runs eslint --fix src/. It attempts to fix any eslint warnings/errors then prints the remaining warnings and errors in the command line.
This command runs webpack-dev-server in "development" mode on the documentation. Hot reloading is enabled. Once running, you can access the documentation running locally at localhost:9090/.
This command runs stylelint 'src/**/*/*.scss. It prints styelint warnings and errors in the command line.
This command runs stylelint --fix 'src/**/*/*.scss. It attempts to fix any stylelint warnings/errors then prints the remaining warnings and errors in the command line.
This command runs jest. It prints test successes/failures in the command line.
This command runs jest -o on the JavaScript files that have changed or are uncommitted. It prints test successes/failures in the command line.
This command runs jest --coverage. It prints the test successes/failures in the command line and creates an .html test coverage report in ./coverage/lcov-report/index.html.
- Joey Schroeder - Initial work
See also the list of contributors who participated in this project.
Hat tip to anyone who's code was used! ðŸ¤