Crapp NPM | npm.io

💩 CRAPP (CReate APP)

Minimalist and flexible tool to set up modern web apps. Inspired by Create React App

How to use?

Install the dependency

npm install -D crapp

Create a webpack.config.js file at the root of your project with the following content

const getConfig = require("crapp/config/react");
module.exports = getConfig();

Add the default src/index.js and public/index.html files

// ./src/index.js

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <React.StrictMode>
    <h1>Hello World</h1>
  </React.StrictMode>,
  document.getElementById("root")
);

<!--./public/index.html-->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Crapp</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

Run

crapp start // for developent
crapp build // for production

Add typescript

Install the missing dependencies

npm i -D @types/react @types/react-dom typescript

Create a tsconfig.json file at the root of your project

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": ["es5", "scripthost", "dom"],
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "strict": false,
    "allowJs": true,
    "jsx": "react",
    "outDir": "./dist"
  },
  "exclude": ["node_modules", "dist"]
}

Change the extension of typescript files to .tsx.

How to change the configuration?

crapp/config/react just exports a normal webpack configuration. You can import it and tweak it at will

const getConfig = require("crapp/config/react");
const config = getConfig(/* You can force NODE_ENV here */);

// Do something with the defaultConfig here

module.exports = config;

How to change the build/start scripts?

crapp build and crapp start are tiny CLI helpers that use webpack and webpack-dev-server under the hood. You can replace them by anything that understand a webpack configuration