Update README and add env config file

ballerina-guides · May 1, 2024 · 6f3b99a · 6f3b99a
1 parent 2254515
commit 6f3b99a
Show file tree

Hide file tree

Showing 12 changed files with 66 additions and 61 deletions.
diff --git a/session-3/frontend/.env b/session-3/frontend/.env
@@ -0,0 +1,6 @@
+VITE_GRAPHQL_ENDPOINT_HTTP=http://localhost:9000/reviewed
+VITE_GRAPHQL_ENDPOINT_WS=ws://localhost:9000/reviewed
+
+# For SSL Enabled endpoints
+# VITE_GRAPHQL_ENDPOINT_HTTP=https://localhost:9000/reviewed
+# VITE_GRAPHQL_ENDPOINT_WS=wss://localhost:9000/reviewed
diff --git a/session-3/frontend/.gitignore b/session-3/frontend/.gitignore
@@ -10,7 +10,6 @@ lerna-debug.log*
 node_modules
 dist-ssr
 *.local
-.env
 
 # Editor directories and files
 .vscode/*

diff --git a/session-3/frontend/README.md b/session-3/frontend/README.md
@@ -2,64 +2,62 @@
 
 ## Overview
 
-This is the frontend implementation for Reviewed!. It consists of a React application that consumes Ballerina GraphQL services using Apollo Client.
+This is the frontend implementation for Reviewed!. It consists of a React application that works with a Ballerina GraphQL backend. It uses the Apollo Client on the frontend to connect to the GraphQL backend.
 
-## Prerequisites
+## Get Started
 
-- [Node.js version: v20.12.0](https://nodejs.org/en/blog/release/v20.12.0)
-- npm (version 10.5.0 or later)
+There are two ways to instantly serve up the frontend application:
 
-## Getting Started
-
-1. Install the required dependencies by running the following command:
+1. Serve the application using NodeJS.
 
 ```bash
-npm install
+npx serve dist --single --listen 3000
 ```
 
-2. Create a `.env` file and add the following environment variables:
+2. Serve the application using Python.
 
 ```bash
-VITE_GRAPHQL_ENDPOINT_HTTP=https://localhost:9000/reviewed
-VITE_GRAPHQL_ENDPOINT_WS=wss://localhost:9000/reviewed
+python -m http.server 3000 --directory dist
 ```
 
-3. Start the frontend application by running the following command:
+> Note: URL rewriting is not supported when serving the production build using Python. Also, the contents of ErrorPage.jsx will not render for invalid URLs.
 
-```bash'
-npm run dev
-```
+- Open the browser and navigate to: [http://localhost:3000](http://localhost:3000)
 
-4. Open the browser and navigate to: [http://localhost:3000](http://localhost:3000)
+## Running the Application in Development Mode
 
-## Deployment
+### Prerequisites
 
-1. Create a production build by running the following command (Optional):
+Install the following software.
 
-```bash
-npm run build
-```
+- [Node.js (version v20.12.0)](https://nodejs.org/en/blog/release/v20.12.0)
+- [npm (version 10.5.0 or later)](https://www.npmjs.com/package/npm)
 
-2. Serve the production build by running the following command:
+### Steps
 
-- Serving the production build using NodeJS:
+1. Install the required project dependencies by running the following command.
 
-  - Run the following command:
+```bash
+npm install
+```
 
-  ```bash
-  npm run preview
-  ```
+2. To change the backend endpoints, update the environment variables in the `.env` file.
 
-  - Open the browser and navigate to: [http://localhost:3000](http://localhost:3000)
+```.env
+VITE_GRAPHQL_ENDPOINT_HTTP=http://localhost:9000/reviewed
+VITE_GRAPHQL_ENDPOINT_WS=ws://localhost:9000/reviewed
+```
 
-- Serving the production build using python:
+3. Start the application.
 
-  - Run the following command:
+```bash'
+npm run dev
+```
 
-  ```bash
-  py -m http.server 3000 --directory dist
-  ```
+4. Open the browser and navigate to [http://localhost:3000](http://localhost:3000).
 
-  - Open the browser and navigate to: [http://localhost:3000](http://localhost:3000)
+5. To deploy the application, create a production build by running the following command.
 
-  > Note: URL rewriting is not supported when serving the production build using python. (contents of ErrorPage.jsx will not render for invalid URLs)
+```bash
+npm run build
+```
diff --git a/...-3/frontend/dist/assets/index-D-1SjpiQ.js → ...-3/frontend/dist/assets/index-CelfHX13.js b/...-3/frontend/dist/assets/index-D-1SjpiQ.js → ...-3/frontend/dist/assets/index-CelfHX13.js
diff --git a/session-3/frontend/dist/index.html b/session-3/frontend/dist/index.html
@@ -1,17 +1,18 @@
-<!doctype html>
-<html lang="en">
-
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Reviewed!</title>
-    <script type="module" crossorigin src="/assets/index-D-1SjpiQ.js"></script>
+<!doctype html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Reviewed!</title>
+    <script type="module" crossorigin src="/assets/index-CelfHX13.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-Cp-0kh0u.css">
-  </head>
-
-  <body>
-    <div id="root"></div>
-  </body>
-
-</html>
+  </head>
+
+  <body>
+    <div id="root"></div>
+
+  </body>
+
+</html>
diff --git a/session-3/frontend/index.html b/session-3/frontend/index.html
@@ -13,4 +13,4 @@
     <script type="module" src="/src/main.jsx"></script>
   </body>
 
-</html>
+</html>
diff --git a/session-3/frontend/src/components/BallerinaCircularProgress.jsx b/session-3/frontend/src/components/BallerinaCircularProgress.jsx
@@ -51,4 +51,4 @@ export default function BallerinaCircularProgress({ size, thickness }) {
             />
         </Box>
     );
-}
+}
diff --git a/session-3/frontend/src/components/Footer.jsx b/session-3/frontend/src/components/Footer.jsx
@@ -32,4 +32,4 @@ export default function Footer() {
             ©2024 WSO2 LLC
         </Typography>
     )
-}
+}
diff --git a/session-3/frontend/src/components/Header.jsx b/session-3/frontend/src/components/Header.jsx
@@ -79,4 +79,4 @@ export default function Header() {
             </Container>
         </Box>
     )
-}
+}
diff --git a/session-3/frontend/src/pages/AuthorPage.jsx b/session-3/frontend/src/pages/AuthorPage.jsx
@@ -208,4 +208,4 @@ const PlaceCard = ({ place, review, rating }) => {
             </CardContent>
         </Card>
     )
-}
+}
diff --git a/session-3/frontend/src/pages/ErrorPage.jsx b/session-3/frontend/src/pages/ErrorPage.jsx
@@ -57,4 +57,4 @@ export default function Errorpage() {
             </Box>
         </PageContent>
     )
-}
+}
diff --git a/session-3/frontend/src/pages/PlacePage.jsx b/session-3/frontend/src/pages/PlacePage.jsx
@@ -230,6 +230,7 @@ const PlaceDetails = ({ place, subscribeToNewReviews }) => {
                 </Grid>
 
                 <Typography
+                    marginTop="2rem"
                     textAlign="center"
                     component="h4"
                     variant="h4">
@@ -421,4 +422,4 @@ const UserLikeCount = ({ rating, handleRatingChange }) => {
             {stars}
         </Stack>
     )
-}
+}