change the videos file

Author: Shadi38

.github/workflows/front-end.yml

@@ -5,20 +5,20 @@ name: Upload Frontend
   push:
     branches:
       - main
-    # paths: null
+    
 jobs:
   build:
     runs-on: ubuntu-latest
     env:
       NODE_OPTIONS: --openssl-legacy-provider
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3   #GitHub-provided checkout action to clone my repository into the runner.
+        uses: actions/checkout@v3   #GitHub-provided checkout action to clone the repository into the runner.
       - name: Set up Node.js
-        uses: actions/setup-node@v3  #Installs Node.js in the runner, so JavaScript commands can be executed.
+        uses: actions/setup-node@v3  #Installs Node.js in the runner, so JavaScript commands(npm install and npm run build) can be executed.
       - name: Install dependencies
-        run: npm install
-        working-directory: ./client
+        run: npm install             #npm install command should be executed inside the ./client folder where your frontend project resides.
+        working-directory: ./client 
       - name: Build app
         run: npm run build
         working-directory: ./client
@@ -29,6 +29,7 @@ jobs:
           aws-secret-access-key: '${{ secrets.AWS_SECRET_ACCESS_KEY }}'
           aws-region: eu-west-2
       - name: Deploy static site to S3 bucket
-        run: aws s3 sync ./client/build s3://reccomendationsh --delete  #Upload the build to S3 (aws s3 sync)
+      #uses the AWS CLI command "aws s3 sync" to upload the built frontend files (in ./client/build) to S3 bucket (s3://reccomendationsh).
+        run: aws s3 sync ./client/build s3://reccomendationsh --delete  
 
 

Docker-compose.yml

@@ -7,6 +7,8 @@ services:
     container_name: nice_williamson
     restart: always
     ports:
-    #we map the container port to the host port -- host:container
+    #we map the host(my laptop) port to the container port -- host:container
       - "3000:3000"
-    
+    #when I visit http://localhost:3000, the request goes to:
+    # Host port 3000
+    #Docker forwards it to container port 3000

Dockerfile

@@ -1,10 +1,4 @@
-# FROM node:18-alpine
-# WORKDIR /app/server
-# COPY package*.json ./
 
-# RUN npm install
-# COPY /server .
-# CMD ["node","server.js"]
 FROM node:18-alpine
 
 # Set the working directory to /app/server
@@ -19,8 +13,8 @@ RUN npm install
 # Copy the rest of the server files
 COPY server/ .
 
-# Expose port 3000
+# the app run on port 3000 (container listen on this port)
 EXPOSE 3000
 
-# Define the command to run your app
+# Define the command to run the app
 CMD ["node", "server.js"]

client/src/App.js

@@ -46,6 +46,11 @@ function App() {
     }
   }
 
+  const handleClick = (e) => {
+    e.preventDefault();
+    setShowVideos(true);
+  }
+
   return (
     <div className="App">
       <header className="appHeader">
@@ -71,7 +76,14 @@ function App() {
           </button>
         </div>
         <div style={{ backgroundColor: "#55BCC9" }}></div>
-        <Link
+        <button onClick={()=>handleClick}>Videos</button>
+        <Videos
+              show={showVideos}
+              setShow={setShowVideos}
+              loadVideo={loadVideo}
+              setLoadVideo={setLoadVideo}
+            />
+        {/* <Link
           to="/videos"
           style={{
             color: "#FC4445",
@@ -82,9 +94,9 @@ function App() {
           onClick={() => setShowVideos(true)}
         >
           Videos
-        </Link>
+        </Link> */}
       </nav>
-      <Routes>
+      {/* <Routes>
         <Route
           path="/videos"
           element={
@@ -96,7 +108,8 @@ function App() {
             />
           }
         />
-      </Routes>
+      </Routes> */}
+
     </div>
   );
 }