👋 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