@bkonkle/generator-react v3.2.0
@bkonkle/generator-react
$$\
$$ |
$$$$$$\ $$$$$$\ $$$$$$\ $$$$$$$\ $$$$$$\
$$ __$$\ $$ __$$\ \____$$\ $$ _____|\_$$ _|
$$ | \__|$$$$$$$$ | $$$$$$$ |$$ / $$ |
$$ | $$ ____|$$ __$$ |$$ | $$ |$$\
$$ | \$$$$$$$\ \$$$$$$$ |\$$$$$$$\ \$$$$ |
\__| \_______| \_______| \_______| \____/
Brandon's Yeoman generators for scaffolding new React applications
Installation
npm install -g @bkonkle/generator-react
You can also use yarn if you have your global folder configured:
yarn global add @bkonkle/generator-react
Yeoman
You'll also need to install Yeoman to use this generator.
npm i -g yo
(or)
```bash
yarn global add yo
Usage
Run one of the generators below, answer the questions, and you'll have a brand new web application set up in your current directory. Tada! š
Web
To bootstrap a React web project, use the web
generator:
mkdir my-new-web-project
cd my-new-web-project
yo @bkonkle/react:web
This results in a build setup adapted from CRA to allow prefetching (or even server rendering, if you want) and to support runtime environment variables. It uses a Webpack config adapted from CRA with tweaks from Razzle and lots of customizations. The dev process is adapted from Razzle, and it runs a base Express process at the requested port, launching the Webpack Dev Server at port + 1 to handle hot reloaded resources. Apollo and Auth0 are optionally included.
You'll get a layout that looks like this (abbreviated):
my-new-web-project
āāā assets - build resources not exposed to the public
āāā scripts - lightweight build tooling adapted from CRA
ā āāā build.ts - build the project for production use
ā āāā dev.ts - run the project in dev mode alongside Webpack Dev Server
ā āāā run.ts - run the project in production mode using the built bundle
āāā src
ā āāā __tests__ - a stub folder for Jest tests
ā āāā components - components that handle rendering and presentation
ā āāā [data] - (if useApollo is selected) a folder for data-related modules
ā ā āāā [ApiClient.ts] - (if useApollo is selected) code to initialize an Apollo GraphQL client
ā ā āāā [AuthClient.ts] - (if useAuth0 is selected) code to initialize Auth0 authentication
ā āāā state - Redux state management using thunks with context, for things like the Apollo client
ā ā āāā [AuthState.ts] - (if useAuth0 is selected) Redux module to manage auth state
ā ā āāā StateTypes.ts - a centralized module for types related to Redux
ā ā āāā Store.ts - Redux store initialization and hot reloading code, with thunk context
ā āāā views - views compose components and handle logic and integration
ā ā āāā App.tsx - attaches providers for react-router, Redux, and optionally Apollo
ā ā āāā DummyApp.tsx - attaches dummy providers for rendering things like the error view
ā ā āāā Router.tsx - a simple react-router switch view using routes from Routes.tsx
ā āāā BrowserConfig.ts - prepares and loads configs created by Config.ts below for the browser
ā āāā Client.tsx - bootstraps the application in the browser
ā āāā Config.ts - reads the server environment to create a config for the browser
ā āāā Routes.tsx - uses react-router-dom and react-loadable to describe available routes
ā āāā Server.ts - the core Express server that builds a BrowserConfig for each request
āāā static - static files made available via the Express server
ā āāā document.html - a webpack-html-plugin template that Server.ts injects the config into
āāā .babelrc - includes TypeScript, Emotion, and other plugins
āāā Dockerfile - a simple container that uses "yarn run"
āāā tsconfig.json - used by the Babel plugin
āāā tslint.json - starts with Microsoft contrib and overrides a lot
āāā webpack.config.ts - adapted from CRA with customizations
Mobile
To bootstrap a React Native mobile project, use the mobile
generator:
mkdir my-new-mobile-project
cd my-new--mobile-project
yo @bkonkle/react:mobile
This results in a React Native application using Expo, with React Navigation for routing.
You'll get a layout that looks like this (abbreviated):
my-new-mobile-project
āāā assets - static resources such as images
āāā src
ā āāā __tests__ - a stub folder for Jest tests
ā āāā components - components that handle rendering and presentation
ā āāā [data] - (same as the web generator)
ā āāā screens - screens compose components and handle logic and integration
ā ā āāā LoginScreen.tsx - the default route, intended to render a login experience
ā āāā state - (same as the web generator)
ā āāā Config.ts - sets up config values for all environments, then exports the current values
ā āāā Routes.ts - uses react-navigation to describe available screens
ā āāā Theme.ts - some basic app-wide theming tools
ā āāā Types.ts - some general types used across the app
āāā .babelrc - includes the standard Expo preset
āāā App.js - the Expo entry point, which imports the App.tsx component
āāā tsconfig.json - (same as the web generator)
āāā tslint.json - (same as the web generator)
GraphQL
To bootstrap a GraphQL Api based on Postgraphile, use the graphql
generator:
mkdir my-new-graphql-project
cd my-new--graphql-project
yo @bkonkle/react:graphql
This results in an Express API using Postgraphile and Playground as middleware.
my-new-graphql-project
āāā migrations - database schema migrations written in TypeScript and using Knex
āāā sql - sql function definitions that are loaded into Postgres
āāā src
ā āāā __tests__ - a stub folder for Jest tests
ā āāā utils - assorted utility modules
ā ā āāā MigrationUtils.ts - utilities for Knex schema migrations
ā āāā Config.ts - reads the environment and exports various config namespaces
ā āāā Plugins.ts - Postgraphile plugins to extend the GraphQL schema
ā āāā Server.ts - the main Express pipeline with Postgraphile and Playground
ā āāā Types.ts - some general types used across the app
āāā knexfile.js - Knex schema migration config
āāā tsconfig.json - (same as the web generator)
āāā tslint.json - (same as the web generator)