Table of Contents

• About this project
  • Built with
• Getting Started
• Usage
  • Docker support
• Future
• License
• Contact

About this project

Most of the React developers are using "create-react-app" to start a new project.
But it becomes quickly a nightmare when you want to add some customization to your project.
Some extra libraries needs to be added to override the default configuration, or you have to eject the project.

This project initiator will allow you to have more control on your project using webpack, babel, sass, typescript and eslint.

It supports Docker environment, by creating either a docker-compose or just aliases to docker run with your favorite Docker image.

Since version 1.0.6, it supports typescript. You can have a mix of js and ts in the project.
By default you cannot import js file into a ts, you need to allow js in the tsconfig.js, but you can import ts into js.

Built with

• Commander.js
• Inquirer.js
• spdx-license-list

Getting Started

npm -g install wesolvit-react-init
wesolvit-react-init my-neww-react-app-directory

Usage

The tool will ask you several questions about your project. You can provide some default values via the command line.
Here are the options:

Usage: wesolvit-react-init [options] <directory>

Options:
  -V, --version                                    output the version number
  -n, --project-name <name>                        The project name
  -v, --project-version <version>                  The project version (default: 0.0.1)
  -d, --desc <description>                         The project description
  -a, --author <author>                            The project author
  -l, --license <license>                          The project license (default: GPL-3.0-or-later)
  -c, --docker                                     Use docker (default: false)
  --docker-type <dockerType>                       Docker type (default: docker-compose)
  --docker-compose-image <dockerComposeImage>      Image for docker-compose (default: node:alpine)
  --docker-compose-context <dockerComposeContext>  Build context for docker-compose
  --docker-run-image <dockerRunImage>              Docker image (default: node:alpine)
  --docker-exec-container <dockerExecContainer>    Docker container (default: node)
  -h, --help                                       display help for command

Examples:

wesolvit-react-init . # Will create the project in current directory if it is empty
wesolvit-react-init my-project --docker --docker-type="docker run image" docker-run-image="node:13"
# Will create a new directory my-project and allow you to generate aliases to run node:13 with docker.

Docker support

There are 4 way to use Docker.

1. With docker-compose and an image as node service.
2. With docker-compose and a build context.
3. With docker run, and a Docker image.
4. With docker exec, and a Docker container.

For those, the tool will create a .aliases file with aliases to node, npm, npx, yarn, webpack.
Also bash-node to access the bash of the container and serve to start webpack development server, the equivalent to yarn start in create-react-app.

The docker approach allows you to have different versions of node, npm or yarn for different projects based on the Docker image or container your are running.

Example with docker:

wesolvit-react-init my-project --docker --docker-type="docker run image" docker-run-image="node:13"
cd my-project # Go to the project directory.
. .aliases # Load the aliases.
yarn install # Install the libraries.
serve # Start the development server

# Equivalent without the aliases

docker run --rm -v $(pwd):/app/build -w /app/build node:13 yarn install # yarn install
docker run --rm -p 8080:8080 -v $(pwd):/app/build -w /app/build node:13 yarn serve # serve

Example with docker-compose:

wesolvit-react-init my-project --docker --docker-type="docker-compose context" docker-compose-context="/path/to/a/docker/build/context/with/Dockerfile"
# This will copy the Dockerfile and all the files needed for that Dockerfile.
cd my-project # Go to the project directory.
. .aliases # Load the aliases.
docker-compose up -d --build
yarn install # Install the libraries.
serve # Start the development server

# Equivalent without the aliases

docker-compose exec node yarn install # yarn install
docker-compose exec node yarn serve # serve

Feel free to adapt the docker-compose, and the aliases files to your usage.

Future

What's coming next

• No interactive mode for CI support
• Testing support

License

Distributed under the GNU GENERAL PUBLIC LICENSE Version 3, License. See LICENSE for more information.

Contact

Rachid TARSIMI - - [email protected]

Project Link: https://gitlab.com/wesolvit/react/init