Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/janjaap/generator-amsterdam-react-boilerplate

Yeoman generator for Datapunt/OIS React projects
https://github.com/janjaap/generator-amsterdam-react-boilerplate

amsterdam react react-boilerplate yeoman yeoman-generator

Last synced: 1 day ago
JSON representation

Yeoman generator for Datapunt/OIS React projects

Awesome Lists containing this project

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](app/templates/server/cert).



```

$ HTTPS=true npm run start

```