Run npm on GitHub so it is deployed into the Cloud site

Author: nul800sebastiaan

.github/workflows/main.yml

@@ -8,9 +8,6 @@ on:
   workflow_dispatch: # Allow manual triggering of the workflow
 
 jobs:
-
-  # Intentionally NOT syncing from Cloud as all patches/updates etc being done manually on GitHub repo
-
   # Package and Deploy to Umbraco Cloud (without saving the artifact as contains sensitive data)
   cloud-deployment:
     name: "Deploy to Cloud"
@@ -23,4 +20,5 @@ jobs:
       formsLicenseKey: ${{ secrets.FORMS_LICENSE_KEY }}
     with:
       pathToWebsite: "src/OpenSourceTest.Site"
-      csprojFile: "OpenSourceTest.Site.csproj"
+      csprojFile: "OpenSourceTest.Site.csproj"
+      pathToFrontendClient: "src/OpenSourceTest.MyExtension/Client"

.github/workflows/package-and-deploy.yml

@@ -9,6 +9,9 @@ on:
       csprojFile:
         required: true
         type: string
+      pathToFrontendClient:
+        required: true
+        type: string
 
     secrets:
       projectId: 
@@ -74,6 +77,20 @@ jobs:
         run: cp cloud.gitignore .gitignore
         shell: bash
 
+      # Setup Node.js for frontend build
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22.x'
+          cache: 'npm'
+          cache-dependency-path: '${{ inputs.pathToFrontendClient }}/package-lock.json'
+
+      # build the frontend assets
+      - name: Build frontend assets
+        working-directory: ${{ inputs.pathToFrontendClient }}
+        run: npm ci && npm run build --if-present
+        shell: bash
+
       # zip everything, except what is defined in the 'cloud.zipignore'
       - name: Zip Source Code
         run: zip -r sources.zip . -x@cloud.zipignore

src/OpenSourceTest.MyExtension/OpenSourceTest.MyExtension.csproj

@@ -34,13 +34,20 @@
     <Folder Include="wwwroot\" />
   </ItemGroup>
 
-  <!-- Restore and build Client files -->
-  <Target Name="RestoreClient" Inputs="Client\package.json;Client\package-lock.json" Outputs="Client\node_modules\.package-lock.json">
+  <!-- Restore and build Client files outside of Cloud environments -->
+  <Target Name="RestoreClient"
+          Inputs="Client\package.json;Client\package-lock.json" 
+          Outputs="Client\node_modules\.package-lock.json">
     <Message Importance="high" Text="Restoring Client NPM packages..." />
     <Exec Command="npm i" WorkingDirectory="Client" />
   </Target>
 
-  <Target Name="BuildClient" BeforeTargets="AssignTargetPaths" DependsOnTargets="RestoreClient" Inputs="@(ClientAssetsInputs)" Outputs="$(IntermediateOutputPath)client.complete.txt">
+  <Target Name="BuildClient" 
+          BeforeTargets="AssignTargetPaths" 
+          DependsOnTargets="RestoreClient" 
+          Inputs="@(ClientAssetsInputs)" 
+          Outputs="$(IntermediateOutputPath)client.complete.txt"
+          Condition="!('$(UMBRACO__CLOUD__ISRUNNINGONCLOUD)' == 'true' OR '$(ENVIRONMENT__PROJECTID)' != '')">
     <Message Importance="high" Text="Executing Client NPM build script..." />
     <Exec Command="npm run build" WorkingDirectory="Client" />
     <ItemGroup>