Http://localhost:5173 doesn't open / I cannot run the game

After ‘npm install’ I write ‘npm start’, but the browser doesn’t open. Even copying the localhost number, there is no answer.

I have no idea why.

Do you mean copying the full localhost URL?

Ie http://localhost:5173

And does the page hang and not finish loading at all, or are you able to see errors in the browser console?

Otherwise it’s very weird as it’s not showing any error. Only thing I can think of is if maybe something on the pc is already using port 5173 and you’d need to give an option to the vite command to use a different port?

Also is this just a game freshly created or were there changes? Did it stop working at some point or wasn’t working from the start?

Yeah. I copied and pasted on Chrome and Opera. It says the response took too long.

And freshly created. Totally new here. First and two steps done in “Getting Started”.

Have you tried writing npm start again? I always have to do it twice before the link starts working.

I cannot write again. The “text field cursor” is blinking. I cannot do anything.

Ctrl+c in the terminal makes it stop the current program and then you can restart it. Or close and reopen the terminal

Might also be worth rebooting if it’s the first time

Nada. Nothing happens.

Have you considered to offer a downloadable? Something with an installer and I click on an .exe to design inside narrat?

There is technically a possibility of using a prebuilt version of narrat and static files where you just edit all the .narrat files and other assets, but this isn’t documented or supported, and doing it this way would limit many things (no nice dev server with auto reload and hot swapping, no easy way to add plugins or tweak how builds are done etc).

Basically, this could be done by taking any already built narrat web game, and simply changing the files and config inside to replace with your own game…

There must be some kind of reason why your browser isn’t loading localhost though, the project uses common and standard web tools, and your screenshot above seems like it was working fine. Maybe the port is already used like I said, or some other issue in the project or PC setup.

To use a prebuilt narrat game

Here’s a prebuilt narrat game I just made, it’s just the basic empty game.

So if you download this and unzip it, in the dist folder inside is the already compiled web game. You can’t open it directly in a browser because of browser rules, so you need a quick local web server to run it:

  • Open a terminal in the dist folder
  • npm install http-server -g to install the http-server tool
  • running http-server in this folder will open the web server that lets you view the web page

Now at this point you can edit all the config and narrat files directly in the dist folder and basically edit the game as a completely static page. And since it’s already built, if you want to release it somewhere simply zip the dist folder.

Why narrat isn’t meant to be used this way

Narrat makes you setup your own project so that you are free to edit it and use tools, plugins etc. For example this setup allows using electron to build the game for pc, updating dependencies versions, modifying the project to integrate with other web libraries or doing whatever people want.

If I made some kind of editor software, I’d have to spend a lot of time creating and maintaining that instead of making narrat, and it would limit people by not handling possible edge cases.

A narrat game is just a web project basically. You could set it up in other ways, and all an executable would do is launch the same terminal commands.

Also look at those answers on stack overflow. I suspect it’s something with your pc blocking this url or the port already being used.


One of those two solutions could work.

You basically need to open vite.config.ts in the game and you can try adding

server: {
  host: '127.0.0.1',
  port: 8567
}

Inside the config (basically paste this inside the const conf: UserConfigExport = { object).

Then it should open on that host/port and you can see if it works.

So basically:

export default defineConfig(({ command }) => {
  const conf: UserConfigExport = {
    server: {
      host: '127.0.0.1',
      port: 8567
    },
    base: "",
    resolve: {
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)),
      },
    },
    plugins: [vue(), Narrat()],
  };
  return conf;
});

Which then makes it appear with this url:
image

Same. Nothing happens.

Firewall?

Also, I rebooted, reinstalled. Is the warning helping you finding the cause?

I wonder if it’s the folder you’re using? Your folder name has Favorites in it and I remember a windows feature doing some library shortcut thing related to that, especially since you’re on a different drive than C. I can imagine this breaking vite somehow. And the vite troubleshooting pages have this part about windows “cross drive links”.

If this is using the favorites feature, it might be worth trying to run the commands from its actual real path on disk, or if not to move the game somewhere simpler

if you already have the game open in vs code you might need to close it for it to be allowed to delete things. but also if file paths were weird and changed, it might be worth deleting the node_modules folder and redoing npm install to reset it.

Or create the game again fresh in the new place with npm create narrat, since I assume you didn’t change it much if it didn’t work, because there might be weirdness happening from having moved it

Maybe in another time if I have patience again. But for now, I feel old. I get frustrated with renpy, with novelty, with Tuesday, articy, unity, arcweave … github, nuget, I feel like have to be a developer. I don’t understand instructions anymore.

But awesome response time. Impressive. It is definitely sympathetic.

Maybe I am gonna check in another time.

I wish you best of fortune.

OK. With a help of my friend, we found out that it was my VPN blocking.
Why though?