- Ensure that you have NPM installed on your Mac system
- Install Docker Desktop for Mac
Visit https://www.docker.com/get-started/ to download Docker Desktop for Mac and install it in your system.
Once the installation gets completed, click “About Docker Desktop” to verify the version of Docker running on your system.
If you follow the above steps, you will always find the latest version of Docker desktop installed on your system.
1. Without Docker Desktop
Run the below command:
npx create-react-app whalified
Creating a new React app in /Users/ajeetraina/projects/whalified. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts with cra-template... ... removed 1 package and audited 1419 packages in 5.867s 169 packages are looking for funding run `npm fund` for details found 1 moderate severity vulnerability run `npm audit fix` to fix them, or `npm audit` for details Created git commit. Success! Created whalified at /Users/ajeetraina/projects/whalified Inside that directory, you can run several commands: npm start Starts the development server. npm run build Bundles the app into static files for production. npm test Starts the test runner. npm run eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back! We suggest that you begin by typing: cd whalified npm start Happy hacking!
Starting the React app
cd whalified yarn start
It will open up the first react app over the browser at port 3000, if not occupied.
2. With Docker
Step 1. Create a Dockerfile
FROM node:15.4 as build WORKDIR /react-app COPY package*.json . RUN yarn install COPY . . RUN yarn run build FROM nginx:1.19 COPY ./nginx/nginx.conf /etc/nginx/nginx.conf COPY --from=build /react-app/build /usr/share/nginx/html
Step 2. Create a dockerignore
Now, let’s configure the .dockerignorefile . Copy and paste the below snippet.
Step 3. Create nginx.conf file
Create a folder nginx/ and then add the below content in nginx.conf file:
Step 5. Build the Docker Image
docker build -t ajeetraina/firstreact-app .
Step 6. Run the app
docker run -d -p 80:80 ajeetraina/firstreact-app
Access the app