👋 Olá, Seja Bem-vindo(a) ao 'Docker + React Multi-Page'.
Ao se adicionar libs ou qualquer outro comando que crie arquivos dentro do contâiner Docker o proprietário para edição se torna o contâiner, sendo assim você precisará rodar o comando abaixo para alterar essas permissões e você poder editar:
sudo chown -R $USER:$USER .-
Instalar o NVM para versão mais atual possível
-
Criar a aplicação 'frontend'(ou um nome que desejar):
npx create-react-app frontend- 'Dockerizar' a aplicação criada, para isso crie um arquivo docker-compose.yml na raiz do projeto com o seguinte conteúdo:
version: "3"
services:
frontend:
build: ./frontend
container_name: frontend
restart: always
ports:
- 3000:3000
volumes:
- ./frontend:/app
- ./frontend/node_modules:/app/node_modules
command: npm start- Verifique a versão instalada do seu node no terminal, neste caso a versão é a 15.0.1 que será utilizada no passo 5° para configurar o Dockerfile:
node --version- Na pasta 'frontend' você deve criar o Dockerfile com o seguinte conteúdo:
FROM node:15.0.1
WORKDIR /app
COPY package.json /app/package.json
RUN npm install
RUN npm config set unsafe-perm true
COPY . /app
EXPOSE 3000- Construa sua aplicação:
docker-compose build- Atualizar npm do docker, rodando no terminal o seguinte comando:
docker-compose run --rm frontend npm uninstall -g create-react-app && npm i -g npm@latest && npm cache clean -f- Instalar o React-Boostrap no seu container:
docker-compose run --rm frontend npm install react-dom react-bootstrap bootstrap- Alterar seu Dockerfile copiando o arquivo package-lock.json(auto gerado pelo npm) para dentro de seu container Docker:
FROM node:15.0.1
WORKDIR /app
COPY package.json /app/package.json
COPY package-lock.json /app/package-lock.json
RUN npm install
RUN npm config set unsafe-perm true
COPY . /app
EXPOSE 3000- Suba seu projeto:
docker-compose up- Para visualizar o sistema basta acessar no navegador no endereço: localhost:3000
Transformando sua aplicação React em "Multi-Page":
- Instalar o react-router-dom no seu container em um novo terminal:
docker-compose run --rm frontend npm install react-router-dom-
Criar a pasta components
-
Na pasta acima citada iremos criar nosso componentes(Páginas HTML inteira ou Componentes HTML parciais) com a seguinte estrutura abaixo:
components
├─── Header.jsx
├─── Home.jsx
├─── index.jsx
└─── Pagina.jsx
- No component Header.jsx iremos colocar o seguinte conteúdo:
import React from "react";
import { withRouter } from "react-router-dom";
import { Navbar, Nav } from 'react-bootstrap';
function Header(props) {
return (
<Navbar bg="dark" variant="dark" className="justify-content-between">
<Navbar.Brand href="/">
<span className="ml-2">Projeto teste</span>
</Navbar.Brand>
<Navbar.Collapse>
<Nav className="ml-auto">
<Nav.Link
href="/"
className={`${ props.location.pathname === "/" ? "active" : "" }`}
>
Homepage
</Nav.Link>
<Nav.Link
href="/pagina"
className={`${ props.location.pathname === "/pagina" ? "active" : "" }`}
>
Página teste
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
export default withRouter(Header);
criando assim um cabeçalho(header) com os links para a página principal de nosso projeto e para uma outra página de testes
- No component Home.jsx iremos colocar o seguinte conteúdo:
import React from 'react';
import { withRouter } from "react-router-dom";
import { Row } from 'react-bootstrap';
function Home() {
return(
<Row className="no-gutters justify-content-center px-5 m-5">
<h2>Esta é a Homepage</h2>
</Row>
);
}
export default withRouter(Home);
- No component Pagina.jsx iremos colocar o seguinte conteúdo:
import React from 'react';
import { withRouter } from "react-router-dom";
import { Row, Col } from 'react-bootstrap';
class Pagina extends React.Component {
render() {
return(
<Row className="no-gutters justify-content-center mt-5">
<Col md={12} className="text-center my-5">
<h1>Esta é a Página teste</h1>
</Col>
</Row>
)
}
}
export default withRouter(Pagina);
- No component index.jsx iremos colocar o seguinte conteúdo:
export { default as Header } from "./Header"
export { default as Home } from "./Home"
export { default as Pagina } from "./Pagina"
esse arquivo tem a função de exportar seus componentes aonde ele for importado, como no caso da importação no arquivo App.js
- No arquivo App.js iremos configurar as páginas que queremos acessar com o react-router-dom através do componente importado "Route" da biblioteca.
Após essas configurações você poderá verificar que o cabeçalho da aplicação contém os links abaixo e suas rotas estão funcionado:
No final você terá a seguinte "árvore de arquivos/diretórios":
.
├── docker-compose.yml
├── frontend
│ ├── Dockerfile
| ├── node_modules
│ ├── package.json
│ ├── package-lock.json
│ ├── public
│ │ ├── favicon.ico
│ │ ├── index.html
│ │ ├── logo192.png
│ │ ├── logo512.png
│ │ ├── manifest.json
│ │ └── robots.txt
│ ├── README.md
│ ├── src
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── components
│ │ │ ├── Header.jsx
│ │ │ ├── Home.jsx
│ │ │ ├── index.js
│ │ │ └── Pagina.jsx
│ │ ├── index.css
│ │ ├── index.js
│ │ ├── logo.svg
│ │ ├── reportWebVitals.js
│ │ └── setupTests.js
│ └── yarn.lock
└── README.md
No arquivo gitignore retire a pasta 'node_modules', assim você evitará de ter que criar toda ver que construir sua aplicação facilitando o deploy.
Após instalar o docker e docker-compose, estando na pasta raiz do projeto, execute:
docker-compose upPara se certificar que os seus containers subiram corretamente, todos os containers deve estar com o status UP, execute:
docker-compose ps -aPara acessar o container da aplicação, execute:
docker-compose run --rm web bashPara derrubar e subir a instância do docker novamente, execute:
docker-compose down && docker-compose up🚀 👏 Para visualizar o sistema basta acessar no navegador no endereço: localhost:3000
2° Here’s How You Can Use Docker With React
3° Create React App + Docker — multi-stage build example
5° How To Create A Multi-Page Website With React In 5 Minutes
6° React-Bootstrap: a fusão entre o React e o Bootstrap
7° Instalando e gerenciando várias versões do Node.js com NVM