CODEWITHSUNDEEP
solid-js
DavidLar
DavidLar

Reputation: 49

How to deploy a Solid.js project into a non-root folder?

When trying to deploy a Solid.js project using:

npm run build

I get a dist folder generated (a index.html along with an assetfolder containing js, css and images). If I move these files into a root of a webserver, they work perfectly but as fast as I move it into another folder it starts to break. Why is this?

I get 404's on everything that is included in the html file but the htmlfile uses relative filepaths, see example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="shortcut icon" type="image/ico" href="/assets/favicon-0e726a38.ico" />
    <title>Solid App</title>
    <script type="module" crossorigin src="/assets/index-ee67cc3a.js"></script>
    <link rel="stylesheet" href="/assets/index-ba74b708.css">
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

    
  </body>
</html>

How is this possible, if I check for paths in the js file I get only relative paths there aswell.

  1. How and why is this happening?
  2. How to prevent this? Do I need change my way of compiling?

Edit: I'd just like to add that I'm testing this with a freshly generated project, so I don't have any custom paths that might break

Upvotes: 1

Views: 633

Answers (2)

snnsnn
snnsnn

Reputation: 13698

Paths in your html file is not relative, it is relative to the root folder because of the initial /:

src="/assets/index-ee67cc3a.js"

If you want to restructure your dev environment, you need to modify vite's configuration. There is no SolidJS specific setting for what you describe.

https://vitejs.dev/config/shared-options.html

Upvotes: 1

Alex Lohr
Alex Lohr

Reputation: 21

Use the "base" property in your vite.config.ts and add the full path.

Upvotes: 1

Related Questions