Parcel React App
Create React apps using Parcel as build tool.
Table of Contents
Getting started
Installation
Install parcel-react-app globally:
npm i -g parcel-react-app
Usage
To create a new app, run:
parcel-react-app new
First, you need to enter the name of the project (e.g. my-app
), author of the project and then select the style type (css
, scss, css-modules or styled-components). This will create a folder my-app
and install all dependencies. Folder structure (for css):
my-app/
|-- config/
| |-- jestSetup.js
|-- public/
| |-- favicon.ico
| |-- index.html
|-- src/
| |-- components/
| | |-- App.css
| | |-- App.js
| | |-- App.test.js
| |-- images/
| |-- parceljs.png
| |-- reactjs.png
| |-- index.css
| |-- index.js
|-- .babelrc
|-- .eslintrc.json
|-- .gitignore
|-- .prettierrc
|-- .stylelintrc
|-- package-lock.json
|-- package.json
|-- README.md
Development
Start the development server run:
npm run dev
This will automatically open http://localhost:3000 in your browser.
Production
Build for production run:
npm run build
This will bundle your application in the build
folder.
Formatting and Linting
The app uses eslint and stylelint for linting and prettier for formatting files. Supports the following file extensions: .js
, .jsx
, .json
, .md
, .css
and .scss
.
To fix formatting issues:
npm run format
To lint your code:
npm run lint
Formatting and Linting JS
If you want to fix JavaScript issues:
npm run format:js
To lint JavaScript code:
npm run lint:js
This will also fix or lint if you have .json
and .md
files inside the src/
folder.
Formatting and Linting Styles
If you want to fix only style issues:
npm run format:style
To lint your style:
npm run lint:style
Testing
The app uses Jest a test runner and Enzyme a testing utilitis for React.
To run all unit tests:
npm run test
Run watch mode:
npm run test:watch
Get coverage report run:
npm run test:coverage
License
This project is licensed under the MIT License - see the LICENSE file for details.