diff --git a/examples/angular/README.md b/examples/angular/README.md
index 9db59a7c1cb6..344787dbac3d 100644
--- a/examples/angular/README.md
+++ b/examples/angular/README.md
@@ -6,12 +6,13 @@ This example project demonstrates how to build manageable dotCMS pages headlessl
- [Prerequisites](#prerequisites)
- [Getting Started](#getting-started)
- - [Obtaining the Example Code](#downloading-the-example)
+ - [Obtaining the Example Code](#obtaining-the-example-code)
- [Configuration](#configuration)
- [Running the Application](#running-the-application)
- [Project Structure](#project-structure)
-- [Key Features](#handling-vanity-urls)
+- [Key Features](#key-features)
- [Handling Vanity URLs](#handling-vanity-urls)
+ - [Universal Visual Editor](#universal-visual-editor)
- [Troubleshooting](#troubleshooting)
- [Further Resources](#further-resources)
@@ -27,7 +28,7 @@ Before you begin, ensure you have the following:
## Getting Started
-### Downloading the example
+### Obtaining the Example Code
You can get the code in two ways:
@@ -43,7 +44,8 @@ You can get the code in two ways:
git sparse-checkout set --no-cone examples/angular
git checkout
```
- The example files will be in the `examples/angular` folder.
+
+The example files will be in the `examples/angular` folder.
### Configuration
@@ -63,7 +65,7 @@ To configure the Angular app to use your dotCMS instance:
};
```
- ⚠️ **Security Note**: Ensure that the `authToken` used here has [read-only permissions](https://www.dotcms.com/docs/latest/user-permissions#FrontEndBackEnd) to minimize security risks in client-side applications.
+⚠️ **Security Note**: Ensure that the `authToken` used here has [read-only permissions](https://www.dotcms.com/docs/latest/user-permissions#FrontEndBackEnd) to minimize security risks in client-side applications.
## Running the Application
@@ -103,7 +105,16 @@ Note: When accessing `localhost:4200/about`, ensure that the `/about` page exist
- `contentlets-wrapper/`: Component for displaying lists of Contentlets
- `contentlet/`: Component for rendering individual Contentlets
-## Universal Visual Editor
+## Key Features
+
+### Handling Vanity URLs
+
+This example demonstrates how to integrate dotCMS Vanity URLs with Angular routing. Vanity URLs in dotCMS provide alternative paths to internal or external URLs, enhancing site maintenance and SEO.
+
+For implementation details, refer to the [`DotCMSPagesComponent`](./src/app/pages/components/dotcms-pages/dotcms-pages.component.ts) in the example code, which handles routing and Vanity URL redirection.
+
+### Universal Visual Editor
+
To enable the Universal Visual Editor in dotCMS, follow these steps:
1. In your dotCMS instance, navigate to the "Apps" page
@@ -127,21 +138,100 @@ To enable the Universal Visual Editor in dotCMS, follow these steps:
If you want more information about the UVE, please refer to the [dotCMS UVE Documentation](https://dotcms.com/docs/latest/universal-visual-editor-uve).
-## Key Features
-### Handling Vanity URLs
+## Troubleshooting
-This example demonstrates how to integrate dotCMS Vanity URLs with Angular routing. Vanity URLs in dotCMS provide alternative paths to internal or external URLs, enhancing site maintenance and SEO.
+If you encounter issues while setting up or running the dotCMS Angular example, here are some common problems and their solutions:
-For implementation details, refer to the [`DotCMSPagesComponent`](./src/app/pages/components/dotcms-pages/dotcms-pages.component.ts) in the example code, which handles routing and Vanity URL redirection.
+
+Authentication errors (401 Unauthorized)
-## Troubleshooting
+This often occurs when the environment variables are not set correctly.
+
+**Solution:**
+- Double-check that you've updated the `authToken` in `src/environments/environment.development.ts` with a valid token.
+- Ensure the token has the necessary permissions (at least read access) for the content you're trying to fetch.
+- Verify that the token hasn't expired. If it has, generate a new one in the dotCMS UI.
+
+
+
+Connection issues
+
+If you're having trouble connecting to the dotCMS instance:
+
+**Solution:**
+- Verify that the `dotcmsUrl` in `src/environments/environment.development.ts` is correct.
+- Check if you can access the dotCMS instance directly through a web browser.
+- If using `https://demo.dotcms.com`, remember it restarts every 24 hours. You might need to wait or try again later.
+- Ensure your network allows connections to the dotCMS instance (check firewalls, VPNs, etc.).
+
+
+
+Missing pages or content
+
+If you're getting 404 errors for pages that should exist:
+
+**Solution:**
+- Ensure the page exists in your dotCMS instance. For example, if you're trying to access `/about`, make sure an "about" page exists in dotCMS.
+- Check if the content types used in the example match those in your dotCMS instance.
+- Verify that the content has been published and is not in draft status.
+
+
+
+Outdated dependencies or version conflicts
+
+If you're experiencing unexpected behavior or errors related to dependencies:
+
+**Solution:** Perform a clean reinstall of all dependencies by running:
+```bash
+rm -rf node_modules && rm package-lock.json && npm install
+```
+This command will:
+1. Remove the `node_modules` directory
+2. Delete the `package-lock.json` file
+3. Perform a fresh install of all dependencies
+
+After this, restart your development server:
+```bash
+ng serve
+```
+
+
+
+Build errors or stale cache
+
+If you're experiencing build errors or changes aren't reflected in the running application:
+
+**Solution:** Clear the Angular build cache and rebuild the project:
+```bash
+ng cache clean
+ng build --configuration=development
+ng serve
+```
+This sequence of commands will:
+1. Clear the Angular build cache
+2. Rebuild the project with development configuration
+3. Start the development server
+
+This is recommended when:
+- You've made significant changes to your project configuration
+- You're experiencing unexplainable build errors
+- Your changes aren't reflected in the running application despite saving and restarting the dev server
+- You've recently updated Angular or other critical dependencies
+
+
+
+Universal Visual Editor (UVE) not working
+
+If the Universal Visual Editor is not functioning as expected:
-If you encounter issues:
+**Solution:**
+- Ensure you've correctly configured the UVE in your dotCMS instance as described in the [Universal Visual Editor](#universal-visual-editor) section.
+- Verify that your Angular application is running on `http://localhost:4200` (or update the UVE configuration if using a different port).
+- Check that you're accessing the dotCMS edit mode from the correct URL.
+- Clear your browser cache and try again.
+
-1. Verify that your dotCMS instance is accessible and the AUTH token is valid
-2. Check the browser console for any error messages
-3. Ensure all dependencies are correctly installed (`npm install`)
-4. Verify that the required pages and content exist in your dotCMS instance
+If you continue to experience issues after trying these solutions, please check the [dotCMS documentation](https://dotcms.com/docs/) or reach out to the dotCMS community for further assistance.
## Further Resources
@@ -149,4 +239,4 @@ If you encounter issues:
- [dotCMS Documentation](https://dotcms.com/docs/)
- [dotCMS REST API Authentication](https://auth.dotcms.com/docs/latest/rest-api-authentication)
-For more assistance with Angular, use `ng help` or visit the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+For more assistance with Angular, use `ng help` or visit the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
\ No newline at end of file
diff --git a/examples/astro/README.md b/examples/astro/README.md
index b19024283bdf..da98977bf674 100644
--- a/examples/astro/README.md
+++ b/examples/astro/README.md
@@ -1,19 +1,37 @@
# dotCMS Astro Example
-DotCMS provides a Astro example that shows how to build dotCMS pages heedlessly with Astro JavaScript framework.
+This example project demonstrates how to build manageable dotCMS pages headlessly using the Astro framework. It showcases the integration between dotCMS and Astro, providing a practical implementation of content-driven web applications.
-## What do you need?
+## Table of Contents
-1. A dotCMS instance or you can use https://demo.dotcms.com
-2. A valid AUTH token for the target instance (see: https://auth.dotcms.com/docs/latest/rest-api-authentication#creating-an-api-token-in-the-ui)
-3. A valid Site Identifier where your page is located (see: https://www.dotcms.com/docs/latest/multi-site-management#multi-site-management)
-4. Node js 18+ and npm installed
-5. Terminal
-6. And a code editor.
+- [Prerequisites](#prerequisites)
+- [Getting Started](#getting-started)
+ - [Creating the Application](#creating-the-application)
+ - [Configuration](#configuration)
+- [Running the Application](#running-the-application)
+- [Key Features](#key-features)
+ - [Handling Vanity URLs](#handling-vanity-urls)
+ - [Universal Visual Editor](#universal-visual-editor)
+- [Troubleshooting](#troubleshooting)
+- [Learn More](#learn-more)
+- [Deployment](#deployment)
-### Create the new Astro application
+## Prerequisites
-Open your terminal and let’s create the Astro app by running the following:
+Before you begin, ensure you have the following:
+
+1. Access to a dotCMS instance (you can use https://demo.dotcms.com if you don't have your own)
+2. A valid AUTH token for the target dotCMS instance ([How to create an API token](https://auth.dotcms.com/docs/latest/rest-api-authentication#creating-an-api-token-in-the-ui))
+3. A valid Site Identifier where your page is located ([Multi-site Management](https://www.dotcms.com/docs/latest/multi-site-management#multi-site-management))
+4. Node.js (version 18 or higher) and npm installed
+5. A terminal application
+6. A code editor of your choice
+
+## Getting Started
+
+### Creating the Application
+
+Open your terminal and create the Astro app by running the following command:
```bash
npm create astro@latest -- --template dotcms/core/examples/astro
@@ -21,30 +39,183 @@ npm create astro@latest -- --template dotcms/core/examples/astro
Follow the Astro setup steps after it pulls the example.
-## Add the dotCMS configuration
+### Configuration
+
+To configure the Astro app to use your dotCMS instance:
+
+1. Open the project folder in your code editor
+2. In the root, find the file `.env.local.example` and rename it to `.env.local`
+3. Open the `.env.local` file and update the following environment variables:
+ - `PUBLIC_DOTCMS_AUTH_TOKEN`: Your dotCMS auth token
+ - `PUBLIC_DOTCMS_HOST`: URL of your dotCMS instance (e.g., https://demo.dotcms.com)
+ - `PUBLIC_DOTCMS_SITE_ID`: The identifier of the Site you are going to use for your website
+
+ To find your Site ID:
+ 1. Go to Settings > Sites in your dotCMS instance
+ 2. Select the desired Site (A modal should open)
+ 3. Go to the History Tab
+ 4. Copy the `Identifier` that appears at the top of the tab
+
+⚠️ **Security Note**: Ensure that the auth token used here has [read-only permissions](https://www.dotcms.com/docs/latest/user-permissions#FrontEndBackEnd) to minimize security risks in client-side applications.
+
+## Running the Application
+
+Once configured, follow these steps to run the app:
+
+1. Open a terminal in the project root directory
+2. Install dependencies: `npm install`
+3. Start the development server: `npm run dev`
+4. Open your browser and navigate to `http://localhost:4321` (Verify the port Astro is using, 4321 is the default but it can change)
+
+🎉 Congratulations! Your dotCMS Astro example is now running.
+
+Note: When accessing pages (e.g., `localhost:4321/about`), ensure that the corresponding page exists in your dotCMS instance.
+
+## Key Features
+
+### Handling Vanity URLs
+
+While this example doesn't explicitly demonstrate Vanity URL handling, you can implement it by extending the `[...slug].astro` file to check for Vanity URLs before rendering the page. You would need to:
+
+1. Query the dotCMS API for Vanity URLs
+2. If a match is found, redirect to the corresponding internal URL
+3. If no match is found, proceed with normal page rendering
+
+### Universal Visual Editor
+
+To enable the Universal Visual Editor (UVE) in dotCMS for your Astro application, follow these steps:
+
+1. In your dotCMS instance, navigate to the "Apps" page
+2. Find the "UVE - Universal Visual Editor" app and click on it
+3. Locate the site where you want to enable the UVE and click on it
+4. In the configuration field, add the following:
+
+```json
+{
+ "config": [
+ {
+ "pattern": ".*",
+ "url": "http://localhost:4321"
+ }
+ ]
+}
+```
+
+5. Click on the "Save" button to save the changes
+6. Now, when you edit any page in dotCMS, you will see the UVE integrated with your Astro application
+
+For more information about the UVE, please refer to the [dotCMS UVE Documentation](https://dotcms.com/docs/latest/universal-visual-editor-uve).
+
+## Troubleshooting
+
+If you encounter issues while setting up or running the dotCMS Astro example, here are some common problems and their solutions:
+
+
+Authentication errors (401 Unauthorized)
+
+This often occurs when the environment variables are not set correctly.
+
+**Solution:**
+- Double-check that you've renamed `.env.local.example` to `.env.local`.
+- Ensure you've updated the `PUBLIC_DOTCMS_AUTH_TOKEN` in the `.env.local` file with a valid token.
+- Verify that the token hasn't expired. If it has, generate a new one in the dotCMS UI.
+
+
+
+Connection issues
+
+If you're having trouble connecting to the dotCMS instance:
+
+**Solution:**
+- Verify that the `PUBLIC_DOTCMS_HOST` in `.env.local` is correct.
+- If using `https://demo.dotcms.com`, remember it restarts every 24 hours. You might need to wait or try again later.
+- Ensure your network allows connections to the dotCMS instance (check firewalls, VPNs, etc.).
+
+
+
+Missing pages or content
+
+If you're getting 404 errors for pages that should exist:
+
+**Solution:**
+- Ensure the page exists in your dotCMS instance. For example, if you're trying to access `/about`, make sure an "about" page exists in dotCMS.
+- Check if the content types used in the example match those in your dotCMS instance.
+- Verify that the content has been published and is not in draft status.
+- Double-check that the `PUBLIC_DOTCMS_SITE_ID` in `.env.local` is correct for the site you're trying to access.
+
+
+
+Outdated dependencies or version conflicts
+
+If you're experiencing unexpected behavior or errors related to dependencies:
+
+**Solution:** Perform a clean reinstall of all dependencies by running:
+```bash
+rm -rf node_modules && rm package-lock.json && npm install
+```
+This command will:
+1. Remove the `node_modules` directory
+2. Delete the `package-lock.json` file
+3. Perform a fresh install of all dependencies
+
+After this, restart your development server:
+```bash
+npm run dev
+```
+
+
+
+Build errors or stale cache
+
+If you're experiencing build errors or changes aren't reflected in the running application:
+
+**Solution:** Clear Astro's cache and rebuild the project:
+```bash
+npm run clean
+npm run build
+npm run dev
+```
+This sequence of commands will:
+1. Clear Astro's cache
+2. Rebuild the project
+3. Start the development server
+
+This is recommended when:
+- You've made significant changes to your project configuration
+- You're experiencing unexplainable build errors
+- Your changes aren't reflected in the running application despite saving and restarting the dev server
+- You've recently updated Astro or other critical dependencies
+
+
+
+Universal Visual Editor (UVE) not working
+
+If the Universal Visual Editor is not functioning as expected:
+
+**Solution:**
+- Ensure you've correctly configured the UVE in your dotCMS instance as described in the [Universal Visual Editor](#universal-visual-editor) section.
+- Verify that your Astro application is running on `http://localhost:4321` (or update the UVE configuration if using a different port).
+- Check that you're accessing the dotCMS edit mode from the correct URL.
+- Clear your browser cache and try again.
+
-Now we need to tell the Astro app what dotCMS instance is going to use to get the data to build its pages.
+If you continue to experience issues after trying these solutions, please check the [dotCMS documentation](https://dotcms.com/docs/) or reach out to the dotCMS community for further assistance.
-1. Open the folder where you created the project in your code editor
-2. In the root, find the file `.env.local.example` and rename to `.env.local`
-3. Open the .env.local file and update the environment variable:
+## Learn More
- - `PUBLIC_DOTCMS_AUTH_TOKEN` this is the auth token for dotCMS, you can use the dotCMS UI to create one.
- - `PUBLIC_DOTCMS_HOST` this is the instance of dotCMS where your pages and content lives (license needed) if you don’t have one, you can use [https://demo.dotcms.com](https://demo.dotcms.com) (be careful it restarts every 24h).
- - `PUBLIC_DOTCMS_SITE_ID` this is the identifier of the Site you are going to use for your website you can find it by going to Settings > Sites. Once there follow the next steps:
+To learn more about Astro, take a look at the following resources:
- 1. Select the desired Site (A modal should be opened)
- 2. Go to the History Tab
- 3. Copy the `Identifier` that appears in the top of the tab
+- [Astro Documentation](https://docs.astro.build) - learn about Astro features and API.
+- [Astro Blog](https://astro.build/blog/) - read the latest news and articles about Astro.
-## Run the app
+You can check out [the Astro GitHub repository](https://github.com/withastro/astro) - your feedback and contributions are welcome!
-Once all the configuration is in place, it is time to run the web app.
+## Deployment
-1. Go back to your terminal and from the folder you created the project
-2. Run `npm run dev`
-3. Open http://localhost:4321 in your browser (Verify the port Astro is using, 4321 is the default but it can change)
+Astro applications can be deployed to various platforms. Here are a few popular options:
-🎉 And that’s it.
+- [Netlify](https://docs.astro.build/en/guides/deploy/netlify/)
+- [Vercel](https://docs.astro.build/en/guides/deploy/vercel/)
+- [GitHub Pages](https://docs.astro.build/en/guides/deploy/github/)
-Consider that if you go to `localhost:4321/about`, the page `/about` needs to exist in your dotCMS instance.
+Check out the [Astro deployment guides](https://docs.astro.build/en/guides/deploy/) for more detailed information on deploying your Astro site.
\ No newline at end of file
diff --git a/examples/nextjs/README.md b/examples/nextjs/README.md
index df59a234e12d..4075bd60395c 100644
--- a/examples/nextjs/README.md
+++ b/examples/nextjs/README.md
@@ -1,60 +1,202 @@
# dotCMS Next.js Example
-DotCMS provides a Next.js example that shows how to build dotCMS pages heedlessly with Next.js JavaScript framework.
+This example project demonstrates how to build manageable dotCMS pages headlessly using the Next.js framework. It showcases the integration between dotCMS and Next.js, providing a practical implementation of content-driven web applications.
-## What do you need?
-1. A dotCMS instance or you can use https://demo.dotcms.com
-2. A valid AUTH token for the target instance (see: https://auth.dotcms.com/docs/latest/rest-api-authentication#creating-an-api-token-in-the-ui)
-3. Node js 18+ and npm installed
-4. Terminal
-5. And a code editor.
-### Create the new Next.js application
-Open your terminal and let’s create the Next.js app by running the following:
+## Table of Contents
+
+- [Prerequisites](#prerequisites)
+- [Getting Started](#getting-started)
+ - [Creating the Application](#creating-the-application)
+ - [Configuration](#configuration)
+- [Running the Application](#running-the-application)
+- [Key Features](#key-features)
+ - [Handling Vanity URLs](#handling-vanity-urls)
+ - [Universal Visual Editor](#universal-visual-editor)
+- [Troubleshooting](#troubleshooting)
+- [Learn More](#learn-more)
+- [Deployment](#deployment)
+
+## Prerequisites
+
+Before you begin, ensure you have the following:
+
+1. Access to a dotCMS instance (you can use https://demo.dotcms.com if you don't have your own)
+2. A valid AUTH token for the target dotCMS instance ([How to create an API token](https://auth.dotcms.com/docs/latest/rest-api-authentication#creating-an-api-token-in-the-ui))
+3. Node.js (version 18 or higher) and npm installed
+4. A terminal application
+5. A code editor of your choice
+
+## Getting Started
+
+### Creating the Application
+
+Open your terminal and create the Next.js app by running the following command:
```bash
npx create-next-app YOUR_NAME --example https://github.com/dotCMS/core/tree/main/examples/nextjs
```
-This will create a new Next.js app with dotCMS example
+This will create a new Next.js app with the dotCMS example.
+
+### Configuration
-## Add the dotCMS configuration
-Now we need to tell the Next.js app what dotCMS instance is going to use to get the data to build its pages.
+To configure the Next.js app to use your dotCMS instance:
1. Open the folder `YOUR_NAME` in your code editor
-2. In the root, find the file .env.local.example and rename to .env.local
-3. Open the .env.local file and update the environment variable:
- - `NEXT_PUBLIC_DOTCMS_AUTH_TOKEN` this is the auth token for dotCMS, you can use the dotCMS UI to create one.
- - `NEXT_PUBLIC_DOTCMS_HOST` this is the instance of dotCMS where your pages and content lives (license needed) if you don’t have one, you can use [https://demo.dotcms.com](https://demo.dotcms.com) (be careful it restarts every 24h)
+2. In the root, find the file `.env.local.example` and rename it to `.env.local`
+3. Open the `.env.local` file and update the following environment variables:
+ - `NEXT_PUBLIC_DOTCMS_AUTH_TOKEN`: Your dotCMS auth token
+ - `NEXT_PUBLIC_DOTCMS_HOST`: URL of your dotCMS instance (e.g., https://demo.dotcms.com)
+
+
+⚠️ **Security Note**: Ensure that the auth token used here has [read-only permissions](https://www.dotcms.com/docs/latest/user-permissions#FrontEndBackEnd) to minimize security risks in client-side applications.
+
+## Running the Application
+
+Once configured, follow these steps to run the app:
+
+1. Open a terminal in the project root directory
+2. Install dependencies: `npm install`
+3. Start the development server: `npm run dev`
+4. Open your browser and navigate to `http://localhost:3000`
+
+🎉 Congratulations! Your dotCMS Next.js example is now running.
+
+Note: When accessing pages (e.g., `localhost:3000/about`), ensure that the corresponding page exists in your dotCMS instance.
+
+## Key Features
+
+### Handling Vanity URLs
+
+This example demonstrates how to integrate dotCMS Vanity URLs with Next.js routing. Vanity URLs in dotCMS provide alternative paths to internal or external URLs, enhancing site maintenance and SEO.
+
+For implementation details, refer to the `utils/index.js` file in the example code, which handles Vanity URL redirection.
+
+### Universal Visual Editor
+
+To enable the Universal Visual Editor (UVE) in dotCMS for your Next.js application, follow these steps:
+
+1. In your dotCMS instance, navigate to the "Apps" page
+2. Find the "UVE - Universal Visual Editor" app and click on it
+3. Locate the site where you want to enable the UVE and click on it
+4. In the configuration field, add the following:
+
+```json
+{
+ "config": [
+ {
+ "pattern": ".*",
+ "url": "http://localhost:3000"
+ }
+ ]
+}
+```
+
+5. Click on the "Save" button to save the changes
+6. Now, when you edit any page in dotCMS, you will see the UVE integrated with your Next.js application
+
+For more information about the UVE, please refer to the [dotCMS UVE Documentation](https://dotcms.com/docs/latest/universal-visual-editor-uve).
+
+## Troubleshooting
+
+If you encounter issues while setting up or running the dotCMS Next.js example, here are some common problems and their solutions:
+
+
+Outdated npm packages or dependency issues
+
+The `@dotcms/xxx` npm libraries are set to use the `latest` tag. Sometimes, `npm install` might not install the most recent version, or you might encounter dependency conflicts.
+
+**Solution:** Perform a clean reinstall of all dependencies by running:
+```bash
+rm -rf .next node_modules && rm package-lock.json && npm i && npm run dev
+```
+This command will:
+1. Remove the `.next` build folder and `node_modules` directory
+2. Delete the `package-lock.json` file
+3. Perform a fresh install of all dependencies
+4. Start the development server
+
+This ensures you have the latest versions of all packages and resolves most dependency-related issues.
+
+
+
+Stale build cache
+
+Sometimes, the Next.js build cache can become stale, leading to unexpected behavior or errors that persist even after updating your code.
+
+**Solution:** Delete the `.next` folder to clear the build cache:
+```bash
+rm -rf .next && npm run dev
+```
+
+This is recommended when:
+- You've made significant changes to your project configuration (e.g., `next.config.js`)
+- You're experiencing unexplainable build errors
+- Your changes aren't reflected in the running application despite saving and restarting the dev server
+- You've recently updated Next.js or other critical dependencies
+
+After running this command, Next.js will rebuild the entire project from scratch, ensuring you're working with a fresh build.
+
+
+
+Authentication errors (401 Unauthorized)
+
+This often occurs when the environment variables are not set correctly.
+
+**Solution:**
+- Double-check that you've renamed `.env.local.example` to `.env.local`.
+- Ensure you've updated the `NEXT_PUBLIC_DOTCMS_AUTH_TOKEN` in the `.env.local` file with a valid token.
+- Verify that the token hasn't expired. If it has, generate a new one in the dotCMS UI.
+
+
+
+Connection issues
+
+If you're having trouble connecting to the dotCMS instance.
+
+**Solution:**
+- Verify that the `NEXT_PUBLIC_DOTCMS_HOST` in `.env.local` is correct.
+- If using `https://demo.dotcms.com`, remember it restarts every 24 hours. You might need to wait or try again later.
+- Ensure your network allows connections to the dotCMS instance (check firewalls, VPNs, etc.).
+
-## Run the app
-Once all the configuration is in place, it is time to run the web app.
+
+Missing pages
-1. Go back to your terminal and from the folder YOUR_NAME
-3. Run `npm run dev`
-3. Open http://localhost:3000 in your browser
+If you're getting 404 errors for pages that should exist.
-🎉 And that’s it.
+**Solution:**
+- Ensure the page exists in your dotCMS instance. For example, if you're trying to access `/about`, make sure an "about" page exists in dotCMS.
+- Check if the content types used in the example match those in your dotCMS instance.
+- Verify that the content has been published and is not in draft status.
+
-Consider that if you go to `localhost:3000/about`, the page `/about` needs to exist in your dotCMS instance.
+
+Universal Visual Editor (UVE) not working
-## Handling Vanity URLs
+If the Universal Visual Editor is not functioning as expected:
-In dotCMS, Vanity URLs serve as alternative reference paths to internal or external URLs. They are simple yet powerful tools that can significantly aid in site maintenance and SEO.
+**Solution:**
+- Ensure you've correctly configured the UVE in your dotCMS instance as described in the [Universal Visual Editor](#universal-visual-editor) section.
+- Verify that your Next.js application is running on `http://localhost:3000` (or update the UVE configuration if using a different port).
+- Check that you're accessing the dotCMS edit mode from the correct URL.
+- Clear your browser cache and try again.
+
-Next.js is a robust framework that provides the capability to handle vanity URLs. It allows you to redirect or forward users to the appropriate content based on predefined logic. You can seamlessly integrate this feature of Next.js with dotCMS. For an implementation example, refer to this [link](https://github.com/dotCMS/core/blob/main/examples/nextjs/src/app/utils/index.js).
+If you continue to experience issues after trying these solutions, please check the [dotCMS documentation](https://dotcms.com/docs/) or reach out to the dotCMS community for further assistance.
## Learn More
To learn more about Next.js, take a look at the following resources:
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-## Deploy on Vercel
+## Deployment
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Check out the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
\ No newline at end of file