I tried to create React.js × TypeScript × Material-UI on docker environment

About this article

This article is an article that tried to create an environment where React × TypeScript × Material-ui runs on Docker. I think that there is a part that will be helpful for those who want to quickly create a development environment with Docker from now on! If there are any mistakes in the content, or if you have any advice, it would be greatly appreciated if you could let us know. ..

The main technologies used this time are as follows.

• Docker,Docker-compose
• React.js (version.17.0.1)
• TypeScript
• material-ui (version.4.11.0)

Specifications before creation

――I have made SPA with Vue. --Docker somehow ... (inexperienced)

Background I wanted to make

Recently, I've learned a little about Vue, and I've been studying other JS FWs and libraries. I wish I could get new knowledge. .. So I started studying React and TypeScript.

For the time being, I want to make something that will take shape in order to deepen my understanding. I thought First, let's build a development environment! So I tried this time.

Development environment creation

For now, turn off the working directory. This time, I turned off react-todos (directory name).

mkdir react-todos

Next, create Dockerfile and docker-compose.yml in the root directory of the project.

Create Dockerfile

#Creating a Dockerfile
vi Dockerfile

Get the base image. This time I got the latest version (as of November 1, 2020). https://hub.docker.com/_/node

Dockerfile

FROM node:15.0.1-alpine3.10

Create docker-compose.yml

Get the template from https://docs.docker.com/compose/compose-file/ and go crazy.

#docker-compose.Create yml
vi Docker-compose.yml

docker-compose.yml

version: "3.8"
services:
  front:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./front:/front
    working_dir: /front
    command: node
    tty: true

#Container launch
docker-compose up

After confirming that the node container has started, go inside the container and create a React project.

Go inside the container and create a React project.

#Enter the container.
docker-compose exec front sh

#To use TypeScript in Create React App, run the following command.
npx create-react-app my-app --template typescript

If you can confirm that the React project has been created under front / my-app, Modify the dockerfile and docker-compose.yml file again and launch the container!

Dockerfile

FROM node:15.0.1-alpine3.10
#Add the bottom two lines!
COPY ./front /front 
WORKDIR /front 

docker-compose.yml

version: "3.8"
services:
  front:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./front:/front
    working_dir: /front/my-app #Fix!
    command: sh -c "npm install & npm start" #Fix!
    tty: true
    ports:
      - 3000:3000 #Specify the port!

Launch the container again and see if you can access [http: // localhost: 3000 /](http: // localhost: 3000 /)!

#Container launch
docker-compose up

Did the screen start up safely? ??

Install Material-ui

Next, install Material-ui, React's UI framework. Go inside the container again.

# /front/my-Install in the app directory
npm install @material-ui/core
npm install @material-ui/style

However, there is a problem here. .. Cannot install. .. Apparently, the React version didn't match the material-ui version, so I got a dependency error ... Details are described here.

→https://qiita.com/koh97222/items/c46d1ef2a63b92bb6c15 (The solution of ERESOLVE unable to resolve dependency tree)

As a result, referring to https://github.com/mui-org/material-ui/issues/23306, the following Execute the command.

# /front/my-Install in the app directory
npm install --save --legacy-peer-deps @material-ui/core

After installing, modify tsconfig.json so that material-ui works even in TypeScript environment.

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["ES6", "dom", "dom.iterable", "esnext"], //Added ES6
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
	//Added bottom 3 lines
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "jsx": "react"
  },
  "include": ["src"]
}

After modifying tsconfig.json, I will try to make one component to see if material-ui can actually be used. This time, create a components directory under the src directory, Within that directory, I created WrapButton.tsx, which wraps the Button component.

tsx:.components/WrapButton.tsx

import React from "react";
import { Button } from "@material-ui/core";

const WrapButton = () => {
  return (
    <>
      <Button variant="contained" color="secondary">
        Hello World!
      </Button>
    </>
  );
};

export default WrapButton;

App.tsx

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import WrapButton from "./components/WrapButton";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
　　　　　//↓ Add
        <WrapButton />
      </header>
    </div>
  );
}

export default App;

It's a bit clunky, but you can see that the Button component is visible! (Don't worry about email notifications ... lol) Now that the development environment is ready for the time being, let's start from here as you like!