nuxt-modules / prismic

Easily connect your Nuxt.js application to your content hosted on Prismic
https://prismic.nuxtjs.org
MIT License
245 stars 48 forks source link

Prismic toolbar not working on production #180

Closed nonlinearcom closed 1 year ago

nonlinearcom commented 1 year ago

Hi, does anyone know why the prismic toolbar does not link to the main document? is there any workaround for this issue?

Thanks in advance

Versions

Steps to reproduce

Perform any navigation on the frontend (production)

What is Expected?

The prismic toolbar should display a link to the main document on prismic.io

What is actually happening?

The prismic toolbar display a wrong link to the main document on prismic.io

lihbr commented 1 year ago

Hi, can you share more details about your setup? Especially what's your rendering mode? (static, SSR, edge, etc.)

nonlinearcom commented 1 year ago

Nuxt2 Static Generation on Vercel:

import { resolve } from 'path'
import { apiEndpoint } from './sm.json'
const getAppRoutes = require('./utils/getRoutes.js');

const isGenerate = process.env.generate == 'true'
const isDev = process.env.NODE_ENV !== 'production';

export default {
  server: {
    port: process.env.port, // default: 3000
    host: process.env.NUXT_HOST ? process.env.NUXT_HOST : 'localhost', // default: localhost
  },

  // Target: https://go.nuxtjs.dev/config-target
  target: 'static',
  modern: !isDev,
  ssr: true,
  // Global page headers: https://go.nuxtjs.dev/config-head
 ...head stuff...

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    './assets/css/media.less',
    './assets/css/fonts.less',
    './assets/css/style.less',
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    '@/plugins/filters',
    '@/plugins/globalComponents',
    { src: '@/plugins/clientFunctions.js', ssr: false, mode: 'client' },
    { src: '@/plugins/functions.js' },
  ],
  pageTransition: {
    name: 'my-page',
    mode: 'out-in',
  },

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // devModules: ['@nuxtjs/eslint-module'],

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/style-resources',
    // '@nuxtjs/eslint-module',
    // '@nuxtjs/html-validator',
  ],
  prismic: {
    endpoint: apiEndpoint,
    modern: true,
    linkResolver: "~/utils/linkResolver",
  },
  image: {
    domains: ['https://images.prismic.io'],
    provider: 'prismic',
    dir: 'assets/img',
    staticFilename: 'dist/images/[name]-[hash][ext]',
    prismic: {
      modifiers: {
        quality: 90,
      },
    },
    presets: {
      avatar: {
        modifiers: {
          format: 'webp',
        },
      },
    },
    screens: {
      xs: 540,
      sm: 640,
      md: 768,
      lg: 1024,
      xl: 1280,
      xxl: 1536,
    },
  },

  styleResources: {
    less: './assets/css/variables.less',
  },

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    '@nuxtjs/axios',
    '@nuxt/image',
    '@nuxtjs/sitemap',
    'nuxt-basic-auth-module',
    ["@nuxtjs/prismic", {
      endpoint: apiEndpoint|| ""
    }],
    ["nuxt-sm"],
    [
      'nuxt-lazy-load',
      {
        directiveOnly: true,
        defaultImage:
          'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
      },
    ],
  ],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    transpile: ["@prismicio/vue", "vue-slicezone", "nuxt-sm"],
    extractCSS: true,
    extend(config, ctx) {
      //  Create the webmanifest rule
    },
  },
  redirect: [
    // Redirect options here
    {
      // eslint-disable-next-line
      from: '(?!^/$|^/[?].*$)(.*/[?](.*)$|.*/$)',
      to: (from, req) => {
        const base = req._parsedUrl.pathname.replace(/\/$/, '') // We take pathname instead of req.url because of the query parameters
        const search = req._parsedUrl.search
        return base + (search != null ? search : '')
      },
      statusCode: 301,
    },
  ],
  basic: {
    name: process.env.name,
    pass: process.env.pass,
    enabled: process.env.check_pass === 'true', // require boolean value(nullable)
  },
  sitemap: {
    hostname: process.env.ORIGIN_URL,
    path: '/sitemap.xml',
    cacheTime: 1000 * 60 * 60,
    trailingSlash: false,
    gzip: true,
    exclude: [
      '/**/*' // remove all static routes
    ],
    defaults: {
      lastmod: new Date()
    },
    async routes() {
      return await getAppRoutes();
    },
  },
  env: {
    build: process.env.build === 'true' ? true : false,
    check_pass: process.env.check_pass,
    ORIGIN_URL: process.env.ORIGIN_URL,
  },
  axios: {
    proxy: false,
  },
  alias: {
    '@assets': resolve(__dirname, './assets/'),
  },

  generate: {
    exclude: ["*"],
    interval:250,
    async routes() {
      const response = await getAppRoutes()
      return response.map(({ url }) => url)
    }
  },
}
lihbr commented 1 year ago

Got it, thanks!

This is a limitation (bug to some extent) of the toolbar. Basically, the toolbar can only detect documents properly when documents are actually fetched when browsing the page.

In the case of a static site, those documents are fetched at build time, so documents, if any, indicated by the toolbar on a static site can be quite inaccurate.

We've been tracking and discussing that here in order to figure out a better way to keep the toolbar working for static site: https://github.com/prismicio/prismic-toolbar/issues/94, I'll close this issue here to prevent duplicate conversation, hope you understand, and you're more than welcome to chime in on the other issue!