Scully prerender - Cannot GET dynamic route

Question

I'm using scully for prerendering bunch of routes, and I skip routes for /board/:boardId:

   routes: {
        "/board": {
            type: 'ignored'
        }
    },
    extraRoutes: ["/",
        "/dashboard",
        "/uses"
    ]

The /board route is dynamic, i.e. it looks like /board/[user-generated-boardId], but when I navigate to it using npx scully serve, It breaks, e.g.

I don't want to prerender /board/:boardId routes, and they should work just like an angular SPA, but seems like scully server is trying to map them to a directory path within dist.

Any suggestion on how I can get both static and dynamic routes working with scully, would be great ! Thanks.

Sander Elias · Answer 1 · 2022-04-25T09:28:54.280

You defined a route for /board which will exclude that route. However, you did not define a route for /board/:boardId so Scully will try to render that route. Amend your config like this:

        "/board": {
            type: 'ignored'
        },
        "/board/:boardId": {
            type: 'ignored'
        }
    },

That will likely solve your issue.

For the other part of your question, Scully will try to match the routes it found during discovery by default. This is done so you will be alarmed during testing that this route isn't there. After all, the Scully server is a development, not a deployment tool. If you need/want to serve the index.html on routes not found, you can use the 404 option. You can add that to your CMD line like this:

npx scully serve --404=index

By doing that, Scully will serve the index.html on any route that is not pre-rendered.

score 1 · Accepted Answer · answered Apr 27 '22 at 16:19

When Scully can not find a route it should default to the expected Angular client side rendered page generation. To take advantage of some of the benefits of static pages and Scully you could generated a base page for dynamic routes tell Scully to ignore the remainder of the dynamic route.

Example is turning this routing-module path:

const routes: Routes = [
  { path: 'stuff/:id', component: StuffComponent },
];

Into two routes where one is generated and the other is ignored:

const routes: Routes = [
  { path: 'stuff', component: StuffComponent },
  { path: 'stuff/:id', component: StuffComponent },
];

Don't forget to ignore the dynamic route in your scully.app-name.config.ts

export const config: ScullyConfig = {
  projectRoot: './src',
  projectName: 'app-name',
  outDir: './dist/static',
  routes: {
  '/stuff/:id': {
    type: 'ignored',
   },
  },
};

If you need to turn OFF or ON specific content when either running or generating utilize Scully's 2 utility methods isScullyRunning() & isScullyGenerated()

WARNING By design the Scully dev server WILL NOT LOAD DYNAMIC ROUTES. That is, if you follow the above approach npx scully serve will still result in the Cannot GET ... error. You will have to use a fully featured server to run to see the results. For example in your terminal:

cd dist/static
npx http-server

Sanjay Verma · Answer 3 · 2022-04-22T23:13:03.333

The answer is for firebase hosting, but should apply more generally.

As I'm using firebase hosting, I solved it using firebase hosting config within my project's firebase.json:

{
    "hosting: [
    {
      "target": "static",
      "public": "dist/static",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "/dashboard/**",
          "destination": "/dashboard/index.html"
        },
        {
          "source": "/uses/**",
          "destination": "/uses/index.html"
        },
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    }
  ]
}

This config dictates that dashboard and uses routes should map to specific folder paths, and rest should map to index.html in the root directory.

Reference: https://firebase.google.com/docs/hosting/full-config

==

P.S. My local server with npx scully serve still can't load those dynamic /board/** routes, but at least it works when deployed to firebase. Suggestions very welcome!!

Scully prerender - Cannot GET dynamic route

3 Answers3