swyxio / rincewind

Rincewind: A boilerplate for React + PostCSS (with Tailwind) + TypeScript

rincewind

Rincewind: Create React Apps with Parcel + React + PostCSS (with Tailwind) + TypeScript

Usage

$ npm install -g rincewind
$ rincewind # or rw

By default it creates the new app in a directory called rincewind-app. If you want to specify the folder name, add an extra arg: rw create myapp

Once you have a scaffolded app, cd into the project and then either run:

• rw build for a production build
• rw serve for local development. (aliases for this: rw dev or rw develop)

rw is just an alias for rincewind, you can use rw interchangeably everywhere except with npx

Enjoy!

Commands

rincewind create

Aliases: rw create

Creates a Rincewind app. Only basic template available for now. You can pass an arg or a -d flag to specify the name of the directory it creates.

$ npm install -g rincewind
$ rincewind # or rw

These all also do the same thing

• npx rincewind creates a rincewind app without install
• rw init
• rw create
• rw init myapp
• rw create myapp
• rw init -d myapp
• rw create -d myapp

rincewind serve

Aliases: rw dev, rw develop

Locally serve a rincewind app for development.

rincewind serve

These all also do the same thing

• rw serve
• rw dev
• rw develop

rincewind build

Aliases: rw build

Build a Rincewind app for production.

rincewind build

These all also do the same thing

• rw build

Roadmap

• add basic design system to draw from
• other templates to scaffold from including your own
• caching the node modules so you copy paste
• module/nomodule
• preact aliasing
• react single file components
• other ideas from Proxx: https://www.youtube.com/watch?v=fWc3Zu6A3Ws
• need to be liefie resistant - service workers
• ???
• Give me your ideas! https://twitter.com/swyx

Name and History

v0-v2 of this package was a different project, run by https://github.com/mmckegg over from 2013-2016

https://github.com/mmckegg kindly handed this project over to swyx in Nov 2019, because of his deep love of Terry Pratchett's Discworld series and its bumbling Wizzard.

rincewind's Issues

Directory "C:Users/../rincewind-nodejs/Cache" not found

Hey Shawn,

I wanted to try out your tool on a windows 10 machine.
Unfortunately, some directory was not found during execution of rincewind.

ENOENT: no such file or directory, mkdir 'C:/Users/T/AppData/Local/rincewind-nodejs/Cache'

To be more specific rincewind expected the folder rincewind-nodejs/Cache to be in the local directory C:\Users\T\AppData\Local. Unfortunately, there is only a rincewind folder in the Local directory. The rincwindfolder also contains an error.log file.

I had a quick look into the lib\create.js and figured out where the rincewind-nodejs vs. rincewind mismatch is happening. It seems like the env-paths module is using a path with an appended -nodejs to prevent potential naming conflict with other windows applications as stated in the env-paths API documentation.

I wrote a quick hack that fixes the issue, by replacing the wrong part of the string. It is probably preferable to check the existance of rincewind-nodejs and create the dir if not existing.

// create.js
function initProgressEstimator() {
    const cachePath = envPaths("rincewind").cache.replace('rincewind-nodejs', 'rincewind');
    if (!fs.existsSync(cachePath))
        fs.mkdirSync(cachePath);
    //...

Full stacktrace:

PS D:\git> rw create portfolio
Error: ENOENT: no such file or directory, mkdir 'C:/Users/T/AppData/Local/rincewind-nodejs/Cache'
    at initProgressEstimator (C:/Users/T/AppData/Roaming/npm/node_modules/rincewind/lib/commands/create.js:84:12)
    at Object.<anonymous> (C:/Users/T/AppData/Roaming/npm/node_modules/rincewind/lib/commands/create.js:15:16)
    at fetch (C:/Users/T/AppData/Roaming/npm/node_modules/rincewind/node_modules/@oclif/config/lib/plugin.js:111:21)
PS D:\git> rw
Creating a basic Rincewind (https://github.com/sw-yx/rincewind) app
internal/fs/utils.js:220
    throw err;
    ^

Error: ENOENT: no such file or directory, mkdir 'C:\Users\T\AppData\Local\rincewind-nodejs\Cache'
    at Object.mkdirSync (fs.js:823:3)
    at initProgressEstimator (C:\Users\T\AppData\Roaming\npm\node_modules\rincewind\lib\commands\create.js:84:12)
    at Object.<anonymous> (C:\Users\T\AppData\Roaming\npm\node_modules\rincewind\lib\commands\create.js:15:16)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (C:\Users\T\AppData\Roaming\npm\node_modules\rincewind\bin\run:37:3) {
  errno: -4058,
  syscall: 'mkdir',
  code: 'ENOENT',
  path: 'C:\\Users\\T\\AppData\\Local\\rincewind-nodejs\\Cache'
}

todo: eslint

https://github.com/wesbos/eslint-config-wesbos

CI tests

https://gars.dev/tutorial/ci-pipeline/