Deployment: What and how?

[getflourish]

Developing a site with this Starter Kit was super nice, especially with the newer versions that even come with automatic component imports etc. Thank you!

Now it’s time for deployment, but I don’t understand how.

As far as I understood, Node is not required on the server, but only to build the frontend, right?

From the README:

Node.js with npm (only required to build the frontend)

1. What folder do I need to deploy? The whole repository? Just public or just the contents of public? What does "point your server to public" mean?

I’ve tried a couple of things but I’m clueless how this should work.

[johannschopplich]

Hey Florian,

thanks for the flowers! Regarding deployment, what service do you use? This starter kit follows the public folder setup. Pretty common in the Laravel universe as well.

Clone your whole repository and tell your web server the project web root is /public, not the index. I'm using Ploi.io, which lets me configure the web root like this:

If you're setting up your server configs manually, say for Nginx, you can use the root key:

server {
  # Directory to serve files from
  root /var/www/getflourish/public;
}

On shared hosters like Uberspace, you can just clone your repo and create a symlink to the /public directory and match the domain name.

[jtackmann]

Hi @johannschopplich,

thanks for this cool Starterkit! I followed your last advice to quickly check how the deployment would work. Simply uploaded all data after the build command on a shared hosting directory (LAMP no node), adjusted the domain routing and voila could access the Kirby panel – but the frontend would not load properly.

Investigating with the console showed, that script tags in < head >, generated by kirby-vite are pointing to localhost:3000.

<script src="http://localhost:3000/@vite/client" type="module"></script> <script src="http://localhost:3000/main.js" type="module"></script>

I assume that is the value for DEV mode. But I don't understand why. Did I miss something? I even added KIRBY_MODE=production to the .env

Many Thanks
Jan

[johannschopplich]

@jtackmann I recommend running the build command on the server, not locally.

The KIRBY_MODE environment variable is intended for Docker setups or other more complex setups. You won't need to adapt it yourself it the build command runs successfully on the server-side.

The src/.lock file probably still persists on your server. It will be deleted by the hupf command. Make sure to delete it, your website then should load properly. 😊

[trych]

I also have a deployment issue. I tried to follow the instructions, cloned the entire repo (to an uberspace subdirectory), composer install and npm ci run fine, but when I run the npm run build command, I get an error:

internal/process/esm_loader.js:74
    internalBinding('errors').triggerUncaughtException(
                              ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'fs' imported from /var/www/virtual/trych/html/kirby-vue3-starterkit/scripts/buildServiceWorker.mjs
    at packageResolve (internal/modules/esm/resolve.js:664:9)
    at moduleResolve (internal/modules/esm/resolve.js:705:18)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:798:11)
    at Loader.resolve (internal/modules/esm/loader.js:100:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:246:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:47:40)
    at link (internal/modules/esm/module_job.js:46:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @4.1.0 build: `shx rm -f src/.lock && vite build && node scripts/buildServiceWorker.mjs`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @4.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/trych/.npm/_logs/2022-02-22T21_54_07_478Z-debug.log

Any idea, what could be causing this? Thanks!

[johannschopplich]

@trych What's your Node.js version?

[trych]

@johannschopplich v12.22.10

[trych]

@johannschopplich Ah sorry, I realize now this is quite an old one and Uberspace will easily allow me to pick a newer one. Sorry 🙈. Will give this a try.

[johannschopplich]

I recommend the latest LTS version, which is 16.

Prior to 14 Node didn't has had ESM support. Thus, the build pipeline failed. 😊

[trych]

Ok, it does build now with Node.js v16, but when I try to load the page it shows the title, but no content and gives me a bunch of 404 errors. Do I need to set something else? Is it maybe an issue that this happens in a subdirectory on Uberspace? I am just trying to directly open the site in mydomain.dev/projectname/public for now (just testing).

I think it tries to access stuff on mydomain.dev/assets/ etc. directly, which would of course fail. Any way to redirect these calls to the subdirectory? (sorry, if I am not using the right vocabulary, I am not very skilled with server setups and routing etc.) I don't want this page to take over my entire Uberspace, I would like to have it on a subdirectory for testing for now.

Also, do I need to change anything in .env or is it sufficient to just copy the .env.production.example content?

[johannschopplich]

You have to point your web server to the public directory. Speaking for Uberspace:

• Clone your repo into /var/www/virtual/trych/sites/example.com
• Then install composer deps and build the frontend assets.
• Link the public folder:

  ln -s /var/www/virtual/trych/sites/example.com/public /var/www/virtual/trych/example.com

Now, when you open example.com the public directory serves as the index directory.

Of course you will have to register the domain via uberspace web domain add "example.com".

[trych]

Hm, I think you misunderstand what I am trying to do. I don't want to serve this starterkit at the main domain example.com, I would rather like to serve it under a sub-route of example.com for testing purposes. So, I would like to serve this under example.com/kirby-vue3-starterkit or even under example.com/kirby-vue3.starterkit/public. I don't mind the awkward url, as it's only for testing.

But when I open that URL, it tries to access assets and other things at example.com/dist/assets instead of example.com/kirby-vue3-starterkit/public/dist/assets where they are actually located.

Does this make any sense? Is there any way to point these requests to the correct location?

[johannschopplich]

I see. Well, that's gonna be tricky. You will have to set the base URL for the Vue router and the backend routes maybe as well.

Doesn't a subdomain equally serves your testing purposes? I recommend just creating staging.example.com. The setup will then work without a hassle.

[trych]

Doesn't a subdomain equally serves your testing purposes? I recommend just creating staging.example.com. The setup will then work without a hassle.

That might be an idea. Will look into how to serve a folder to a subdomain on Uberspace. Thanks!

[jonasholfeld]

Hi! Thanks a lot for this great Starterkit, love it!! 🌸🌸🌸

A quick question about deployment: I managed to deploy the project to my uberspace, it's in a subfolder, so the domain looks like this:
https://username.uber.space/vuekirby/
vuekirby is a symlink that points to the public directory. In the .htacces I have:

RewriteBase /vuekirby

and it works fine for the panel! The frontend however throws an error when the Javascript is trying to fetch data from the Kirby API and I can see that it's trying to fetch it from

https://username.uber.space/app/home.json
which is of course wrong.

https://username.uber.space/vuekirby/app/home.json
works fine.

So here comes my question: how can i tell the Javascript that the Kirby API is available under vuekirby/app instead of /app ?

Thanks a lot!

[johannschopplich]

@jonasholfeld Thanks for the flowers!
You can modify the base URL for client-side data fetching here:

kirby-vue3-starterkit/src/composables/useKirbyApi.js

Line 15 in 4d7d79f

return joinURL(

[jonasholfeld]

That did the trick, thanks a lot!

[zhampu]

@johannschopplich

trying to put template online :)

web dIrectory already on /public but the he panel adresse gives a 404 not found and the front end is not loading correctly.

Example error:

/app/home.json:1 Failed to load resource: the server responded with a status of 404 (Not Found)
main-3a0c5220.js:5 

FetchError:  (404 Not Found (/app/home.json))
    at async Up (main-3a0c5220.js:5:30502)
    at async main-3a0c5220.js:5:31070

Those file dont exist at all so I dont know how to find their real address. Should I rebuild some special setting? can you help me find the real adresse for the backend?

this is the working link where im putting up the template: https://site.lumbungradio.org/