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:mainandtypecheck: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