Docker commands
Local
docker build -t pa4kev/portfolio-reactjs-full:latest -f Dockerfile .
docker push pa4kev/portfolio-reactjs-full:latest
Server (Enaga)
docker pull pa4kev/portfolio-reactjs-full
if required, run certbot to set the certificates.
-
First stop Nginx, as it is using port 80
sudo systemctl stop nginx.service -
Run this container, I doubt that i am understanding how it works properly though.
docker run -it --rm -p 80:80 --name certbot -v "/etc/letsencrypt:/etc/letsencrypt" -v "/var/lib/letsencrypt:/var/lib/letsencrypt" certbot/certbot certonly --standalone --break-my-certs -d matsubara.nl -d www.matsubara.nl -d pa4kev.nl -d www.pa4kev.nl -d michelaben.nl -d www.michelaben.nl -d gitea.matsubara.nl -
Start Nginx again.
sudo systemctl start nginx.service -
Run the portfolio container.
docker run -t -d --name react -p 8080:80 -v /var/www/html:/var/www/html pa4kev/portfolio-reactjs-full -
-tforeground mode -
-ddetached mode -
Run the Gitea container.
docker run -d --name gitea -p 3000:3000 -p 222:22 -v ./gitea:/data -v /etc/timezone:/etc/timezone:ro -v /etc/localtime:/etc/localtime:ro gitea/gitea:1.22.6
docker run -it --rm --name certbot --net webproxy -v $(pwd)/letsencrypt:/etc/letsencrypt -v $(pwd)/letsencrypt-lib:/var/lib/letsencrypt certbot/certbot certonly --standalone --preferred-challenges http -d matsubara.nl -d www.matsubara.nl -d pa4kev.nl -d www.pa4kev.nl -d michelaben.nl -d www.michelaben.nl -d gitea.matsubara.nl
Nginx
sudo vim /etc/nginx/sites-available/matsubara.nl
sudo nginx -t
sudo systemctl reload nginx
Gitea
docker run -d --name gitea -p 3000:3000 -p 222:22 -v ./gitea:/data -v /etc/timezone:/etc/timezone:ro -v /etc/localtime:/etc/localtime:ro gitea/gitea:1.22.6
- Adjust settings for gitea.
docker exec -it gitea bash
vi ./data/gitea/conf/app.ini
-
Applied this setting. See also: Gitea config cheatsheet
DISABLE_REGISTRATION = true -
Then restart the container.
docker container restart gitea
React
Bootstrap: npm install bootstrap
Routing: npm install react-router-dom
Dark mode: https://www.makeuseof.com/how-to-add-dark-mode-to-a-react-application/
Emoji component: https://medium.com/@seanmcp/%EF%B8%8F-how-to-use-emojis-in-react-d23bbf608bf7
HTML parsing: npm install html-react-parser
Markdown to JSX documentation:
Markdown to JSX install: npm install markdown-to-jsx
https://www.npmjs.com/package/html-react-parser
Convert SVG to React component: https://svg2jsx.com/
Syntax highlighting: npm install react-syntax-highlighter
react-syntax-highlighter documentation
Node
List outdated packages: npm outdated
Update all dependancies: npm update
elm init
npm init -y
elm install mdgriffith/elm-ui
elm install elm-community/random-extra
Add to package.json
"scripts": {
"dev": "elm-live src/Main.elm -- --debug --output=index.js",
},
"devDependencies": {
"elm-live": "^4.0.2"
}
npm install
You can now run for development:
npm run dev
elm make src/Main.elm --output=index.js
Docker
To no longer require sudo for docker, use:
sudo groupadd dockersudo gpasswd -a $USER docker
Documentation
Code Splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
Analyzing the Bundle Size
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
Making a Progressive Web App
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
Advanced Configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
Deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
npm run build fails to minify
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify