yet another react build system

motivation

i love razzle, cra, and of course react-boilerplate- but not all of my projects fit into those molds. i wanted something dead simple, with as little opinions as possible.

the main difference with yarbs is that it does not generate an app structure for you. it's literally just a wrapper around a webpack config, with helper scripts to run a dev server and build for production. that's it.

features

• webpack-serve in place of webpack-dev-server
• mdx ready
• graphql ready
• typescript ready
• (node) server / proxy ready
• fallback babel & eslint configs if no .babelrc or .eslintrc is detected

server-side is best optimized for koa, but you can use any node server framework.

anti-features

the only 2 opinions yarbs has:

• client-side rendering only
  • because yarbs is server-ready, it's assuming you're building a web application- so we stick to client-side rendering for better performance.
• does not parse CSS/SCSS
  • in favor of css-in-js design systems

installation

yarbs can be added to any react project.

$ yarn add yarbs

usage

add the start / build scripts to your package.json

"scripts": {
    "start:client": "yarbs run-client",
    "start:server": "yarbs run-server",
    "start": "yarbs start",
    "build": "yarbs build"
}

yarbs start will run the client and server scripts in parallel. you can use the individual client and server scripts if you want.

"scripts": {
    "start:client": "yarbs run-client",
    "start:server": "yarbs run-server"
}

directories

yarbs looks for common directory setups, and your app entry files must be located in one of them.

for client-side code, it looks for one of the following:

• src/
• client/
• src/client/

for server-side code, it looks for one of the following:

• server/,
• api/
• src/server
• src/api

testing

yarbs does not have a test script nor is optimized for testing. thats up to you / your project.

init'd with golf ⛳️