DEV Community

Marcin Wosinek
Marcin Wosinek

Posted on • Originally published at how-to.dev

 

How to make SolidJS application work from a subfolder

In this article, I'll show how to make SolidJS application work from a subdirectory - for example, deployed on GitHub pages.

Code

First, let's generate code following the documentation:

$ npx degit solidjs/templates/js solid-subfolder
npx: installed 1 in 0.785s
> cloned solidjs/templates#HEAD to solid-subfolder
Enter fullscreen mode Exit fullscreen mode

The problem

After installing with npm install & build with npm run build, your output will fail if you access it from a subdirectory. So, in my case, I try to access it on http://localhost/github/solid-subfolder/dist/, and I get:
solid-subfolder-fail.png

As you can see, by default, index.html tries to load assets from the domain root - for example, it tries loading http://localhost/assets/index.1b7ca044.js.

The fix

Vite controls the base imports on the HTML side. As it's shown in the documentation the default value is /. We can change it in vite.config.js:

 export default defineConfig({
   plugins: [solidPlugin()],
+  base: "./",
   build: {
     target: "esnext",
     polyfillDynamicImport: false,
Enter fullscreen mode Exit fullscreen mode

With this change in place, the application works as expected:
working-app.png

Links

Here you can find the repo & the working app

Summary

In this article, we have seen how to make the SolidJS app work when deployed to a subfolder.

Top comments (2)

Collapse
 
lexlohr profile image
Alex Lohr

A base: "" will also do the job. However, this starter does not have working SSR support. There's a new solid-start package in preparation, but it's not finished yet.

Collapse
 
marcinwosinek profile image
Marcin Wosinek

thanks for sharing the info!

Welcome! πŸ‘‹ New to DEV?

Head over to our Welcome Thread and tell us a bit about yourself!