Note for ReactJS developers

The source code for the ReactJS web application is in the exercise-rekognition folder.

Due to the resources associated with this installation...

cd photo-app

yarn start 

Note

Once Compiled successfully Yarn will direct you to view the application On Your Network at your specified Private IPv4 address, substitute this for your Public IPv4 address.

From a browser, connect to the app <x.x.x.x>:3000

Press Ctrl-C to shutdown server.

npm i aws

Update the following code below into the package.json file.

Note

Dependencies must be as reflected here, however you may update the version as necessary.

"name": "photo-app-yarn",
  "version": "0.1.1",
  "private": true,
  "dependencies": {
    "@awsui/components-react": "^3.0.523",
    "@awsui/global-styles": "^1.0.15",
    "@testing-library/dom": "^10.4.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "aws": "^0.0.3-2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"

Now, run;

npm audit

npm audit fix --force

yarn start

Note

If Yarn fails once you try to start with the appointed exercise public src and updated package.json, from the application folder, you must first run yarn add react-scripts …, In order to recommit dependencies or update package.json you must rm -rf node_modules yarn.lock then run yarn add react-scripts …

yarn start

Address if there are any compiled warnings, then create the min-width for the body element in the node_modules/@awsui/global-styles/index.css file.

body {
  margin: 0;
  min-width: 400px;
}

Again, back in photo-app run;

yarn start

Then Ctrl-C again. Now, try;

yarn build

You must;

yarn global add serve

Finally, run production with;

serve -s build

Note

Once again after being Compiled successfully substitute your Public IPv4 address for the specified Private IPv4 address On Your Network.

Visit the site <x.x.x.x>:3000

Press Ctrl-C to shutdown server. Now update your repository to the following package.json code below. Don’t forget to update the node release and all other details to reflect your repo.

"development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "repository": {
    "type": "git",
    "url": "http://github.com/acme/photo-app-yarn"
  },
  "keywords": [
    "ReactJS with Yarn"
  ],
  "author": "John Doe <[email protected]>",
  "license": "MIT",
  "engines": {
    "node": ">18.0"
  },
  "homepage": "http://github.com/acme/photo-app-yarn",
  "licenses": [
    {
      "type": "MIT",
      "url": "http://github.com/acme/photo-app-yarn/LICENSE"
    }
  ],
  "contributors": [
    {
      "name": "John Doe",
      "email": "[email protected]",
      "url": "https://github.com/acme"
    }
  ]
}

photo-app-yarn

ReactJS with Yarn

Installation

Install via YARN:

node --max-old-space-size=8000 $(which yarn) create react-app photo-app  

License

This project is licensed under the terms of the MIT license.