scullyscullyioangular-scully

Scully prerender - Cannot GET dynamic route


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.

enter image description here

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.


Solution

  • 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