react-skeleton
🚀
Setup You can create a new project using the @pota/create
package.
npx @pota/create react my-react-app
📒
Standards This project follows the MediaMonks Frontend Coding Standards
⛩️
Project Structure source
src/components
The components
folder follows atomic design
guidelines, with a few additions:
Folder | Description | Example |
---|---|---|
/atoms |
The smallest unit, must be self contained and not dependant on any external modules. (types and configuration being the exception) |
Icon , Paragraph , Heading
|
/molecules |
Must be restrained to only use atoms and minimal internal state. | Toggle |
/organisms |
Generally reserved for complex state uses and must use atoms or molecules . |
Form |
/layout |
Components whose only function is taking in children and presenting them in a specific layout. Must not use atoms , molecules or organisms . |
Carousel , Modal , Tabs
|
/pages |
Components which are used as pages. |
Home , About
|
/unlisted |
Components which do not fall into any of the above categories. |
App , global context providers
|
src/config
The config
folder is to be used to define any sort of configuration for styles, components or
logic.
hidden TODOs
🔋
Features Pota Commands
build
- builds the source using webpack
.
npm run build # or npx pota build
Option | Type | Default | Description |
---|---|---|---|
analyze |
{Boolean} |
false |
When enabled, will open a bundle report after bundling. |
cache |
{Boolean} |
true |
Toggles webpack's caching behavior. |
image-compression |
{Boolean} |
true |
Toggles image compression. |
mode |
{development|production} |
production |
Override webpack's mode. |
output |
{String} |
./build |
The build output directory. |
source-map |
{false| devtool}
|
source-map (production), eval-source-map (development) |
Sets the style of source-map, for enhanced debugging. Disable or use faster options in you are having out of memory or other performance issues. |
public-path |
{String} |
/ |
The location of static assets on your production server. |
type-check |
{Boolean} |
true |
When disabled, will ignore type related errors. |
versioning |
{Boolean} |
false |
When enabled, will copy assets in ./static to a versioned directory in the output (e.g. build/version/v2/static/... ). |
profile |
{Boolean} |
false |
Toggles support for the React Devtools in production. |
dev
- starts the development service using webpack-dev-server
.
npm run dev # or npx pota dev
Option | Type | Default | Description |
---|---|---|---|
cache |
{Boolean} |
true |
Toggle webpack's caching behavior. |
https |
{Boolean} |
false |
Run the development server with HTTPS. |
image-compression |
{Boolean} |
true |
Toggles image compression. |
mode |
{development|production} |
production |
Override webpack's mode. |
source-map |
{false| devtool}
|
source-map (production), eval-source-map (development) |
Sets the style of source-map, for enhanced debugging. Disable or use faster options in you are having out of memory or other performance issues. |
type-check |
{Boolean} |
true |
Toggles checking for type related errors. |
hidden TODOs
Scripts
Non-Pota scripts defined in "scripts"
of package.json
and are runnable using npm run {script}
Script | Description |
---|---|
postinstall |
Run patch-package to patch faulty packages. |
build-storybook |
Bundle stories for deployment. |
start-storybook |
Start storybook's development server. |
plop |
Generate a new component's source files. |
test |
Run unit tests. |
fix |
Executes all fix:* and `format commands in sequence. |
fix:eslint |
Executes eslint:lint and fixes fixable errors. |
format |
Formats the source files using prettier . |
lint |
Executes all lint:* commands in sequence. |
lint:eslint |
Lints the source files using eslint . |
rsync |
Synchronizes (uploads) dist/ files to a remote server. |
typecheck |
Synchronously runs typecheck:main and typecheck:tools . |
typecheck:main |
Checks for type errors and unused variables/types in the source directory. |
typecheck:tools |
Checks for type errors and unused variables/types of the various local tools. |
JavaScript / TypeScript
hidden TODOs
CSS
hidden TODOs
Images
hidden TODOs
Misc. Assets
hidden TODOs
Linting & Formatting
hidden TODOs
Deployment
hidden TODOs
Git
hidden TODOs
Storybook
hidden TODOs
Testing
hidden TODOs
Web Vitals
hidden TODOs
Routing
hidden TODOs
State Management
hidden TODOs
Continuous Integration / Continuous Deployment
Bitbucket
webpack-skeleton
comes with bitbucket-pipelines.yml
, pre-configured to run check-types
, lint
and test
scripts.
hidden TODOs