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.

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;

スクリーンショット 2020-11-02 23.56.07.png

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!

Recommended Posts

I tried to create React.js × TypeScript × Material-UI on docker environment
[First environment construction] I tried to create a Rails 6 + MySQL 8.0 + Docker environment on Windows 10.
I tried to create a padrino development environment with Docker
I tried migrating the portfolio created on Vagrant to the Docker development environment
I tried to build an environment using Docker (beginner)
I tried to create a java8 development environment with Chocolatey
I tried to build the environment little by little using docker
I tried to build the environment of WSL2 + Docker + VSCode
[Rails 6.0, Docker] I tried to summarize the Docker environment construction and commands necessary to create a portfolio
I tried to build the environment of PlantUML Server with Docker
I tried to build a laravel operating environment while remembering Docker
I tried running Docker on Windows Server 2019
Microservices 101-I tried putting Docker on Ubuntu-
I tried to build AdoptOpenjdk 11 on CentOS 7
What is Docker? I tried to summarize
I tried to build a Firebase application development environment with Docker in 2020
I tried to verify AdoptOpenJDK 11 (11.0.2) with Docker image
I tried to create a LINE clone app
I tried running Ansible on a Docker container
I tried installing docker on an EC2 instance
I tried to create Alexa skill in Java
I tried to create a portfolio with AWS, Docker, CircleCI, Laravel [with reference link]
Build a development environment to create Ruby on Jets + React apps with Docker
I tried to create a Clova skill in Java
I tried using Docker Desktop for Windows on Windows 10 Home
Rails6 I tried to introduce Docker to an existing application
Bad Gateway came out when I tried to connect Grafana and InfluxDB on Docker
I tried using Wercker to create and publish a Docker image that launches GlassFish 5.
I tried to make an introduction to PHP + MySQL with Docker
I tried adding a separator line to TabLayout on Android
[Docker] Create Elasticsearch, Kibana environment!
I tried node-jt400 (Environment construction)
[Rails] I tried to create a mini app with FullCalendar
How to build [TypeScript + Vue + Express + MySQL] environment with Docker ~ Express ~
I tried the Docker tutorial!
I tried running a Docker container on AWS IoT Greengrass 2.0
How to create an environment that uses Docker (WSL2) and Vagrant (VirtualBox) together on Windows
I tried BIND with Docker
I tried to verify yum-cron
I tried running WordPress with docker preview on M1 Mac.
I tried to create a simple map app in Android Studio
A story of frustration trying to create a penetration environment on Ubuntu 20.04
I tried to integrate Docker and Maven / Netbean nicely using Jib
Special Lecture on Multi-Scale Simulation: I tried to summarize the 5th
I tried to build an http2 development environment with Eclipse + Tomcat
How to build [TypeScript + Vue + Express + MySQL] environment with Docker ~ MySQL edition ~
Special Lecture on Multi-Scale Simulation: I tried to summarize the 8th
I tried deploying a Docker container on Lambda with Serverless Framework
Rails Tutorial Extension: I tried to create an RSS feed function
I tried to display the calendar on the Eclipse console using Java.
How to build [TypeScript + Vue + Express + MySQL] environment with Docker ~ Sequelize ~
Special Lecture on Multi-Scale Simulation: I tried to summarize the 7th
Create a Vue3 environment with Docker!
I tried to chew C # (indexer)
Steps to run docker on Mac
To beginners launching Docker on AWS
I tried to interact with Java
I tried to explain the method
Rails on Docker environment construction procedure
Create Laravel environment with Docker (docker-compose)
I tried to summarize Java learning (1)