Closed getflourish closed 2 years ago
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.
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.
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
@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. 😊
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!
@trych What's your Node.js version?
@johannschopplich v12.22.10
@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.
I recommend the latest LTS version, which is 16.
Prior to 14 Node didn't has had ESM support. Thus, the build pipeline failed. 😊
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?
You have to point your web server to the public directory. Speaking for Uberspace:
/var/www/virtual/trych/sites/example.com
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"
.
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?
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.
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!
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!
@jonasholfeld Thanks for the flowers! You can modify the base URL for client-side data fetching here: https://github.com/johannschopplich/kirby-vue3-starterkit/blob/4d7d79f42494329e3d01ac57a42e5e0c4c60f5bd/src/composables/useKirbyApi.js#L15
That did the trick, thanks a lot!
@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/
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:
public
or just the contents ofpublic
? What does "point your server topublic
" mean?I’ve tried a couple of things but I’m clueless how this should work.