Serve other static index.html and assets on subpath(s)?

[chris-dura]

Description

I basically have 3 "apps", each are "static" bundles with their own relative assets.

my-app/
├── app2/
│   ├── app2.js
│   └── index.html
├── app3/
│   ├── index.css
│   └── app3.js
├── index.html
└── my-app.js

When I run serve -l 5280 my-app, I can browse to http://localhost:5280 and it serves my-app/index.html and the my-app.js just fine.

However, when I type http://localhost:5280/app2 in the address bar, the app2/index.html loads, but I get a 404 on app2.js :/

Library version

v14.2.0

Node version

v16.17.0

[aasen]

I have the same issue.

[yairEO]

Even if you will directly run serve app2/index.html you'll get 404 for the assets (but the HTML itself will be served...)

[chris-dura]

Even if you will directly run serve app2/index.html you'll get 404 for the assets (but the HTML itself will be served...)

... do you mean serve my-app/app2? Because, it should get the assets just fine in that case, since app2/index.html has relative asset URLs... eg, <script src="./app2.js"/>

[yairEO]

No, I mean, if you directly serve an .html file, all its assets return 404

[chris-dura]

No, I mean, if you directly serve an .html file, all its assets return 404

fwiw, all the docs and examples show serving folders, not a single .html file, so this might not be a supported usage? 🤷

$ serve my-app/path/to/some/index.html

... but I would expect this to work (and in my experience it does 🤷🏻)

$ serve my-app/path/to/some

[yairEO]

@chris-dura - I do not want to serve folders in any way. I only need to serve single files:

serve my-app/path/to/some/1.html
serve my-app/path/to/some/2.html
serve my-app/path/to/some/3.html

And so on. These files have assets which cannot be loaded due to 404

[chris-dura]

@yairEO -- Right, there's nothing in the docs that indicate serving single files like that would be supported.

I understand if there's a reason you can't do this, but if you change them to index.html files...

my-app/path/to/some/1/index.html
my-app/path/to/some/2/index.html
my-app/path/to/some/3/index.html

... then this would work out-of-the-box with no extra configuration ...

serve my-app/path/to/some/1
serve my-app/path/to/some/2
serve my-app/path/to/some/3

You might also be able to configure some redirects/rewrites in serve.json.

[yairEO]

I cannot change them to index.html because they are all in the same folder and cannot be moved. Also, the name of the html files is important.

I am using http-server which can do this extremely simple thing, which serve cannot.

[ultravires]

I have the same issue.

[pandanoir]

Suggestion: Add singleFile option and use it to rewrite destination.

   config.rewrites = [ 
     { 
       source: '**', 
       destination: args['--singleFile'],
     }, 
     ...existingRewrites, 
   ]; 

(The above code is pseudocode, so it might not work)

serve/source/main.ts

Lines 78 to 90 in c8b7436

	if (args['--single']) {
	const { rewrites } = config;
	const existingRewrites = Array.isArray(rewrites) ? rewrites : [];
	// Ensure this is the first rewrite rule so it gets priority.
	config.rewrites = [
	{
	source: '**',
	destination: '/index.html',
	},
	...existingRewrites,
	];
	}

[pandanoir]

Temporary solution: Write a serve.json and set the --config option

serve build --config ../serve.json

directory structure:

packages/internal-cms
├── build
│  └── path/to/index.html
└── serve.json

serve.json:

{
  "rewrites": [
    {
      "source": "**",
      "destination": "/path/to/index.html"
    }
  ]
}