@creuna/cli provides a unified interface for:

• create-react-app
• react-scripts
• react-components

Install

yarn global add @creuna/cli

or

npm install -g @creuna/cli

Usage

Print help:

creuna

Run commands:

creuna <command>

Commands

new <relative-path>

Creates a new React app in the current working directory. If a path is provided, files will be written to this path, relative to the current working directory

lib

Select and download components from the React component library.

component <name>

Create empty React component in your components folder.

page <name> <human-readable-name> <group-name> <url>

Create empty static site page component in your static site pages folder (Useful if you're working with an app created with the new command)

rename <old-name> <new-name>

Rename React component. Supports absolute path or path relative to componentsPath.

stateful <component-name>

Convert React component to stateful. Supports absolute path or path relative to componentsPath

stateless <component-name>

Convert React component to stateless if able to. Supports absolute path or path relative to componentsPath

Notes

All commands except creuna new support a .creunarc.json in your project root. Having this file ensures that components are always added to the correct folder, regardless of your current directory (within the project of course). The boilerplate app created by creuna new includes this file. dataFileExtension and dataFileContent control the static data file generated by the creuna page command.

.creunarc.json

{
  "componentsPath": "relative/path/to/components",
  "staticSitePath": "relative/path/to/static/site/pages",
  "dataFileExtension": "js",
  "dataFileContent": "export default { a: 'a' };"
}

Custom static page template

A custom template can be added that will be used when running creuna page. The template can be added in .creunarc.json as staticPageTemplate which must be an array of strings (one string per line). @babel/template syntax (see here) is used to insert the correct component name and data file path. The tokens %%componentName%% and %%dataFilePath%% are used for this and they must be included at least once each. Example:

{
  "staticPageTemplate": [
    "import React from 'react';",
    "import content from %%dataFilePath%%;",
    "const %%componentName%% = () => <div />;",
    "export default %%componentName%%;"
  ]
}