Merge pull request #2700 from telerik/deploy-astro-app

Deploy Astro app to github pages

Author: boryanaT

.github/dependabot.yml

@@ -36,6 +36,24 @@ updates:
     labels:
       - "Dependencies"
 
+    - package-ecosystem: "npm"
+    directory: "/examples/kendo-react-e-commerce-astro-app"
+    schedule:
+      interval: "daily"
+    groups:
+      kendo-dependencies:
+        patterns:
+          - '@progress/kendo-*'
+    allow:
+      - dependency-name: '@progress/kendo-*'
+    commit-message:
+      prefix: "chore:"
+    reviewers:
+      - "telerik/kendo-react-devs"
+      - "telerik/kendo-react-support"
+    labels:
+      - "Dependencies"
+
   - package-ecosystem: "npm"
     directory: "/examples/kendo-react-build-a-sales-dashboard"
     schedule:

.github/workflows/ci.yml

@@ -32,7 +32,9 @@ jobs:
             ecommerce-jewellery-store:
               - 'examples/ecommerce-jewellery-store/**'
             kendo-react-build-a-sales-dashboard:
-              - 'examples/kendo-react-build-a-sales-dashboard/**'    
+              - 'examples/kendo-react-build-a-sales-dashboard/**'
+            kendo-react-e-commerce-astro-app:
+              - 'examples/kendo-react-e-commerce-astro-app/**'    
             kendo-react-file-manager:
               - 'examples/kendo-react-file-manager/**'
             kendo-react-finance-portfolio:
@@ -72,6 +74,13 @@ jobs:
           npm ci
           npm run build
 
+      - name: Build Ecommerce Astro app
+        working-directory: ./examples/kendo-react-e-commerce-astro-app
+        if: steps.changes.outputs.kendo-react-e-commerce-astro-app == 'true'
+        run: |
+          npm ci
+          npm run build
+
       - name: Build A Sales Dashboard app
         working-directory: ./examples/kendo-react-build-a-sales-dashboard
         if: steps.changes.outputs.kendo-react-build-a-sales-dashboard == 'true'

examples/kendo-react-e-commerce-astro-app/astro.config.mjs

@@ -3,4 +3,8 @@ import react from '@astrojs/react';
 
 export default defineConfig({
   integrations: [react()],
+  base: `/kendo-react/kendo-react-e-commerce-astro-app/`,
+  build: {
+    outDir: 'build'
+  },
 });

examples/kendo-react-e-commerce-astro-app/package-lock.json

@@ -2,12 +2,15 @@
   "name": "kendo-react-e-commerce-astro-app",
   "type": "module",
   "version": "0.0.1",
+  "homepage": "https://telerik.github.io/kendo-react/kendo-react-e-commerce-astro-app/",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
     "build": "astro check && astro build",
     "preview": "astro preview",
-    "astro": "astro"
+    "astro": "astro",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build"
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
@@ -37,7 +40,11 @@
     "@progress/kendo-theme-default": "^10.0.1",
     "@progress/kendo-theme-utils": "^10.0.1",
     "astro": "^4.16.6",
+    "gh-pages": "^6.1.1",
     "nanostores": "^0.11.3",
     "typescript": "^5.6.3"
+  },
+  "overrides": {
+    "prettier": "^3.0.0"
   }
 }

examples/kendo-react-e-commerce-astro-app/package.json

@@ -30,15 +30,15 @@ export const AllProductsListView = () => {
 
   const cards: CardDescriptor[] = [
     {
-      img: "/necklace_1.jfif",
+      img: "/kendo-react/kendo-react-e-commerce-astro-app/necklace_1.jfif",
       collectionText: 'Collection "SERENE"',
     },
     {
-      img: "/ring_1.jfif",
+      img: "/kendo-react/kendo-react-e-commerce-astro-app/ring_1.jfif",
       collectionText: 'Collection "AURELIA"',
     },
     {
-      img: "/1111.jfif",
+      img: "/kendo-react/kendo-react-e-commerce-astro-app/1111.jfif",
       collectionText: 'Collection "RAVINA"',
     },
   ];
@@ -61,7 +61,7 @@ export const AllProductsListView = () => {
             title={title}
             subtitle={subtitle}
             contentText={contentText}
-            img="/bracelets.png"
+            img="/kendo-react/kendo-react-e-commerce-astro-app/bracelets.png"
             order={order}
             link={null}
           />

examples/kendo-react-e-commerce-astro-app/public/vitageWatch.jpg renamed to examples/kendo-react-e-commerce-astro-app/public/vintageWatch.jpg

@@ -5,7 +5,7 @@ export const BackgroundImage = (props: BackgroundImageProps) => {
   const { img, title, subtitle, buttonText } = props;
 
   const onButtonClick = () => {
-    window.location.href="/products"
+    window.location.href="/kendo-react/kendo-react-e-commerce-astro-app/products"
   }
 
   return (

examples/kendo-react-e-commerce-astro-app/src/components/AllProductsListView.tsx

@@ -6,7 +6,7 @@ import { CardListProps } from "../data/types";
 export const CardsList = (props: CardListProps) => {
 
   const onButtonClick = (index: number) => {
-    window.location.href=`/product/${index + 1}`;
+    window.location.href=`/kendo-react/kendo-react-e-commerce-astro-app/product/${index + 1}`;
   };
 
   return (

examples/kendo-react-e-commerce-astro-app/src/components/BackgroundImage.tsx

@@ -19,7 +19,7 @@ import { Label } from '@progress/kendo-react-labels';
 
 const Contacts: React.FC = () => {
   const onSubmitClick = () => {
-    window.location.href = "/thankyou";
+    window.location.href = "/kendo-react/kendo-react-e-commerce-astro-app/thankyou";
   };
 
   return (
@@ -73,7 +73,7 @@ const Contacts: React.FC = () => {
           </div>
           <div className="k-col-span-5 k-col-start-8 k-d-flex k-flex-col k-align-items-start">
             <img
-              src="/contactsImage.png"
+              src="/kendo-react/kendo-react-e-commerce-astro-app/contactsImage.png"
               alt="Contacts"
               style={{
                 maxWidth: '630px',