freeCodeCamp.org-Front-End-Dev-Libraries/Random-Quote-Machine
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: freeCodeCamp.org-Front-End-Dev-Libraries/Random-Quote-Machine:master
Branches Tags
freeCodeCamp.org-Front-End-Dev-Libraries/Random-Quote-Machine:master
..
compare: freeCodeCamp.org-Front-End-Dev-Libraries/Random-Quote-Machine:42dd806185f43e1ad9f219a3332a22ca304c6548
Branches Tags
freeCodeCamp.org-Front-End-Dev-Libraries/Random-Quote-Machine:master

1 Commits
master .. 42dd806185

Author SHA1 Message Date
radii 42dd806185 Deployment instruction using docker added 2022-06-30 02:12:35 +10:00
5 changed files with 16 additions and 27 deletions
Expand all files Collapse all files
README.md
+7 -13
View File
@@ -1,6 +1,4 @@
# Build a Random Quote Machine # Build-a-Random-Quote-Machine
**Demo:** [random-quote-machine.radii.page](https://random-quote-machine.radii.page/)
**Profile:** [https://www.freecodecamp.org/radii](https://www.freecodecamp.org/radii) **Profile:** [https://www.freecodecamp.org/radii](https://www.freecodecamp.org/radii)
@@ -15,24 +13,20 @@ cd random-quote-machine
npm install npm install
npm run build npm run build
cd .. 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 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: ## 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} ```{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} ```{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.
docker-compose.yml
-9
View File
@@ -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
dockerfile
+2 -1
View File
@@ -1,3 +1,4 @@
FROM nginx FROM nginx
COPY --chmod=755 ./ /usr/share/nginx/html COPY nginx.conf /
COPY random-quote-machine/build /usr/share/nginx/html
random-quote-machine/public/index.html
+5 -2
View File
@@ -5,7 +5,10 @@
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <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" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- <!--
manifest.json provides metadata used when your web app is installed on a 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. 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`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>Random Quote Machine</title> <title>React App</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
random-quote-machine/src/App.js
+2 -2
View File
@@ -57,14 +57,14 @@ class App extends React.Component {
</p> </p>
<div className="row justify-content-center"> <div className="row justify-content-center">
<button <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" id="new-quote"
onClick={this.handleNewQuote} onClick={this.handleNewQuote}
> >
<FontAwesomeIcon icon={faShuffle} /> Random Quote <FontAwesomeIcon icon={faShuffle} /> Random Quote
</button> </button>
<a <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( href={`https://twitter.com/intent/tweet?text="${encodeURI(
`${this.state.randomQuote}"\n- By ${this.state.randomAuthor}\n` `${this.state.randomQuote}"\n- By ${this.state.randomAuthor}\n`
)}&hashtags=quotes,freeCodeCamp`} )}&hashtags=quotes,freeCodeCamp`}