generator-seedrs-react

Installation

First, install Yeoman and @seedrs/generator-seedrs-react using npm or yarn (we assume you have pre-installed node.js).

With npm

npm install -g yo
npm install -g @seedrs/generator-seedrs-react

With yarn

yarn global add yo @seedrs/generator-seedrs-react

Then create your directory and move into it

mkdir <app_name>
cd <app_name>

Then generate your new project:

yo @seedrs/seedrs-react

Prompts

Yeoman will prompt you for three things:

name - This is the name of your application. Choose it wisely!

embeddable - Answering yes will set up the repository to generate an application which can be mounted into an existing page. No will generate a public/index.html file which you can use to build your application.

port - This is important make sure you do not clash with other applications you are running. This option affects docker-compose.yml, webpack.development.js only. It will not affect anything in the production build.

Folder structure

Running the generator will scaffold your project in the following structure. It will also create a git repository.

.buildkite/
  │
  ├── steps/
  │   │
  │   ├── lint.sh
  │   │
  │   └── test.sh
  └── pipeline.yml
public/
  │
  └─── index.html
config/
  │
  ├── aliases.js
  │
  ├── config.js
  │
  ├── paths.js
  │
  ├── webpack.common.js
  │
  ├── webpack.development.js
  │
  ├── webpack.production.js
  │
  └── env/
      │
      ├── env.development.js
      │
      ├── env.production.js
      │
      ├── env.staging.js
      │
      └── index.js
scripts/
  │
  ├─── build.js
  │
  └─── test.js
src/
  │
  ├──__tests__/
  │    │
  │    └─ app.test.js
  │
  ├──components/
  │    │
  │    └─ app/
  │       │
  │       └─ App.js
  │
  └── <app_name>.js
Dockerfile
docker-compose.yml
package.json

.buildkite/

Contains a pipeline.yml which defines two tasks one for linting the project and one for running the tests. You can add more scripts to the steps folder and modify the pipeline.yml to add more steps.

public/

Only generated when you choose to scaffold a non embeddable application.

Contains an index.html file. This is a barebones html file that the react application can be rendered into. Customise this as you see fit. This file is handled by html-webpack-plugin.

Config/

Contains the webpack configuration for development and production.

aliases.js

Aliases for specifying imports e.g. 'components/mycomponent' instead of specifiying relative paths.

config.js

Contains the HOST and the APP_ENV. We use APP_ENV to set the stage of the build e.g. staging in refering to the environment the applicaiton will be deployed to. This allows us to work around NODE_ENV being used by webpack to specify whether the build should be a production style minified build or a development style build.

paths.js

Contains a mapping of the various folders to their location within the folder allowing them to be referenced easily.

webpack.common.js

This file contains webpack config shared between both development and production style builds.

webpack.development.js

Development will run webpack dev server so the application can be run locally. You will need to set up your /etc/hosts file to point to <app_name>.seedrs.local. This might need additional config on the proxy level.

webpack.production.js

Will produce a minified build of your application. If you have generated a embedded application then you will have two .js files output one which can be statically linked to within the parent page and the other containing your application bundle.

env/

Contains environment specific config required at build time. E.g. publicPath which can be used by webpack.

scripts/

Utility scripts to help with linting and running jest tests.

src/

Your application code goes here! __tests__ contain your jest tests.

Dockerfile

A base Dockerfile used for development, testing and building the application bundle.

docker-compose.yml

A docker-compose config to help you get started.

package.json

Contains modules that will help you get started with a new react project.

Getting started

To get started with development run

docker-compose up

This will create a docker container and install the packages in package.json. If you have set up your /etc/hosts file with <app_name> pointed to localhost you can visit http://< app_name >:< port >/index.html and see It works!. Rendered in the browser.

Contributing

To contribute please follow the guidelines below. We will not accept PRs that do not conform to these simple rules.

linting

Make sure your changes pass the linter.

tests

Please write tests for any generators you add or templates you make changes to.

commitizen

Create structured git commits using yarn commit. Follow the prompts and push these changes to your branch.

Let's discuss your changes in the PR.

License

Apache-2.0 © [email protected]