best routes config for a catch-all index.vue page

[dohomi]

Hi

what is the best way for a catch all routes config inside the now.json? I am not sure how that need to be configured. I did this routes section inside the nuxt config:

  router: {
      extendRoutes (routes, resolve) {
        routes.push({
          name: 'custom',
          path: '/:slug*',
          component: '~/pages/index.vue'
        })
      }
    },

now.json:

"routes": [
    {
      "src": "^/(.+)\\.(.+)$",
      "dest": "index"
    }
  ]

I am also unsure if the serverMiddleware will be triggered correctly, or do I need to set them up inside of the routes section as well?

[dohomi]

So I would like that all paths like "/" "/slug" "/folder/slug/" will get correctly responded by my index.vue file. I tried _nuxt/pages/index.js as path but this didn't work out so far.

[bluebeel]

I think the right regex is ^(\/+\w+)+$

Normally your dest key is just.

[dohomi]

@bluebeel what would be the dest key? I'm still not sure how this now v2 works, I was using the v1 only till today.. Does it actually affect serverMiddleware as well?

[dohomi]

@bluebeel Any idea how to make that work? I tried several approaches with the routes config but nothing worked. Page-reload on a subdirectory page always results in now 404 error

 "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@bluebeel/nuxt"
    }
  ],
  "routes": [
    {
      "src": "/.*",
      "dest": "/index"
    }
  ]

All pages work but the JS files are not found (404) https://nuxt-storyblok-naturheilpraxis-7hmbzwl1x.now.sh/

[bluebeel]

It doesn't find your vendor file and it's completely normal because the builder doesn't consider a file with this name. https://github.com/bluebeel/now-nuxt/blob/d322ddcd9d788c8fae463953c31ac06c7e684c4f/index.js#L160-L184 This file is generated from what?

[dohomi]

Hi, so this is my nuxt config:

module.exports = () => {
  return {
    srcDir: 'src/',
    mode: 'universal',
    modules: [
      ['storyblok-nuxt', {accessToken: StoryblokToken[process.env.NODE_ENV], cacheProvider: 'memory'}]
    ],
    plugins: [
      '~/plugins/components',
      '~/plugins/filters',
      '~/plugins/bootstrap-vue',
      '~/plugins/webp-support'
    ],
    router: {
      middleware: 'languageDetection',
      extendRoutes (routes, resolve) {
        routes.push({
          name: 'custom',
          path: '/:slug*',
          component: '~/pages/index.vue'
        })
      }
    },
    serverMiddleware: [
      '~/server-middleware/server-middleware'
    ],
    render: {
      resourceHints: false
    },
    modern: 'server',
    /*
    ** Build configuration
    */
    build: {
      /*
      ** Run ESLint on save
      */
      extend (config, ctx) {
        if (ctx.dev && process.client) {
          config.module.rules.push({
            enforce: 'pre',
            test: /\.(js|vue)$/,
            loader: 'eslint-loader',
            exclude: /(node_modules)/
          })
        }
      },
      filenames: {
        app: '[name].js',
        chunk: '[name].js'
      }
    }
  }
}

So do I need to add vendor: '[name].js' to the filenames array? Or is there any option I shouldn't use inside of the nuxt config?

[bluebeel]

No no, it's a modification on my side. I need to update the build process. I will do this this weekend.

[dohomi]

I guess similar to how now-next is doing the file gathering would be the best: https://github.com/zeit/now-builders/blob/master/packages/now-next/index.js#L221 Beside that I found a little typo in your code: https://github.com/bluebeel/now-nuxt/blob/d322ddcd9d788c8fae463953c31ac06c7e684c4f/index.js#L262 There is .next/ instead of .nuxt/

[bluebeel]

Hi and sorry for the delay, I spent my exam session. I updated the builder. I think it solves your problem now.

[dohomi]

Hi

thanks for coming back to me. I tried the deploy today but now it doesn't build any longer:

fs.js:646
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^

Error: ENOENT: no such file or directory, open '/tmp/.cache/yarn/v4/npm-caniuse-lite-1.0.30000930-c238bab82bedb462bcbdc61d0334932dcc084d8a/node_modules/caniuse-lite/data/features/css-text-spacing.js'
    at Object.fs.openSync (fs.js:646:18)
    at Object.fs.writeFileSync (fs.js:1299:33)
    at Object.fs.createWriteStream.args [as createWriteStream] (/tmp/utils/node_modules/@now/build-utils/fs/bootstrap-yarn.js:30:6)
    at onfile (/var/task/bin/yarn:45435:20)
    at /var/task/bin/yarn:45467:31
    at /var/task/bin/yarn:45499:7
    at /var/task/bin/yarn:52814:26
    at FSReqWrap.oncomplete (fs.js:153:5)

I'm running now with npm but its not able to finish building the lambdas

[bluebeel]

I don't see where the problem come from. Can you share the full log, package.json?

[dohomi]

this is the log with the normalized package.json. I don't understand why there are so often network failed error messages in the log though..

01/28 04:11 PM (7m)
normalized package.json result:  { name: 'mywebsite',
  version: '1.0.0',
  description: 'NuxtJs Storyblock web project',
  author: 'Dominic Garms <djgarms@gmail.com>',
  private: true,
  scripts: 
   { dev: 'nuxt',
     build: 'nuxt build',
     start: 'nuxt start',
     generate: 'nuxt generate',
     deploy: 'NODE_ENV=production now',
     lint: 'eslint --ext .js,.vue --ignore-path .gitignore .',
     precommit: 'npm run lint',
     'now-build': 'nuxt build --no-generate' },
  dependencies: 
   { 'bootstrap-vue': '^2.0.0-rc.11',
     'froala-design-blocks': '^2.0.1',
     marked: '^0.3.12',
     nuxt: '^2.3.4',
     'storyblok-nuxt': '^1.0.1',
     'supports-webp': '^1.0.5' },
  devDependencies: 
   { 'babel-eslint': '^10.0.1',
     'css-loader': '^2.1.0',
     eslint: '^5.12.0',
     'eslint-config-standard': '^12.0.0',
     'eslint-loader': '^2.1.1',
     'eslint-plugin-html': '^5.0.0',
     'eslint-plugin-import': '^2.14.0',
     'eslint-plugin-node': '^8.0.1',
     'eslint-plugin-promise': '^4.0.1',
     'eslint-plugin-standard': '^4.0.0',
     'node-sass': '^4.11.0',
     'sass-loader': '^7.1.0',
     'vue-loader': '^15.5.0' } }
01/28 04:11 PM (7m)
running npm install...
01/28 04:11 PM (7m)
installing to /tmp/900e8a3
01/28 04:11 PM (7m)
using memory-fs for yarn cache
01/28 04:11 PM (7m)
yarn install v1.12.3
01/28 04:11 PM (7m)
info No lockfile found.
01/28 04:11 PM (7m)
[1/4] Resolving packages...
01/28 04:11 PM (7m)
warning eslint > file-entry-cache > flat-cache > circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
01/28 04:11 PM (7m)
[2/4] Fetching packages...
01/28 04:12 PM (6m)
info There appears to be trouble with your network connection. Retrying...
01/28 04:12 PM (6m)
info There appears to be trouble with your network connection. Retrying...
01/28 04:13 PM (5m)
info There appears to be trouble with your network connection. Retrying...
01/28 04:14 PM (5m)
info There appears to be trouble with your network connection. Retrying...
01/28 04:14 PM (4m)
info There appears to be trouble with your network connection. Retrying...
01/28 04:14 PM (4m)
error An unexpected error occurred: "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz: ESOCKETTIMEDOUT".
01/28 04:14 PM (4m)
info If you think this is a bug, please open a bug report with the information provided in "/tmp/900e8a3/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
01/28 04:14 PM (4m)
info There appears to be trouble with your network connection. Retrying...
01/28 04:14 PM (4m)
info There appears to be trouble with your network connection. Retrying...
01/28 04:15 PM (3m)
info There appears to be trouble with your network connection. Retrying...
01/28 04:15 PM (3m)
info There appears to be trouble with your network connection. Retrying...
01/28 04:16 PM (3m)
info There appears to be trouble with your network connection. Retrying...
01/28 04:16 PM (2m)
info There appears to be trouble with your network connection. Retrying...
01/28 04:16 PM (2m)
info There appears to be trouble with your network connection. Retrying...
01/28 04:16 PM (2m)
error https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.7.tgz: ESOCKETTIMEDOUT
01/28 04:17 PM (1m)
fs.js:646
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^

Error: ENOENT: no such file or directory, open '/tmp/.cache/yarn/v4/npm-caniuse-lite-1.0.30000932-d01763e9ce77810962ca7391ff827b5949ce4272/node_modules/caniuse-lite/data/features/beacon.js'
    at Object.fs.openSync (fs.js:646:18)
    at Object.fs.writeFileSync (fs.js:1299:33)
    at Object.fs.createWriteStream.args [as createWriteStream] (/tmp/utils/node_modules/@now/build-utils/fs/bootstrap-yarn.js:30:6)
    at onfile (/var/task/bin/yarn:45435:20)
    at /var/task/bin/yarn:45467:31
    at /var/task/bin/yarn:45499:7
    at /var/task/bin/yarn:52814:26
    at FSReqWrap.oncomplete (fs.js:153:5)
01/28 04:17 PM (1m)
Error: Exited with 1
    at ChildProcess.child.on (/tmp/utils/node_modules/@now/build-utils/fs/run-user-scripts.js:14:16)
    at emitTwo (events.js:126:13)
    at ChildProcess.emit (events.js:214:7)
    at maybeClose (internal/child_process.js:925:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
01/28 04:17 PM (1m)
patching https://api-sfo1.zeit.co/v2/now/deployments/dpl_AicvMCGK8rMCGsabku5UFEuURVFp/builds/bld_40s9stz86 with {"readyState":"ERROR","errorCode":"BUILD_FAILED_2"}

[bluebeel]

it looks like it's not a problem with my build but their platform. Can you create a post on their chat?

[bluebeel]

@dohomi i saw this on the spectrum chat . it looks like the problem comes from some librairies with yarn. Did you try removing the yarn.lock and using npm with package-lock?

[dohomi]

Hi @bluebeel I use npm all the time and don't have any yarn.lock neither used it. I openend a question on spectrum itself but haven't received an answer yet