Check here the Material-UI docs: https://material-ui.com/

• Install dependencies: npm install
• Start and watch app: npm start
• Build the app: npm build
• Run the tests: npm test

Make sure you have Docker installed before using it ;)

For the full experience to test locally how it runs on productions:

• remove the line "homepage": "https://reconnectcmi.github.io/search-bar/" from the package.json
• Create a image from the Docker file: docker build . -t searchbar:latest
• Run the container: docker run --publish 8080:8080 searchbar:latest
• Go to http://localhost:8080/ and enjoy :)

This is really handy if you have issues with Node or NPM or something like that. If you change your code it wil automaticly change in the container that is running.

After running the command you are in the command line of the container. In there you can just simply run npm start of whatever you want.

Command: docker run -ite ${PWD}:/code node:14.16.0-alpine sh

If you are using routing and are using Github pages to host you app, you have to add the basename in the routing. This is because Github pages is not deploying it at the root but one level deeper.

This is also why in the package.json there is a field: "homepage": "https://<username>.github.io/<project>/",

To also get this to work with routing you need to add the basename to the router. From: <Router> To: <Router basename={process.env.PUBLIC_URL}> The value process.env.PUBLIC_URL is /<project>. The basename property allows us to specify the actual base URL for the routes which, in this case, will be the sub-directory.

This is not needed to run locally or something, just when you ever want to create your own app you have to go through these steps to start fresh. Handy to have right? :)

• Create the react app: npx create-react-app my-app
• Install Material-UI: npm install @material-ui/core
• Install Material-UI icons: npm install @material-ui/icons