Navbar issues in single page app templates when running on port 3000

When I run my project using “npm run dev” and “dotnet watch run” the templates load fine and the new navigation items work fine on localhost:5001.

However, if I run “npm start” and “dotnet watch run” and then open localhost:3000, I get the following error with regard to navigation:

TypeError: undefined is not an object (evaluating ‘state.nav.results’)

This error stems from line 46 in the react-spa template of App.tsx, which is:

I think this is because state.nav is coming from the ServiceStack client library, and maybe the baseUrl needs updated (so in other words, while my react app is running on port 3000, it can retrieve the nav items on port 5001, which currently isn’t happening). I prefer running on port 3000 since the create-react-app has a nice error overlay and hot reloading is faster.

The directions in the readme say it’s okay to run on port 3000, but with the new nav features, is there a way to work around this so I can load my nav items from port 5001 or for the nav items to show somehow?

Also, is there an example on how to customize the nav bar items? I was trying to find this in various source codes you have, but was unable to. Thank you for your help,

Tim

Yeah you wont be able to run from port 3000 as the .html pages needs to be served by ServiceStack not from the webpack dev server, I’ve now removed webpack server option from the docs.

You could run it by replacing all #Script methods, i.e:

With external css references and Ajax calls, but that would be detrimental to performance, requiring several additional network requests for the initial page load.

Thank you, this helps a lot. I’ll use the ServiceStack server as you advise.

Can you point me to either docs or source code on how to customize the navbar items. Do I customize this on the server, or in the client code?

There’s a small snippet in the release notes, as follows:

But with the default choices coming from the server, it seems like there might be a way to customize these on the server side. Thank you.

I think I found where the nav items come from…in appsettings.json. I can then modify in here as needed. So this answers my question from above. But just to clarify, these aren’t modified or stored elsewhere…just the server returns them from the appsettings.json file, correct?

Thanks again, Tim

In the templates they’re initialized from appsettings.json but they can also be populated and further modified from code, e.g:

View.NavItems.AddRange(new List<NavItem>
{
    new NavItem { Href = "/",         Label = "Home",    Exact = true },
    new NavItem { Href = "/about",    Label = "About" },
    new NavItem { Href = "/services", Label = "services" },
    new NavItem
    {
        Href = "/contact", Label = "Contact",
        Children = new List<NavItem>
        {
            new NavItem { Href = "/contact/me", Label = "Me" },
            new NavItem { Href = "/contact/email", Label = "Email" },
            new NavItem { Label = "-" },
            new NavItem { Href = "/contact/phone", Label = "Phone" },
        }
    },
    new NavItem { Href = "/login",    Label = "Sign In", Hide = "auth" },
    new NavItem { Href = "/profile",  Label = "Profile", Show = "auth" },
    new NavItem { Href = "/admin",    Label = "Admin",   Show = "role:Admin" },
});

When you add a UI Feature or validation example it uses the code API to automatically make it available to your App’s main menu, but the new project templates only populate it from appsettings.json.