J'ai essayé de créer un React.js x TypeScript x Material-UI sur un environnement docker
À propos de cet article
Cet article est un article qui a créé un environnement dans lequel React x TypeScript x Material-ui s'exécute sur Docker. Je pense qu'il existe des références pour les personnes qui souhaitent désormais créer rapidement un environnement de développement avec Docker! S'il y a des erreurs dans le contenu, ou si vous avez des conseils, nous vous serions reconnaissants de bien vouloir nous le faire savoir. ..
Les principales technologies utilisées cette fois sont les suivantes.
- Docker,Docker-compose
- React.js (version.17.0.1)
- TypeScript
- material-ui (version.4.11.0)
Spécifications avant création
- J'ai fait un SPA avec Vue. --Docker en quelque sorte ... (inexpérimenté)
Contexte que je voulais faire
Récemment, j'ai appris un peu sur Vue, et j'ai étudié d'autres FW et bibliothèques JS. J'aimerais pouvoir acquérir de nouvelles connaissances. .. J'ai donc commencé à étudier React et TypeScript.
Pour le moment, je veux faire quelque chose qui prendra forme afin d'approfondir ma compréhension. j'ai pensé Tout d'abord, construisons un environnement de développement! Alors j'ai essayé cette fois.
Création d'environnement de développement
Pour l'instant, désactivez le répertoire de travail. Cette fois, j'ai désactivé react-todos (nom du répertoire).
mkdir react-todos
Ensuite, créez Dockerfile et docker-compose.yml dans le répertoire racine du projet.
Créer Dockerfile
#Créer un Dockerfile
vi Dockerfile
Obtenez l'image de base. Cette fois, j'ai eu la dernière version (au 1er novembre 2020). https://hub.docker.com/_/node
Dockerfile
FROM node:15.0.1-alpine3.10
Création de docker-compose.yml
Obtenez le modèle sur https://docs.docker.com/compose/compose-file/ et devenez fou.
#docker-compose.Créer 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
#Lancement de conteneur
docker-compose up
Après avoir confirmé que le conteneur de nœuds a démarré, entrez dans le conteneur et créez un projet React.
Entrez dans le conteneur et créez un projet React.
#Entrez dans le conteneur.
docker-compose exec front sh
#Pour utiliser TypeScript avec Create React App, exécutez la commande suivante:
npx create-react-app my-app --template typescript
Si vous pouvez confirmer que le projet React a été créé sous front / my-app, Modifiez à nouveau le fichier Dockerfile et le fichier docker-compose.yml et lancez le conteneur!
Dockerfile
FROM node:15.0.1-alpine3.10
#Ajoutez les deux lignes du bas!
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 #Réparer!
command: sh -c "npm install & npm start" #Réparer!
tty: true
ports:
- 3000:3000 #Spécifiez le port!
Lancez à nouveau le conteneur et voyez si vous pouvez accéder à [http: // localhost: 3000 /](http: // localhost: 3000 /)!
#Lancement de conteneur
docker-compose up
L'écran a-t-il démarré en toute sécurité? ??
Installation de Material-ui
Ensuite, installez Material-ui, le framework d'interface utilisateur de React. Rentrez à nouveau dans le conteneur.
# /front/my-Installer dans le répertoire de l'application
npm install @material-ui/core
npm install @material-ui/style
Cependant, il y a un problème ici. .. Impossible d'installer. .. Apparemment, la version React ne correspondait pas à la version material-ui, j'ai donc eu une erreur de dépendance ... Les détails sont décrits ici.
→https://qiita.com/koh97222/items/c46d1ef2a63b92bb6c15 (La solution d'ERESOLVE ne parvient pas à résoudre l'arborescence de dépendances)
En conséquence, en se référant à https://github.com/mui-org/material-ui/issues/23306, ce qui suit Exécutez la commande.
# /front/my-Installer dans le répertoire de l'application
npm install --save --legacy-peer-deps @material-ui/core
Après l'installation, modifiez tsconfig.json pour que material-ui fonctionne même dans l'environnement TypeScript.
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": ["ES6", "dom", "dom.iterable", "esnext"], //ES6 ajouté
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
//Ajout des 3 lignes du bas
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true,
"jsx": "react"
},
"include": ["src"]
}
Une fois que tsconfig.json a été modifié, je vais essayer de créer un seul composant pour voir si material-ui peut réellement être utilisé. Cette fois, créez un répertoire de composants sous le répertoire src, Dans ce répertoire, j'ai créé WrapButton.tsx, qui encapsule le composant Button.
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>
//↓ Ajouter
<WrapButton />
</header>
</div>
);
}
export default App;
C'est un peu maladroit, mais vous pouvez voir que le composant Button est visible! (Ne vous inquiétez pas des notifications par e-mail ... lol) Maintenant que l'environnement de développement est prêt pour le moment, partons d'ici comme vous le souhaitez!