Build App: Full-stack JavaScript Build System

0.9.8 · maintenance · verified Sun Apr 19

Build App is a comprehensive full-stack JavaScript application build system, currently stable at version 0.9.8. It operates primarily as a command-line interface (CLI) tool, `app-scripts`, orchestrating development tasks for both client and server components. Inspired by client-side build tools like Facebook's create-react-app, it extends similar 'out-of-the-box' facilities to full-stack development, simplifying build, development server, linting, and project initialization. While there isn't a stated release cadence, its pre-1.0 versioning suggests a focus on stability and functionality rather than rapid feature iteration. Key differentiators include its opinionated project structure, support for multiple client frameworks (React, Angular, Vue) by integrating with their respective build systems, and compilation of both JavaScript and TypeScript server code to ES5 for broader compatibility. It is OS-agnostic and aims to streamline the setup and development of modern full-stack applications through starter templates.

Common errors

```
app-scripts: command not found
```
cause The `build-app` CLI package was not installed globally, or its installation directory is not in your system's PATH.

fix Run `npm install -g build-app` to install the command-line tool globally.
```
Error: Cannot find module 'react-scripts/config/webpack.config.dev' (or similar client-side module error)
```
cause Client-side project dependencies have not been installed, or the client-side build failed.

fix Navigate to your client project directory (`cd client`) and run `npm install` to install dependencies, then `npm run build` if the error persists during server operations.
```
Error: listen EADDRINUSE :::3000 (or other port numbers)
```
cause Another application or process is already using the default port that the `build-app` server attempts to bind to (e.g., port 3000 for the server or 3001 for the client development server).

fix Either terminate the conflicting process or reconfigure `build-app` to use a different port (often configurable in `build-app.config` or via environment variables).

Warnings

gotcha The package is in a pre-1.0 state (v0.9.8), indicating that API stability or breaking changes might occur without strict adherence to semantic versioning guarantees. Always review release notes when updating.
Fix: Consult project changelogs or GitHub repository for specific version updates and any required migration steps before upgrading.
gotcha Build App assumes a predefined project structure (e.g., `{root}/server` and `{root}/client`) and expects client-side build output in `{client}/build` with `index.html`. Deviations require explicit configuration.
Fix: Adhere to the default project structure or specify custom paths in `build-app.config` to match your project layout.
gotcha The client-side build process relies on external client build systems (e.g., `create-react-app`) and expects an `npm run build` command in the client directory to produce output in `{client}/build`. Incompatible client setups will cause build failures.
Fix: Ensure your client project is configured to have an `npm run build` script that compiles to the expected `{client}/build` directory.

Install

npm install build-app npm
yarn add build-app yarn
pnpm add build-app pnpm

Imports

AppConfig
```
import type { AppConfig } from 'build-app/config'
```
Hypothetical type import for the `build-app.config` structure; the README does not explicitly document a programmatic API for configuration or other modules.
buildApp
```
import { buildApp } from 'build-app'
```
Hypothetical function for programmatic build execution. The primary interaction pattern is via the `app-scripts` CLI, and no programmatic API is documented in the README.
serveApp
```
import { serveApp } from 'build-app'
```
Hypothetical function for programmatic development server execution. The typical usage is through `app-scripts serve -s` or `app-scripts serve -c` CLI commands.

Quickstart

Installs the global `build-app` CLI, initializes a new full-stack project, performs initial setup including dependency installation, and then demonstrates running both client and server development modes and creating a production build.

npm install -g build-app

# See all available commands for the CLI tool
app-scripts --help

# Initialize a new full-stack project interactively, or with specific templates.
# This example sets up a 'my-full-stack-app' with a TypeScript server and React client, and VS Code IDE settings.
app-scripts init my-full-stack-app --project simple --server ts --client react --ide code

# Navigate into the newly created project directory
cd my-full-stack-app

# Perform initial project setup: install dependencies for both client and server, build client/server, and run seed tasks.
# This command typically takes some time as it installs all required node_modules.
app-scripts seed

# To run the server in development mode (watches for file changes, usually on port 3000 by default)
app-scripts serve -s

# To run the client in development mode (starts the client-side development server, typically on a different port like 3001)
# Access the client application in your web browser via the URL provided by the client dev server (e.g., http://localhost:3001).
app-scripts serve -c

# To create a production-ready build for deployment, consolidating client and server artifacts into a 'build' folder.
app-scripts build

view raw JSON →