• Stars
    star
    105
  • Rank 328,135 (Top 7 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

An opinionated CLI for full-stack server-rendered React applications

Reactful

An opinionated practical CLI for developing full-stack server-rendered React applications. You can use it to generate an independent React application (optionally with TypeScript) that's fully-configured to render on both client and server. You can also use it to render simple template applications (without SSR).

npm version

This CLI requires Node >= 10.x.

Creating New App

npx reactful create my-awesome-react-app

This will create a new reactful project using the default template (webpack, babel, express, with support for SSR).

You can also use a few different templates using:

npx reactful create -t <template_name> my-awesome-react-app

Supported templates:

  • default: A babel-based configuration (with support for SSR and production buid)
  • typescript: A typescript-based configuration (with support for SSR and production build)
  • simple: A simple Parcel-based configuration (no SSR, no production config)

Once a project is created you can use the "start" command to start it in development mode:

cd my-awesome-react-app

# To start the dev server and dev bundler watchers
npx reactful start

On the "default" and "typescript" templates, the "start" command will run 2 commands concurrently, you can also run them separately with:

npx reactful dev:server # runs on port 1234 by default

npx reactful dev:bundler # this will re-bundle on save

To run all the tests:

npx reactful test

To build and start the app in production:

npx reactful build:all

npx reactful prod:start

If you keep the folder structure initialized by the package, you can use reactful to generate component files. For example:

npx reactful gc ComponentName   # Create a new function component
npx reactful gcc ComponentName  # Create a new class component

These commands will also create a jest snapshot test for the generated component.

Updating Existing React App

While in a React application that's created with this tool, you can always revert things back to the default configurations with the init command. You can also use this command in an empty directory.

cd my-awesome-react-app
npx reactful init

If that directory already has files, reactful will ask you if you want to override them.

License

Reactful is MIT licensed.

More Repositories

1

ngs

Node.js: Getting Started
JavaScript
445
star
2

learn-fullstack-javascript

For help, ask in #questions at jscomplete.com/help
429
star
3

graphql-in-action

A GraphQL project with a backend component written with GraphQL-js and Apollo Server and a frontend component written in React.
JavaScript
412
star
4

advanced-nodejs

For help, ask in #questions at slack.jscomplete.com
JavaScript
304
star
5

advanced-react

For help, ask in #questions at slack.jscomplete.com http://slack.jscomplete.com/
JavaScript
193
star
6

graphfront

Generate a GraphQL schema for any PostgreSQL database using the database schema information
JavaScript
143
star
7

rgs-star-match

JavaScript
106
star
8

react-native-essential-training

JavaScript
86
star
9

rgs-template

JavaScript
85
star
10

graphfront-ui

A multi-user admin interface on database schemas with a GraphQL API - Powering https://graphfront.com/
JavaScript
79
star
11

name-contests

52
star
12

learning-graphql-and-relay

For help, ask in #questions at slack.jscomplete.com
JavaScript
29
star
13

mnr

MNR (MongoDB, Node.js, React.js)
TypeScript
26
star
14

react-blog-example

JavaScript
24
star
15

express-webpack-template

JavaScript
23
star
16

node-bb

JavaScript
17
star
17

react-virtual-dom-demo

React's Virtual DOM demo
16
star
18

learning-reactjs

For help, ask in #questions at slack.jscomplete.com
JavaScript
13
star
19

graphql-makers

Functions to make GraphQL types based on schema-language definitions.
TypeScript
11
star
20

azdev

Code repo for https://az.dev
TypeScript
9
star
21

node-react-template

Server-render ready Node/React template
JavaScript
6
star
22

example-graphql-mongodb-schema

For help, ask in #questions at slack.jscomplete.com
JavaScript
4
star
23

graphql-project

For help, ask in #questions at slack.jscomplete.com
JavaScript
2
star
24

mngr

Learning Fullstack JavaScript Development: MongoDB, Node.js, and React.js
HTML
1
star