Create node-react-docker apps easily
Tags: react, node, docker, typescript
Published: 2020-07-03 19:27:02

Every time that we start a new project, even to play around with new technologies in express/node/react. We need to configure a bunch of things, and that can be a little boring.

That's why I've created [create-nrd-app](https://www.npmjs.com/package/create-nrd-app). This package is a way to generate a clean and configured project with Node/Typescript in backend, React in frontend (with [create-react-app](https://www.npmjs.com/package/create-react-app)) and Docker containers (with development and production mode)

## Quick Overview

```sh
npx create-nrd-app my-app
cd my-app
docker-compose -f docker-compose.yml up --build
```

_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher)_

Then open:
[http://localhost:3000/](http://localhost:3000/) to see your app.
[http://localhost:3001/](http://localhost:3001/) to see your server.

### Get Started Immediately

You **don’t** need to install or configure tools like Webpack or Babel.
They are preconfigured and hidden so that you can focus on the code.

Just create a project, and you’re good to go.

## Creating an App

**You’ll need to have Node 8.16.0 or Node 10.16.0 or later version on your local development machine** (but it’s not required on the server). You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) to easily switch Node versions between different projects.

To create a new app, you may choose one of the following methods:

### npx

```sh
npx create-nrd-app my-app
```

_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) is a package runner tool that comes with npm 5.2+ and higher)_

### npm

```sh
npm init nrd-app my-app
```

_`npm init <initializer>` is available in npm 6+_

### Yarn

```sh
yarn create nrd-app my-app
```

_`yarn create` is available in Yarn 0.25+_

It will create a directory called `my-app` inside the current folder.
Inside that directory, it will generate the initial project structure and install the transitive dependencies:

```
my-app
├── docker-compose.dev.yml
├── docker-compose.yml
├── package.json
├── server
│   ├── .gitignore
│   ├── .dockerignore
│   ├── .prettierrc
│   ├── .eslintrc.json
│   ├── node_modules
│   ├── package.json
│   ├── tsconfig.json
│   ├── dev.Dockerfile
│   ├── Dockerfile
│   ├── server.ts
└── client
    ├── conf
    │   └── conf.d
    │      └── default.conf
    ├── README.md
    ├── node_modules
    ├── package.json
    ├── .gitignore
    ├── .dockerignore
    ├── dev.Dockerfile
    ├── Dockerfile
    ├── public
    │   ├── favicon.ico
    │   ├── index.html
    │   └── manifest.json
    └── src
        ├── App.css
        ├── App.js
        ├── App.test.js
        ├── index.css
        ├── index.js
        ├── logo.svg
        └── serviceWorker.js
```

Once the installation is done, you can open your project folder:

```sh
cd my-app
```

Inside the newly created project, you can run some built-in commands:

```sh
docker-compose -f docker-compose.dev.yml up --build
```

Runs the app in development mode.
Open [http://localhost:3000](http://localhost:3000) to view your app in the browser.
Open [http://localhost:3001](http://localhost:3001) to view your server in the browser.

The page will automatically reload if you make changes to the code.

```sh
docker-compose -f docker-compose.yml up --build
```


Runs the app in production mode.
Open [http://localhost:3000](http://localhost:3000) to view your app in the browser.
Open [http://localhost:3001](http://localhost:3001) to view your server in the browser.

Thanks for reading, I'll love to see if you liked it :D