The latest articles on DEV Community by Edgar Gonzalez (@edgargonzalez). https://dev.to/edgargonzalez https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F126497%2F17990eac-4f10-488b-a764-5370d9da8d14.jpg https://dev.to/edgargonzalez en Edgar Gonzalez Fri, 30 Aug 2019 21:04:45 +0000 https://dev.to/edgargonzalez/docker-image-for-create-react-app-27bf https://dev.to/edgargonzalez/docker-image-for-create-react-app-27bf <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--noWyiiA0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/2gc3jaeykm3tq27tff3b.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--noWyiiA0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/2gc3jaeykm3tq27tff3b.png" alt="Alt Text" width="542" height="242"></a></p> <p>Because I'm a huge fan of dockerizing all of my development environments, I don't want to install <code>node</code>, <code>npm</code> (or <code>yarn</code>), and <a href="https://github.com/facebook/create-react-app"><code>create-react-app</code></a><br> in my machine, not even for generating a <code>create-react-app</code> scaffold.</p> <p>For that reason I created a <a href="https://hub.docker.com/r/edgargonzalez/create-react-app">simple docker image</a>, that does only one thing, installs <code>create-react-app</code> and generates a <code>create-react-app</code> scaffold.</p> <h2> Usage </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>$ docker run --rm -v $PWD:/app edgargonzalez/create-react-app my-app Creating a new React app in /app/my-app. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts... ... Happy hacking! </code></pre> </div> <h2> Github repo </h2> <p>The code for the Docker image lives in the following repository:</p> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--i3JOwpme--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/github-logo-ba8488d21cd8ee1fee097b8410db9deaa41d0ca30b004c0c63de0a479114156f.svg" alt="GitHub logo"> <a href="https://github.com/edgar"> edgar </a> / <a href="https://github.com/edgar/docker-create-react-app"> docker-create-react-app </a> </h2> <h3> Docker image for create-react-app </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <h1> Docker image for create-react-app</h1> <p>A docker image to avoid installing <code>node</code>, <code>npm</code> (<code>yarn</code>), and <a href="https://github.com/facebook/create-react-app"><code>create-react-app</code></a> in a development machine, to generate a <code>create-react-app</code> scaffold.</p> <h2> Usage</h2> <div class="snippet-clipboard-content position-relative overflow-auto"><pre><code>$ docker run --rm -v $PWD:/app edgargonzalez/create-react-app my-app Creating a new React app in /app/my-app. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts... ... Happy hacking! </code></pre></div> </div> </div> <br> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/edgar/docker-create-react-app">View on GitHub</a></div> <br> </div> <br> docker react