Merge pull request #78 from wally-yawn/migrate_to_vite

Migrate to vite

Author: devklynch

.env

@@ -0,0 +1,3 @@
+# .env
+VITE_BASE_URL=http://localhost:3000/api/v1
+VITE_GARDEN_ID=1

.github/workflows/ci.yml

@@ -13,14 +13,14 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Install dependencies
         run: npm ci
 
       - name: Run Cypress tests
         uses: cypress-io/github-action@v6
         with:
-          start: npm start
-          wait-on: 'http://localhost:3001'
+          start: npm run dev
+          wait-on: 'http://localhost:5173'
           wait-on-timeout: 90

README.md

@@ -40,6 +40,27 @@ The planning, preparation, and development of this project were completed over t
 ![App Demo starting](./readme_assets/Demo_start.gif)
 ![App Demo ending](./readme_assets/Demo_end.gif)
 
+## Project Setup (Cloning from GitHub)
+This project is built using Vite and React. To get started:
+
+1. Clone the repository: `git clone git@github.com:wally-yawn/smart_gardening_fe.git`
+2. cd your-repo-name
+3. Install dependencies: `npm install`
+4. Start the development server: `npm run dev`
+
+## Migrating from Create React App (CRA) to Vite
+If you previously have set this project up as a CRA project you will need to follow these steps to migrate it to Vite:
+
+1. Remove CRA-specific packages
+`npm uninstall react-scripts`
+2. Install Vite 
+`npm install --save-dev vite`
+3. Install React plugin
+`npm install @vitejs/plugin-react`
+4. Install any other libraries
+`npm install`
+5. Note that to start the development server the command is now `npm run dev`
+
 ## Team Members
 #### Wally Wallace
 - [LinkedIn Profile](https://www.linkedin.com/in/wally--wallace)

cypress/e2e/errors.cy.js

@@ -32,7 +32,7 @@ describe("gardenPlantErrors", () => {
       fixture: "404_error",
     });
 
-    cy.visit("http://localhost:3001");
+    cy.visit("http://localhost:5173");
   })
 
   it("display an error if fetching garden plants fails", () => {

cypress/e2e/gardeninput.cy.js

@@ -22,7 +22,7 @@ describe("tool tip test", () => {
   })
 
   it("should display the tool tip on hover", () => {
-    cy.visit("http://localhost:3001/");
+    cy.visit("http://localhost:5173/");
     cy.get(".info-icon").trigger("mouseover");
     cy.get("#my-tooltip")
       .should("be.visible")

cypress/e2e/gardens.cy.js

@@ -14,7 +14,7 @@ describe("Gardens Page", () => {
       fixture: 'lottie'
     })
 
-    cy.visit("http://localhost:3001/mygarden");
+    cy.visit("http://localhost:5173/mygarden");
     cy.wait("@getPlants");
   });
 
@@ -27,7 +27,7 @@ describe("Gardens Page", () => {
 
     it("should show empty state when no plants exist", () => {
       cy.intercept("GET", "http://localhost:3000/api/v1/1/plants", { body: { plants: [] } }).as("emptyGarden");
-      cy.visit("http://localhost:3001/mygarden");
+      cy.visit("http://localhost:5173/mygarden");
       cy.wait("@emptyGarden");
       cy.get('[data-testid="empty-garden"]').should("be.visible").and("contain", "No Plants Saved Yet");
     });

cypress/e2e/header.cy.js

@@ -29,7 +29,7 @@ describe("Header Component", () => {
       {
         fixture: "gardens",
       };
-    cy.visit("http://localhost:3001");
+    cy.visit("http://localhost:5173");
   });
 
   it("displays the welcome message on the main page", () => {
@@ -43,14 +43,14 @@ describe("Header Component", () => {
   });
 
   it("displays the page does not exist message", () => {
-    cy.visit("http://localhost:3001/test", { failOnStatusCode: false });
+    cy.visit("http://localhost:5173/test", { failOnStatusCode: false });
 
     cy.get("h1").contains("Oops! This page doesn’t exist. 🌱");
   });
 
   it("displays the home button on non-main pages and navigates back home", () => {
-    cy.visit("http://localhost:3001/mygarden");
+    cy.visit("http://localhost:5173/mygarden");
     cy.get(".home-btn").should("exist").click();
-    cy.url().should("eq", "http://localhost:3001/");
+    cy.url().should("eq", "http://localhost:5173/");
   });
 });

cypress/e2e/recommendations.cy.js

@@ -51,7 +51,7 @@ describe("recommendations", () => {
     cy.intercept("PATCH", "http://localhost:3000/api/v1/1", {
       fixture: "gardens",
     });
-    cy.visit("http://localhost:3001/");
+    cy.visit("http://localhost:5173/");
   });
 
   it("shows the main page before a search has not been completed with a default garden", () => {

cypress/e2e/saveplant.cy.js

@@ -45,7 +45,7 @@ describe("Garden Plant Saving Functionality with Recommendation", () => {
       }
     );
 
-    cy.visit("http://localhost:3001/");
+    cy.visit("http://localhost:5173/");
   });
 
   it("runs a recommendation, saves a plant, and verifies it appears in the garden", () => {
@@ -61,7 +61,7 @@ describe("Garden Plant Saving Functionality with Recommendation", () => {
     cy.get(".plant-cards > :nth-child(1) .button-disabled")
       .contains("Plant Saved")
       .should("be.disabled");
-    cy.visit("http://localhost:3001/mygarden");
+    cy.visit("http://localhost:5173/mygarden");
     cy.get(".all-plant-cards").contains("Strawberry");
   });
 

fix-imports.js

@@ -0,0 +1,45 @@
+// fix-imports.js
+const fs = require('fs');
+const path = require('path');
+
+const SRC_DIR = path.join(__dirname, 'src');
+
+// Recursively scan a folder
+function scanFolder(folder) {
+  const files = fs.readdirSync(folder);
+
+  files.forEach((file) => {
+    const fullPath = path.join(folder, file);
+    const stat = fs.statSync(fullPath);
+
+    if (stat.isDirectory()) {
+      scanFolder(fullPath);
+    } else if (stat.isFile() && (file.endsWith('.js') || file.endsWith('.jsx'))) {
+      let content = fs.readFileSync(fullPath, 'utf-8');
+      let updated = content;
+
+      // Match import statements
+      updated = updated.replace(
+        /import\s+([^\n]+?)\s+from\s+['"](.+?)['"]/g,
+        (match, imports, importPath) => {
+          // Only update relative imports
+          if (importPath.startsWith('.') && !importPath.endsWith('.css') && !importPath.endsWith('.json')) {
+            const resolvedPathJs = path.resolve(path.dirname(fullPath), importPath + '.js');
+            if (fs.existsSync(resolvedPathJs)) {
+              return `import ${imports} from '${importPath}.jsx'`;
+            }
+          }
+          return match;
+        }
+      );
+
+      if (updated !== content) {
+        fs.writeFileSync(fullPath, updated, 'utf-8');
+        console.log(`Updated imports in: ${fullPath}`);
+      }
+    }
+  });
+}
+
+scanFolder(SRC_DIR);
+console.log('Done fixing imports to include .jsx.');