Deployment instruction using docker added

2022-06-30 02:12:35 +10:00
5 changed files with 16 additions and 27 deletions
@@ -1,6 +1,4 @@
-# Build a Random Quote Machine
-
-**Demo:** [random-quote-machine.radii.page](https://random-quote-machine.radii.page/)
+# Build-a-Random-Quote-Machine

 **Profile:** [https://www.freecodecamp.org/radii](https://www.freecodecamp.org/radii)

@@ -15,24 +13,20 @@ cd random-quote-machine
 npm install
 npm run build
 cd ..
-DOCKER_BUILDKIT=1 docker build -t radii/random-quote-machine:latest -f ./dockerfile ./random-quote-machine/build
+docker build -t radii/random-quote-machine:latest -f ./dockerfile .
 docker run -p 8081:80 -it radii/random-quote-machine
 ```

-Access WebApp at [http://localhost:8081](http://localhost:8081)
-
-Note: you may replace `8081` with any other port number where you wish to make service available.
-
 ## Run tests as:
-After building, go to to `public` sub-directory and edit `index.html` file and insert bellow code snippet immediately before closing `</body>` tag:
+After building, go to to `build` sub-directory and edit `index.html` file and insert bellow code snippet immediately before closing `</body>` tag:

 ```{html}
-<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
+<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>`
 ```

-Than start development instance as:
+Than serve as:

 ```{bash}
-npm start
+serve -s build
 ```
-You should now see a hamburger on top-left of page. Tap/click it than select test suite `Random Quote Machine`. `Run Tests` and observe results.
+You should now see a hamburger on left of page. Tap/click it than select test suite `Random Quote Machine`. `Run Tests` and observe results.
@@ -1,9 +0,0 @@
-version: "2"
-
-services:
-  random-quote-machine:
-    build: .
-    image: radii/random-quote-machine:latest
-    ports:
-      - "127.0.0.1:8081:80"
-    restart: always 
@@ -1,3 +1,4 @@
 FROM nginx

-COPY --chmod=755 ./ /usr/share/nginx/html
+COPY nginx.conf /
+COPY random-quote-machine/build /usr/share/nginx/html
@@ -5,7 +5,10 @@
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Random quote machine" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
@@ -21,7 +24,7 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
-    <title>Random Quote Machine</title>
+    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -57,14 +57,14 @@ class App extends React.Component {
              </p>
              <div className="row justify-content-center">
                <button
-                  className={`btn col-10 mb-2 mb-sm-0 col-sm-5 col-md-4 col-lg-3 col-xl-2 ${this.state.randomBackgroundColorClass}`}
+                  className={`btn col-5 col-sm-5 col-md-4 col-lg-3 col-xl-2 ${this.state.randomBackgroundColorClass}`}
                  id="new-quote"
                  onClick={this.handleNewQuote}
                >
                  <FontAwesomeIcon icon={faShuffle} /> Random Quote
                </button>
                <a
-                  className="btn bg-color-twitter col-10 col-sm-5 col-md-4 col-lg-3 col-xl-2 offset-sm-1"
+                  className="btn bg-color-twitter col-5 col-sm-5 col-md-4 col-lg-3 col-xl-2 offset-1"
                  href={`https://twitter.com/intent/tweet?text="${encodeURI(
                    `${this.state.randomQuote}"\n- By ${this.state.randomAuthor}\n`
                  )}&hashtags=quotes,freeCodeCamp`}