DEV Community

Cover image for Build an entire React application in one command
MongoPush
MongoPush

Posted on

1

Build an entire React application in one command

react-scaffold-generate

NPM: https://www.npmjs.com/package/react-scaffold-generate
Live Demo: http://rsg.drewweth.com

About

This project is a port of rails scaffold generate for React. You can learn more about Rail's scaffold generator here. I mainly used it for its MVC (model, view, controller) generator. It abstracted CRUD operations, form generation, form validation, list-detail presentation pages, database migrations, SQL queries through ActiveRecord, and styling all with one command.

This project leverages file templating, dynamic form generation, routing and CRUD state management to apply those concepts to React and supercharge any project by skipping lots of boilerplate setup. Create an entire app in one command.

Here is a deployed demo of what react-scaffold-generate can do after one command: http://rsg.drewweth.com

Here we're creating all the files required to manage an "Inventory" object.
alt text

Below is a picture of 5 different pages created by the generator to manage state of a model.
alt text

Example usage:

NPM package: https://www.npmjs.com/package/react-scaffold-generate

Install templating
npm install -g react-scaffold-generate

Create new React app

# Create new app called example-app
npx create-react-app example-app 
# Change working directory to example-app cd example-app


# Create component Template for Inventory with 4 attributes
react-scaffold-generate generate Inventory \
    name:string \
    description:string:textarea \
    isSold:boolean \
    seller:string:email
Enter fullscreen mode Exit fullscreen mode

The output will be:

Success wrote and merged models.json to src/components/models.json
Success wrote model.js to src/components/Inventory/model.js
Success wrote static component to src/components/Form.js
Success wrote static component to src/components/Router.js
Success wrote static component to src/components/State.js
Success wrote static component to src/components/Shared.js
Success wrote static component to src/components/Networking.js
Success wrote static component to src/components/ScaffoldHome.js
Success wrote static component to src/components/Component.css
Success wrote model component to src/components/Inventory/Details.js
Success wrote model component to src/components/Inventory/Edit.js
Success wrote model component to src/components/Inventory/List.js
Success wrote model component to src/components/Inventory/New.js
Success wrote model component to src/components/Inventory/Routes.js
Success wrote index.js component to index.js
Enter fullscreen mode Exit fullscreen mode

Install dependencies used by react-scaffold-generate

# Used for browser routing, very common React dependency
npm install --save react-router-dom
# Used for form generation form UI and css
npm install --save @rjsf/material-ui
# Dependency for notifications
npm install --save react-notifications
Enter fullscreen mode Exit fullscreen mode

Part of the templating overwrites index.js which replaces <App> with <Router> from src/components/Router.js.

Last step, start example app

npm start


Command Arguments

react-scaffold-generate generate [ModelName] [list of attributeName:attributeType:atributeFormat

The list of attributes for a model can be the following:

Type Format Description
boolean for button true/false
boolean select for separate true and false
string string
string email for @ and . domain
string uri protocol://domain
string data-uri file as UTC8
string date local date
string date-time local date and yyyy/mm/dd
string password dont display input
string color color picker serialized to hex code
string textarea paragraphs amount of text
number double
number updown increment & decrement
number range between min/max
integer integer value

more details on react-jsonschema-form types

After generating the model, you can go to src/components/MODEL_NAME/model.js to inspect and change the model definition which includes fields, types, display format, and whether the field is required or not (default not required, i.e. false)


Internal Structure (What's going on)

• There are a set of common files and model specific files. The common files will be generated to src/components and contain logic for state management, app router, dynamic form component, and more.

• The model specific files are generated at src/components/MODEL_NAME and contain components for state actions (list, detail, edit, new), a route components which contains the routing details for the model, and a model.js which holds the schema of the model in JSON form.

• There is models.json file that contains a list of keys with the name of models created with scaffold. This file is used to created the Navbar, dynamically import routes, and is merged when react-scaffold-generate is run.

• Currently' all common files (including Components.css) and the model specific directory contents (including model.js) are overwritten when the generator runs (I have not added a flag to prevent this). Please use git so you can revert your custom logic and styling, just in case.


Local Development

Clone this repo then run:

# Install dependencies
npm i
# Creates example-app, runs react-scaffold-generate, installs extra dependencies
npm run setup
# Runs templater and example-app
npm run watch
Enter fullscreen mode Exit fullscreen mode

setup makes an example-app and installs dependencies in that directory. watch reloads the templates and example-app when templates or cli.js are updated.


Contributing

Fork the repository and open a pull request

https://github.com/firstcontributions/first-contributions

For feature discussions or questions, open an issue on Github and label it discussion.

The Fastest, Most Accurate API for Voice AI

Ad Image

Power your Conversational AI with the most accurate real-time speech-to-text API. Available in 50 languages and at <1-second latency. Perfect for building seamless and emotionally intelligent voice experiences.

Start building today 🛠️

Top comments (1)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.