Create node-react-docker apps easily

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. This package is a way to generate a clean and configured project with Node/Typescript in backend, React in frontend (with create-react-app) and Docker containers (with development and production mode)

Quick Overview

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

(npx comes with npm 5.2+ and higher)

Then open:
http://localhost:3000/ to see your app.
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 (macOS/Linux) to easily switch Node versions between different projects.

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

npx

npx create-nrd-app my-app

(npx is a package runner tool that comes with npm 5.2+ and higher)

npm

npm init nrd-app my-app

npm init <initializer> is available in npm 6+

Yarn

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:

cd my-app

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

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

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

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

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

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

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

Comments

[briwa]

Great tool btw! Just a quick question, it would still work if you omit -f docker-compose.yml right? Because by default docker-compose will look for docker-compose.yml in the working directory. Or maybe I am missing something 🤔 Thank you.

[Brito He4rt]

Yes, you're correct :D
I only included the -f to create difference between production and development mode