generator-amsterdam-react-boilerplate

Amsterdam's Datapunt/OIS React Boilerplate Generator

Usage no npm install needed!

<script type="module">
  import generatorAmsterdamReactBoilerplate from 'https://cdn.skypack.dev/generator-amsterdam-react-boilerplate';
</script>

README

Datapunt React project generator

Datapunt/City Data flavoured Yeoman react-boilerplate generator.

Introduction

Use this Yeoman generator to set up a new project, based on react-boilerplate.

The generator takes care of:

  • cloning (the latest tag of) the react-boilerplate repository
  • replacing properties and values in package.json, setting constants values and preparing Jenkinsfile
  • adding necessary dependencies
  • (optionally) installing all dependencies
  • (optionally) pushing the initial commit

Requirements

  • npm >=5
  • node >=8

Has NOT been tested on Windows.

Installation

Install Yeoman

$ npm install -g yo

a. Clone this repository

After cloning, cd into the folder the repository is cloned in and run:

$ npm link

This will create a global NPM package and you will be able to run the generator from any folder.

b. Install as global NPM package

$ npm i -g generator-amsterdam-react-boilerplate

c. Find through Yeoman CLI

Run

$ yo

and select Install a generator. Type amsterdam-react-boilerplate and select the match.

Running

From the command line, run

$ yo amsterdam-react-boilerplate

or

$ yo

and select Amsterdam React Boilerplate.

Installation steps

1. Github user and repository name

Press <Enter> or type 'Y' to enter repository details. The repository name and Github user name will be used to set the Git remote. Press 'n' to skip.

Repository name
Valid repo name.
Github user/account name
Valid Github user name. The generator will prompt for re-entering the data if the repository cannot be found in the given user's account. You can choose to skip that step and go with the values you entered. For instance, when there is no repository yet, but there will be one with the given name for that user.
Do you want the generator to push the initial commit?
Press <Enter> or type 'Y' to have the generator push the first commit (message: "First commit") to the remote repository.
Choose the react-boilerplate tag you want to base your project on
The generator will fetch the five latest tags from the react-boilerplate repository. Check the changelog for details on each version.

2. Project parameters

Project name
The value for this input will be used to populate the name field in package.json, set the prefix for constants (in constants.js files), set the value for the apple-mobile-web-app-title meta tag in index.html and is printed in Jenkinsfile.
Project title
Readable project name. Is printed in index.html as the document title and is used to populate manifest.json. See PWA parameters.
Version
The version is validated against a Semver regex.
Description (optional)
Used to populate the description fields in package.json and manifest.json.
Author
Used to populate the author field in package.json.
License
Used to populate the license field in package.json
Language
Has to be a valid ISO 639-1 language code. Is used to set the application's default language and to resolve imports for language support in app/app.js.
Subdomain
Part of the amsterdam.nl domain on which the website will be hosted. The value is validated against a list of reserved subdomain names.
API proxy dir (optional)
Subdirectory on the acc.data.amsterdam.nl domain through which the application's API will be available. Useful for when the API isn't available and data structures need to be mocked with Dyson during development.
Run npm install after project generation?
Press <Enter> or type 'Y' for the generator to install all NPM dependencies after the setup has completed.
Truncate README.md?
Press <Enter> or type 'Y' to replace the source repo's readme file with the project's title and description. Typing 'n' will leave the original readme intact.

3. Jenkinsfile parameters

Job name
Used to configure the docker image creation and build step. Has to reference one of the IDs in the Docker registry.
Playbook
Ansible deployment playbook name.
Project ID
docker-compose Project name.

4. PWA parameters

Do you want to have a manifest.json file generated?
Press <Enter> or type 'Y' to configure the properties for the manifest.json file. Note that the file will only be generated at build-time. Pressing 'n' will remove the WebpackPwaManifest entry from Webpack's production configuration.
Name
See developer.mozilla.org/en-US/docs/Web/Manifest for details.
Short name/dt>
See developer.mozilla.org/en-US/docs/Web/Manifest for details.
Description (optional)
See developer.mozilla.org/en-US/docs/Web/Manifest for details.
Background color
See developer.mozilla.org/en-US/docs/Web/Manifest for details.
Theme color
See developer.mozilla.org/en-US/docs/Web/Manifest for details.

HTTPS in development

react-boilerplate doens't offer running the dev environment in https. The Datapunt React project generator, however, does. Setting HTTPS as environment variable will start the Express server with a self-signed certificate.

$ HTTPS=true npm run start