Release@next

.github/workflows/build.yaml

@@ -45,7 +45,8 @@ jobs:
         uses: actions/cache/save@v4
         with:
           path: |
-            packages/components/styles.css
             packages/*/dist
             packages/*/build
+            packages/test-apps/react-vite/dist
+            packages/test-apps/nextjs/.next
           key: build-cache-${{ github.run_id }}-${{ github.run_attempt }}

.github/workflows/check.yaml

@@ -33,16 +33,17 @@ jobs:
         uses: actions/cache/restore@v4
         with:
           path: |
-            packages/components/styles.css
             packages/*/dist
             packages/*/build
+            packages/test-apps/react-vite/dist
+            packages/test-apps/nextjs/.next
           key: build-cache-${{ github.run_id }}-${{ github.run_attempt }}
       - name: List components folder
         run: ls -la packages/components
       - name: List component build folders
         run: ls -la packages/components/dist
       - name: List test-app build folders
-        run: ls -la packages/test-app/dist
+        run: ls -la packages/test-apps/react-vite/dist
       - name: Run Prettier
         run: npm run prettier:check
       - name: Run Linting

.github/workflows/cleanup.yaml

@@ -13,9 +13,10 @@ jobs:
         uses: actions/cache/restore@v4
         with:
           path: |
-            packages/components/styles.css
             packages/*/dist
             packages/*/build
+            packages/test-apps/react-vite/dist
+            packages/test-apps/nextjs/.next
           key: build-cache-${{ github.run_id }}-${{ github.run_attempt }}
       - name: Save build folder to artifact
         uses: actions/upload-artifact@v4
@@ -25,6 +26,8 @@ jobs:
           path: |
             packages/*/dist
             packages/*/build
+            packages/test-apps/react-vite/dist
+            packages/test-apps/nextjs/.next
       - name: Cleanup build cache
         env:
           GH_TOKEN: ${{ github.token }}

.github/workflows/main.yml

@@ -41,6 +41,7 @@ jobs:
       publish-prelease: ${{ !!inputs.publish-prerelease }}
     secrets:
       VAULT_URL: ${{ secrets.VAULT_URL }}
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
   upload-artifact-cleanup:
     if: ${{ always() }}
     needs: [install-build, check, publish]

.github/workflows/publish.yaml

@@ -11,6 +11,8 @@ on:
     secrets:
       VAULT_URL:
         required: true
+      NPM_TOKEN:
+        required: true
 
 jobs:
   publish:
@@ -50,12 +52,13 @@ jobs:
         uses: actions/cache/restore@v4
         with:
           path: |
-            packages/components/styles.css
             packages/*/dist
             packages/*/build
+            packages/test-apps/react-vite/dist
+            packages/test-apps/nextjs/.next
           key: build-cache-${{ github.run_id }}-${{ github.run_attempt }}
-      - name: Authenticate with private GH package
-        run: echo -e "//npm.pkg.github.com/:_authToken=${{ steps.vault.outputs.GITHUB_PACKAGES_WRITE_TOKEN }}\n@contentful:registry=https://npm.pkg.github.com" > ./.npmrc
+      - name: Authenticate with private NPM and GH package
+        run: echo -e "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}\n//npm.pkg.github.com/:_authToken=${{ steps.vault.outputs.GITHUB_PACKAGES_WRITE_TOKEN }}\n@contentful:registry=https://npm.pkg.github.com" > ./.npmrc
         env:
           GITHUB_TOKEN: ${{ steps.vault.outputs.GITHUB_PACKAGES_WRITE_TOKEN }}
       # We only want to publish if there are changes to any package. Since the lerna --force-publish flag publishes even if there are no changes

.gitignore

@@ -17,7 +17,6 @@ reports
 coverage
 dist-ssr
 *.local
-*.local.*
 .yarnrc.yml
 vite.config.ts.timestamp-*
 
@@ -42,6 +41,8 @@ tmp/
 
 # Ingore .env local files
 .env
+# Allow env template files
+!.env.local.tmpl
 
 **/cypress/screenshots/**
 **/cypress/videos/**

README.md

@@ -20,19 +20,19 @@ This repository represents a set of packages, related to the [Experiences](https
 - [Core](https://github.com/contentful/experience-builder/tree/main/packages/core)
 - [Experiences CLI tool](https://github.com/contentful/experience-builder/tree/main/packages/create-experience-builder)
 - [Experiences SDK](https://github.com/contentful/experience-builder/tree/main/packages/experience-builder-sdk)
-- [Test-app](https://github.com/contentful/experience-builder/tree/main/packages/test-app)
+- [Test-apps](https://github.com/contentful/experience-builder/tree/main/packages/test-apps)
 - [Validators](https://github.com/contentful/experience-builder/tree/main/packages/validators)
 - [Visual-editor](https://github.com/contentful/experience-builder/tree/main/packages/visual-editor)
 
 ## Local development
 Each package has a `dev` script that will build the application and watch for changes. Running `npm run dev` in the root directory of each package will have the benefit of hot-reloading changes. Doing so comes at the cost of having more terminal windows depending on how many packages you are running. Therefore, if a more concise terminal windowed experience is preferred, run `npm run build` at the project repo root level after every change at the cost of hot-reloading benefits.
 
-Additionally, there is a provided `test-app` package on your behalf to get you quickly started. This package handles fetching the experience and should be displayed in the experience canvas once you set up your enablements, space, and experience type in the Contentful web app.
+Additionally, there are provided test apps for Vite and NextJS on your behalf to get you quickly started. This package handles fetching the experience and should be displayed in the experience canvas once you set up your enablements, space, and experience type in the Contentful web app.
 
-**If you are looking to use the `test-app`, follow the steps below:**
+**If you are looking to use any of the test apps, follow the steps below:**
 
 1. Set up your enablements, space, and experience type through the Contentful web app. At this point, your experience canvas in the UI should display some error state such as `localhost refused to connect`.
-2. Then in the `test-app` package open up the `local.env` file and make sure to fill out the following variables
+2. Then in the test app folder of your choice, open up the `env.local` file and make sure to fill out the following variables
 ```
 VITE_CTFL_ENVIRONMENT=
 VITE_CTFL_SPACE=
@@ -42,7 +42,7 @@ VITE_CTFL_DOMAIN=contentful.com
 VITE_CTFL_EXPERIENCE_TYPE=
 ```
 3. Go to the root directory of the repo and run `npm i` and `npm run build`
-4. cd into the `test-app` directory and run `npm run dev`
+4. cd into the test app directory and run `npm run dev`
 5. Go back into the Contentful Experiences UI and refresh. You should see your canvas in a happy state where you can now start adding components onto the canvas.
 
 If you are having issues getting the test-app to show up in the canvas checkout the Troubleshooting section below.

examples/README.md

@@ -0,0 +1,11 @@
+# Studio Experiences example apps
+
+This folder contains example apps that demonstrate how to use Studio Experiences with different frameworks.
+
+## next-app-router
+
+Demonstrates how to set up a server rendered page with Studio Experiences using the Next.js App Router.
+
+## next-pages-router
+
+Demonstrates how to set up a server rendered page with Studio Experiences using the Next.js Pages Router.

examples/next-app-router/.env.local.example

@@ -0,0 +1,6 @@
+# Rename this file to .env.local and fill in the values for the following environment variables
+NEXT_PUBLIC_CTFL_ENVIRONMENT=
+NEXT_PUBLIC_CTFL_SPACE=
+NEXT_PUBLIC_CTFL_ACCESS_TOKEN=
+NEXT_PUBLIC_CTFL_PREVIEW_ACCESS_TOKEN=
+NEXT_PUBLIC_CTFL_EXPERIENCE_TYPE=

examples/next-app-router/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/next-app-router/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/next-app-router/.vscode/settings.json

@@ -0,0 +1 @@
+{}

examples/next-app-router/README.md

@@ -0,0 +1,46 @@
+# Studio Experiences with Next.js App Router example
+
+This example demonstrates how to use the Next.js App Router to create a server rendered page with Studio Experiences.
+
+For more information, see [Using Experiences with Next.js](http://localhost:8001/developers/docs/experiences/using-with-nextjs/) in the Contentful docs.
+
+## Getting started
+
+Before you begin, you should already have a Contentful space with Studio Experiences enabled and configured. If you do not yet have a space, please contact your Contentful account representative.
+
+### Step 1: Clone the repo and install the app
+
+To get started with this example, clone the repo, go into the examples/next-app-router directory, and install the app:
+
+```bash
+npm install
+```
+
+### Step 2: Set up your environment variables
+
+Next, you will need to set up your environment variables. Copy the `.env.local.example` file to `.env.local` and fill in the following variables:
+
+- NEXT_PUBLIC_CTFL_SPACE: This is the Space ID of your Contentful space. This can be found in Settings>General Settings.
+- NEXT_PUBLIC_CTFL_ACCESS_TOKEN: This is the Content Delivery API access token, which is used for fetching published data from your Contentful space. This can be found in Settings>API Keys.
+- NEXT_PUBLIC_CTFL_PREVIEW_ACCESS_TOKEN: This is the Content Preview API access token, which is used for fetching draft data from your Contentful space. This can be found in Settings>API Keys.
+- NEXT_PUBLIC_CTFL_ENVIRONMENT: This is the environment of your Contentful space. This can be found in Settings>General Settings. This can be found in Settings>Environments.
+- NEXT_PUBLIC_CTFL_EXPERIENCE_TYPE= This is the content type id of the Experience content type in your Contentful space. This can be found in Content Model>Experience.
+
+### Step 3: Add expEditorMode query param to the Content Preview Url
+
+In order to preview your Experiences in the Contentful web app, you will need to add the `expEditorMode` query parameter to the Content Preview URL. This parameter should be set to `true`. For example, if your Content Preview URL is `https://example.com`, you should set it to `https://example.com?expEditorMode=true`.
+
+### Step 4: Start the development server
+
+Now that you have set up your environment variables, you can start the development server:
+
+```bash
+npm run dev
+```
+
+The app is set up to run on `http://localhost:3000`. By default, the root URL will pull up an experience with the slug of 'home-page'. The locale will be determined by your browser settings. You can change the slug and locale by modifying the URL. For example, to view the experience with the slug of 'about-page' and a locale of 'de', you would navigate to `http://localhost:3000/de/about-page`.
+
+For the localization, this app uses the [Next i18n Router plugin](https://github.com/i18nexus/next-i18n-router#readme) for Next.js. You can configure locales by adding them to the `i18n` section in the `src/middleware.ts` file.
+
+## 
+

examples/next-app-router/next.config.mjs

@@ -0,0 +1,14 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  async redirects() {
+    return [
+      {
+        source: '/',
+        destination: '/home-page',
+        permanent: true,
+      }
+    ];
+  },
+};
+
+export default nextConfig;