-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathREADME.html
More file actions
31 lines (30 loc) · 7.42 KB
/
README.html
File metadata and controls
31 lines (30 loc) · 7.42 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Markmap</title>
<style>
* {
margin: 0;
padding: 0;
}
#mindmap {
display: block;
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<svg id="mindmap"></svg>
<script src="https://cdn.jsdelivr.net/npm/d3@5"></script><script src="https://cdn.jsdelivr.net/npm/markmap-lib@0.7.6/dist/browser/view.min.js"></script><script>((data, ...processors) => {
const {
Markmap
} = window.markmap;
Markmap.processors = processors;
Markmap.create('svg#mindmap', null, data);
})({"t":"heading","d":1,"v":"Docker for Create React App development with hot reloading","c":[{"t":"heading","d":2,"v":"Ref","c":[{"t":"list_item","d":3,"v":"<a href=\"https://create-react-app.dev/docs/getting-started/\" title=\"\" target=\"_blank\" rel=\"noopener noreferrer\">Create React App. Getting Started</a>"},{"t":"list_item","d":3,"v":"<a href=\"https://www.robinwieruch.de/docker-macos\" title=\"\" target=\"_blank\" rel=\"noopener noreferrer\">How to install Docker on MacOS</a>"},{"t":"list_item","d":3,"v":"<a href=\"https://www.robinwieruch.de/docker-create-react-app-development\" title=\"\" target=\"_blank\" rel=\"noopener noreferrer\">How to Docker with create-react-app</a>","c":[{"t":"list_item","d":4,"v":"<a href=\"https://www.robinwieruch.de/docker-react-development\" title=\"\" target=\"_blank\" rel=\"noopener noreferrer\">How to Docker with React (other kind of React app, i.e. with Webpack)</a>"}]},{"t":"list_item","d":3,"v":"and last but not least<br/>we've added hot reloading via suggestions in <a href=\"https://mherman.org/blog/dockerizing-a-react-app/\" title=\"\" target=\"_blank\" rel=\"noopener noreferrer\">Michael Herman's Dockerizing a React App</a>"}]},{"t":"heading","d":2,"v":"What's the plan","c":[{"t":"list_item","d":3,"v":"Set up a <a href=\"\" title=\"\" target=\"_blank\" rel=\"noopener noreferrer\">Create React App</a> dev environment running locally in docker"},{"t":"list_item","d":3,"v":"Hot reload our way through any local dev tasks we have at hand"}]},{"t":"heading","d":2,"v":"Docker up","c":[{"t":"list_item","d":3,"v":"Make sure you have docker installed<br/>Just follow the first article on how to install Docker (with Docker Machine instead of Docker Desktop).<br/>If you're on a Mac but you prefer Docker Desktop, that will work fine.<br/>Also, no matter what system you're on, if you have docker running, we're good to go."},{"t":"list_item","d":3,"v":"So in my case, I have docker-machine running, but not as a service, just ... there.<br/>So I gear up VS Code in a directory, and do the following","c":[{"t":"list_item","d":4,"v":"See if docker-machine is running","c":[{"t":"list_item","d":5,"v":"<pre><code class=\"language-bash\">% docker-machine ip\nError getting IP address: Host is not running\n% docker-machine start\nStarting "default"...\n(default) Check network to re-create if needed...\n(default) Waiting for an IP...\nMachine "default" was started.\nWaiting for SSH to be available...\nDetecting the provisioner...\nStarted machines may have new IP addresses. You may need to re-run the `docker-machine env` command.\nvictorkane@Victors-MacBook-Air how to docker-with-css-styles-in-cra % docker-machine env\nexport DOCKER_TLS_VERIFY="1"\nexport DOCKER_HOST="tcp://192.168.99.101:2376"\nexport DOCKER_CERT_PATH="/Users/victorkane/.docker/machine/machines/default"\nexport DOCKER_MACHINE_NAME="default"\n# Run this command to configure your shell:\n# eval $(docker-machine env)\n% eval $(docker-machine env)\n% docker-machine ip default\n192.168.99.101\n</code></pre>"}]},{"t":"list_item","d":4,"v":"So as not to have to go through this every time<br/>I have this set up in my shell <code>rc</code> file","c":[{"t":"list_item","d":5,"v":"<pre><code class=\"language-bash\">tail ~/.zshrc\n# check if `docker-machine` command exists\nif command -v docker-machine > /dev/null; then\n # fetch the first running machine name\n local machine=$(docker-machine ls | grep "Running" | head -n 1 | awk '{ print $1 }')\n if [ "$machine" != "" ]; then\n eval "$(docker-machine env $machine)"\n fi\nfi\n</code></pre>"}]}]}]},{"t":"heading","d":2,"v":"Whip up a CRA app","c":[{"t":"list_item","d":3,"v":"Create a repo and run <code>create-react-app</code><br/>We're going to run <code>create-react-app</code> in an unconventional manner<br/>by first creating a directory with our own README<br/>and initializing a git repo,<br/>instead of creating the whole app in a subdirectory"},{"t":"list_item","d":3,"v":"creating the repo and <code>create-react-app</code> from the command line","c":[{"t":"list_item","d":4,"v":"<pre><code class=\"language-bash\">git init\nnpx create-react-app .\nmv README.md README.cra.md\nmv README.old.md README.md\ngit add --all\ngit commit -m "initial commit"\n</code></pre>"}]},{"t":"list_item","d":3,"v":"We cleaned up and made our initial commit<br/>(since CRA created its own README and shunned ours over to a different name)"},{"t":"list_item","d":3,"v":"We run the default app and make sure it's running ok"},{"t":"list_item","d":3,"v":"We successfully point our browser at<br/>http://localhost:3000/"}]},{"t":"heading","d":2,"v":"Docker up!","c":[{"t":"list_item","d":3,"v":"Now let's dockerize everything."},{"t":"list_item","d":3,"v":"Including hot reloading!"},{"t":"list_item","d":3,"v":"We create <code>Dockerfile</code>"},{"t":"list_item","d":3,"v":"We create .dockerignore"},{"t":"list_item","d":3,"v":"We do <code>rm -rf node_modules</code> since we won't be running locally,<br/>but in the docker container"},{"t":"list_item","d":3,"v":"Now build in the current directory and run","c":[{"t":"list_item","d":4,"v":"<pre><code class=\"language-bash\">docker build -t work:cra .\nSuccessfully built 53d3ebb0de6e\nSuccessfully tagged work:cra\ndocker run -it --rm -v ${PWD}:/app -v /app/node_modules -p 3001:3000 -e CHOKIDAR_USEPOLLING=true work:cra\n</code></pre>"}]},{"t":"list_item","d":3,"v":"Point your browser at http://localdev:3001/<br/>where <code>localdev</code> is the ip returned by <code>docker-machine ip</code><br/>(or else use <code>localhost</code> if you're using Docker Desktop or what have you)"}]},{"t":"heading","d":2,"v":"Test hot reloading","c":[{"t":"list_item","d":3,"v":"When you execute the docker command,<br/>a container is executed based on the image we built","c":[{"t":"list_item","d":4,"v":"<pre><code class=\"language-bash\">docker ps\nCONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES\n177be52c5868 work:cra "docker-entrypoint.s…" 8 minutes ago Up 8 minutes 0.0.0.0:3001->3000/tcp keen_haslett\n</code></pre>"}]},{"t":"list_item","d":3,"v":"Change something in <code>src/App.js</code> and the browser should hot load with the changes"}]},{"t":"heading","d":2,"v":"Use the image for whatever you want!!!","c":[{"t":"list_item","d":3,"v":"For example, this recent article on checking out different approaches towards CSS styling in React<br/><a href=\"https://www.robinwieruch.de/react-css-styling\" title=\"\" target=\"_blank\" rel=\"noopener noreferrer\">How to CSS Style in React</a><br/>And you can just do that so easily with a local development environment in docker"}]}]})</script>
</body>
</html>