Let’s run React with Docker together

Before we get started, we need to make sure What Docker is, and Why Docker is important.

I’m not gonna being assume that you are React beginner.

Could you assume that you run other developer’s complex project on your laptop?

Just installing npm package doesn’t run others’ project completely on your device. right?

The Docker goal is to ease the creation, deploy and the delivery of an application using the so called Containers instead of creating a full operating system.

That’t it. 😁

Let’s go~~~✍🏻

If you are using a Mac: https://docs.docker.com/docker-for-mac/install/

If you are using Windows: https://docs.docker.com/docker-for-windows/install/

Create a working directory

$ mkdir react-with-docker
$ cd react-with-docker

Create a Dockerfile

$ vi Dockerfile
  • Dockerfile
FROM node:14.5.0-alpine
WORKDIR /usr/src/app

Create docker-compose.yml

$ vi docker-compose.yml
  • docker-compose.yml
version : ‘ 3’ 
services :
node :
build :
context : .dockerfile : Dockerfile volumes : — .
/ : / usr /
src / app # Sync between local and container command : sh -c “cd react-sample && yarn start” ports : — “ 3000: 3000” stdin_open : true

Create a container

$ docker-compose build

Create a React app

$ docker-compose run — rm node sh -c “npm install -g create-react-app && create-react-app react-sample”

react-sample Make sure it’s created both locally and in the container !

$ ls
$ docker-compose run node ls

Container launch

$ docker-compose up

If you access http://localhost: 3000/, you are successful! 🙌

Hello World! Let’s do it

$ vi react-with-docker/react-sample/src/App.js
  • App.js
import React from ‘react’;
import logo from ‘./logo.svg’;
import ‘./App.css’;
function App() {
return (
<div className=”App”>
<header className=”App-header”>
<img src={logo} className=”App-logo” alt=”logo” />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className=”App-link”
href=”https://reactjs.org
target=”_blank”
rel=”noopener noreferrer”
>
Learn React
</a>
<p>
Hello World!
</p>
</header>
</div>
);
}
export default App;

react-with-docker/react-sample/src/App.css It might be interesting to play around with it and you can change the design.

Thanks.

Written by

Passion, Together

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store