create-sitecore-jss 22.5.0-canary.7 → 22.5.0-canary.9

package/dist/templates/angular-xmcloud/.env

@@ -7,9 +7,6 @@ SITECORE_EDGE_CONTEXT_ID=
 
 # ========== XM Cloud Proxy ===========
 
-# Your XM Cloud Proxy hostname is needed to build the app and execute the client-side requests against the proxy server.
-PROXY_HOST=http://localhost:3000
-
 # Your XM Cloud Proxy server path is needed to build the app. The build output will be copied to the proxy server path.
 # Use a relative unix style path to ensure compatibility when deployment runs on Windows or Unix based systems. 
 PROXY_BUILD_PATH=<%- locals.relativeProxyAppDestination.replace(/\\/g, '\/') %>dist

package/dist/templates/angular-xmcloud/README.md

@@ -77,7 +77,6 @@ The following environment variables can be used to configure the angular app. Yo
 
 | Parameter                              | Description                                                                                                                                |
 | -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| `PROXY_HOST`                        | Your XM Cloud Proxy hostname is needed to build the app and execute the client-side requests against the proxy server. Default value `http://localhost:3000`                                                                                                                  |
 | `PROXY_BUILD_PATH`                              | Your XM Cloud Proxy server path is needed to build the app. The build output will be copied to the XM Cloud Proxy application path. Default value `<xmcloud_proxy_path>\dist`.
 | `SITECORE_EDGE_CONTEXT_ID`                              | The Context ID, which covers many system configurations, is required for connecting to the XM Cloud back end. This is an XM Cloud system environment variable. When the application runs on the XM Cloud editing host, this value is always set to the preview Context ID.                   |
 | `SITECORE_API_KEY`                              | The API key for GRAPH_QL_ENDPOINT authentication. It should be used in combination with SITECORE_API_HOST for local development when connecting to a local XM Cloud instance

package/dist/templates/angular-xmcloud/scripts/config/plugins/xmcloud.ts

@@ -12,7 +12,6 @@ class XMCloudPlugin implements ConfigPlugin {
 
   async exec(config: JssConfig) {
     const proxyBuildPath = process.env[`${constantCase('proxyBuildPath')}`]?.replace(/\/$/, '');
-    const proxyHost = process.env[`${constantCase('proxyHost')}`];
 
     const sitecoreEdgeUrl =
       process.env[`${constantCase('sitecoreEdgeUrl')}`]?.replace(/\/$/, '') ||
@@ -30,7 +29,6 @@ class XMCloudPlugin implements ConfigPlugin {
 
     return Object.assign({}, config, {
       proxyBuildPath,
-      proxyHost,
       sitecoreEdgeUrl,
       sitecoreEdgeContextId,
       personalizeScope,

package/dist/templates/angular-xmcloud/src/app/lib/config.ts

@@ -11,7 +11,6 @@ export interface JssConfig extends Record<string, string | boolean | undefined>
   graphQLEndpointPath?: string;
   defaultServerRoute?: string;
   proxyBuildPath?: string;
-  proxyHost?: string;
   sitecoreEdgeUrl?: string;
   sitecoreEdgeContextId?: string;
 }

package/dist/templates/angular-xmcloud/src/app/lib/graphql-client-factory/config.ts

@@ -17,15 +17,11 @@ export const getGraphQLClientFactoryConfig = () => {
   const isProduction = env.production === 'true';
 
   if (isProduction) {
-    if (!env.proxyHost) {
-      throw new Error('Please configure your proxyHost.');
-    }
-
     if (env.sitecoreEdgeContextId) {
       clientConfig = {
         endpoint: isServer
           ? getEdgeProxyContentUrl(env.sitecoreEdgeContextId, env.sitecoreEdgeUrl)
-          : getEdgeProxyContentUrl(env.sitecoreEdgeContextId, env.proxyHost),
+          : getEdgeProxyContentUrl(env.sitecoreEdgeContextId, ''),
       };
     } else if (env.graphQLEndpoint && env.sitecoreApiKey) {
       // we ignore ssr-proxy and query CM directly in case apiKey is used (i.e. in dev docker deployments)

package/dist/templates/node-xmcloud-proxy/README.md

@@ -91,64 +91,73 @@ If the operation is successful, you’ll see the following message:
 
 Follow these steps to deploy your application to Netlify. The deployed site can be used as an editing host in XM Cloud.
 
-1. Run `npm init` in the root directory (which contains SPA and Node XM Cloud Proxy app folder) and add the following scripts to package.json:
-   ```
-      "build": "cd ./<your-proxy-app-name> && npm run build-all && cd ..",
-      "install": "cd ./<your-proxy-app-name> && npm install && npm run install-all && cd ..",
-   ```
-2. Ensure that `<your-proxy-app-name>/package.json` includes the following commands to handle the build and install steps properly:
-   ```
-      "build-all": "cd ../angular && npm run build && cd ../<your-proxy-app-name> && tsc",
-      "install-all": "cd ../angular && npm i && cd ../<your-proxy-app-name>"
-   ```
+1. Run `npm init` in the root directory (which contains SPA and Node XM Cloud Proxy app folders) and add the following scripts to package.json:
+    ```
+    "build": "cd ./<your-proxy-app-folder> && npm run build-all && cd ..",
+    "install": "cd ./<your-proxy-app-folder> && npm install && npm run install-all && cd .."
+    ```
+2. Ensure that `<your-proxy-app-folder>/package.json` includes the following commands to handle the build and install steps properly:
+    ```
+    "build-all": "cd ../angular && npm run build && cd ../<your-proxy-app-folder> && tsc",
+    "install-all": "cd ../angular && npm i && cd ../<your-proxy-app-folder> && npm i"
+    ```
 3. Configure `serverless-http`:
-    - Install the npm package
-      ```
-        npm i serverless-http
-        ```
-    - Import serverless-http in `<your-proxy-app-name>/src/index.ts` file.
+    - Install the serverless-http package :
+        - If you're deploying a standalone Angular app with the Node proxy, run the following command inside your proxy app folder:
+          ```
+          npm i serverless-http
+          ```
+        - If you're working within the pnpm setup context of the [xmcloud-foundation-head](https://github.com/sitecorelabs/xmcloud-foundation-head), run the following command inside your proxy app folder:
+          ```
+          pnpm add serverless-http
+          ```
+    - Import serverless-http in `<your-proxy-app-folder>/src/index.ts` file and export the serverless handler:
         ```
-          export const handler = serverless(server);
+        import serverless from 'serverless-http';
+        ...
+        export const handler = serverless(server);
         ```
 4. Create a `netlify.toml` file and ensure that the following Netlify configuration is added there:
-   - The following allows the proxy app to be treated as Netlify functions. [Functions Overview](https://docs.netlify.com/functions/overview/)
-     ```
-        [functions]
-        directory = "<your-proxy-app-name>/src"
-        node_bundler = "esbuild"
-        included_files = ["<your-proxy-app-name>/dist/**"]
-     ```
-   - To ensure that static assets are accessed properly, you might need to add the following redirects statement to the toml file:
-     ```
-        [[redirects]]
-        from = "/dist/browser/*"
-        status = 200
-        to = "/browser/:splat"
-     ```
-   - By default, redirects won’t be applied if there’s a file with the same path as the one defined in the `from` property. Setting `force` to `true` will make the redirect rule take precedence over any existing files.
-     ```
-       [[redirects]]
-       from = "/*"
-       status = 200
-       to = "/.netlify/functions/index/:splat"
-       force = true
-     ```
-   - Add the following build command:
-     ```
-     [build]
-     command = "npm run build"
-     publish = "<your-proxy-app-name>/dist"
-     ```
+    ```
+    [functions]
+    directory = "<your-proxy-app-folder>/src"
+    node_bundler = "esbuild"
+    included_files = ["<your-proxy-app-folder>/dist/**"]
+    [[redirects]]
+    from = "/dist/browser/*"
+    status = 200
+    to = "/browser/:splat"
+    [[redirects]]
+    from = "/*"
+    status = 200
+    to = "/.netlify/functions/index/:splat"
+    force = true
+    [build]
+    command = "npm run build"
+    publish = "<your-proxy-app-folder>/dist"
+    ```
+   - The `[functions]` section allows the proxy app to be treated as Netlify functions. [Functions Overview](https://docs.netlify.com/functions/overview/)
+   - The first `[[redirects]]` section ensures that static assets are accessed properly.
+   - The second `[[redirects]]` section means that, by default, redirects aren't applied if a file exists at the same path as the one defined in the `from` property. Setting `force` to `true` ensures the redirect rule takes precedence over existing files, preventing files in the deploy folder from being publicly accessible.
+
 5. Create your [Netlify deployment](https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/):
    - Set up all your necessary environment variables like `SITECORE_EDGE_CONTEXT_ID`, `SITECORE_SITE_NAME` etc.
+   - Configure Netlify to use the latest LTS version of Node.js.
    - Configure your build settings in the Build and Deploy tab under Site configuration.
-      - sample configuration:
-       ```
-        Base Directory: /
-        Build command: npm run build
-        Publish directory: /proxy/dist
-        Functions directory: /proxy/src
-        ```
+      - sample configuration for standalone Angular + proxy deployment:
+      ```
+      Base directory: /
+      Build command: npm run build
+      Publish directory: /proxy/dist
+      Functions directory: /proxy/src
+      ```
+      - Sample configuration for use within the context of [xmcloud-foundation-head](https://github.com/sitecorelabs/xmcloud-foundation-head): 
+      ```
+      Base directory: /headapps/spa-starters/
+      Build command: npm run build
+      Publish directory:  /headapps/spa-starters/proxy/dist
+      Functions directory:  /headapps/spa-starters/proxy/src
+      ```
    NOTE: If `proxy/dist` folder is not picked up properly by Netlify make sure that the `PROXY_BUILD_PATH` env variable is unix style path e.g. `../proxy/dist`
 
 ### Deploy to Vercel

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sitecore-jss",
-  "version": "22.5.0-canary.7",
+  "version": "22.5.0-canary.9",
   "description": "Sitecore JSS initializer",
   "bin": "./dist/index.js",
   "scripts": {
@@ -65,5 +65,5 @@
     "ts-node": "^10.9.1",
     "typescript": "~5.6.3"
   },
-  "gitHead": "18a1a3f77fe267b25ae642823ac025fac2247432"
+  "gitHead": "22f5a2afa0a8d3d48a634fc1314fc960f898bc1d"
 }