Closed pdehne closed 2 days ago
rfay
commented
3 days ago If you could do a ddev debug test and put it as a gist in gist.github.com we'd know more about your project and what you're trying to do. If you could show the top of your .ddev/config.yaml (before the comments) that would help too.
pdehne
commented
3 days ago Many thanks for taking a look!
Sure here is the gist: ddev debug test.
Here is the ddev/config.yaml:
name: keb-bc-slg.de
type: typo3
docroot: public
php_version: "8.3"
webserver_type: apache-fpm
router_http_port: "8090"
router_https_port: "8443"
xdebug_enabled: false
additional_hostnames: []
additional_fqdns: []
database:
type: mariadb
version: "10.11"
webimage_extra_packages: [graphicsmagick, poppler-utils, catdoc, unrtf]
use_dns_when_possible: true
timezone: Europe/Berlin
composer_version: "2"
web_environment:
- TYPO3_CONTEXT=Development
corepack_enable: falseAlso the config.vite.yaml, just in case it is relevant:
#ddev-generated
additional_hostnames:
- vite.keb-bc-slg.de
web_environment:
- VITE_SERVER_URI=https://vite.keb-bc-slg.de.ddev.site
- VITE_PACKAGE_MANAGER=npmPlease start your work without the vite configuration first, and make sure it all works. The vite port will be on an alternate port from your 8443. You have 8443 set up as the main port for the project, if that's the case, you can't also use it for your vite port.
I also see
origin: "https://vite.keb-bc-slg.de.ddev.site:8443"Normally you would use http://web there, rather than going through the router. For more detail see https://ddev.readthedocs.io/en/stable/users/usage/faq/#can-different-projects-communicate-with-each-other, which is about different projects, but in your case, different container.
pdehne
commented
3 days ago Sorry, I am new to DDEV, so please bear with me :-)
When you say try without the vite configuration first, are you refering to config.vite.yaml or vite.config.js? I removed vite.config.js for now but still get a 404 error.
As you say the main project is at 8443. The complete URL is https://keb-bc-slg.de.ddev.site:8443/ and it works. My impression was, with ddev-vite-sidecar installed, and doing ddev vite, I should be able to open https://vite.keb-bc-slg.de.ddev.site:8443 and see the same page?
rfay
commented
3 days ago If the regular project works, then you're getting started.
But you won't be running vite on the same port (8443) at least in any example I've seen. You need to run it on a different port, as in the various examples in this project and also please make sure you've read https://ddev.com/blog/working-with-vite-in-ddev/
stasadev
commented
3 days ago But you won't be running vite on the same port (8443)
It really runs on the same port, but with a different subdomain.
See README:
https://github.com/s2b/ddev-vite-sidecar/blob/fd119a47c4fbf9ab807beef6e7bf9830fbeff72f/README.md#L63
I confirmed that this add-on works fine with default Laravel setup using nginx-fpm and apache-fpm.
But it doesn't work somehow with TYPO3 for @pdehne
s2b
commented
3 days ago Looks like this is another special case I need to handle. My guess would be that this is related to your custom port. I'll have a look later.
@rfay The point of this add-on is that you don't need a separate port. That's a feature, not a bug. :)
s2b
commented
3 days ago I have a hunch what's going on here.
The TYPO3 website I am developing can be reached locally using https://keb-bc-slg.de.ddev.site:8443/ without problems. But when I start the Vite development server using
ddev viteand try to reach the website using https://vite.keb-bc-slg.de.ddev.site:8443/ I get an 404 error:
Your TYPO3 site shouldn't be accessible from the vite subdomain, but rather from the project domain. That's why there is a 404, because there is no index.html file the vite server can use.
What should work is to access static frontend asset files through the vite server, like this (adjust path accordingly):
curl -k --verbose https://vite.keb-bc-slg.de.ddev.site:8443/packages/sitepackage/Resources/Private/JavaScript/MyScript.js
If that is indeed working (let me know if it isn't), the main problem seems to be that the add-on doesn't set the vite domain properly into the environment variable:
Also the config.vite.yaml, just in case it is relevant:
#ddev-generated additional_hostnames: - vite.keb-bc-slg.de web_environment: - VITE_SERVER_URI=https://vite.keb-bc-slg.de.ddev.site - VITE_PACKAGE_MANAGER=npm
To verify this, please add the port to VITE_SERVER_URI in your config.vite.yaml file and restart ddev. If this fixes the problem, I need to think about how I can solve this (or if this should only be documented).
pdehne
commented
2 days ago What should work is to access static frontend asset files through the vite server, like this (adjust path accordingly):
curl -k --verbose https://vite.keb-bc-slg.de.ddev.site:8443/packages/sitepackage/Resources/Private/JavaScript/MyScript.js
If that is indeed working (let me know if it isn't), the main problem seems to be that the add-on doesn't set the vite domain properly into the environment variable:
This is working!
To verify this, please add the port to
VITE_SERVER_URIin yourconfig.vite.yamlfile and restart ddev. If this fixes the problem, I need to think about how I can solve this (or if this should only be documented).
Adding the port does not help, I changed config.vite.yaml like so:
#ddev-generated
additional_hostnames:
- vite.t3-test
web_environment:
- VITE_SERVER_URI=https://vite.t3-test.ddev.site:8443
- VITE_PACKAGE_MANAGER=npmThen I restarted ddev and vite like so:
ddev restart
ddev viteWhen I open https://[vite.t3-test.ddev.site](https://vite.t3-test.ddev.site:8443/):8443/ I still get an 404 error.
pdehne
commented
2 days ago Here are step by step instructions to get my environment up and running, in case you like to reproduce.
Setup the TYPO3 Website
mkdir t3-test && cd t3-test
ddev config --project-type=typo3 --docroot=public --php-version 8.3 --router-http-port=8080 --router-https-port=8443 --timezone Europe/Berlin --web-environment="TYPO3_CONTEXT=Development" --webserver-type apache-fpm
VITE_PACKAGE_MANAGER=npm ddev add-on get s2b/ddev-vite-sidecar
ddev composer create --no-install "typo3/cms-base-distribution:^13.4"
ddev composer install
ddev typo3 setup --server-type=apache --driver=mysqli --host=db --port=3306 --dbname=db --username=db --password=dbAdmin username ? admin
Admin user and installer password ? [some-password]
Admin user email ? [leave empty]
Give your project a name ? TYPO3 Test
Create a basic site? https://t3-test.ddev.site:8443
Recreate the containers: ddev restart
Create a static test file: cat 'Hello World' > public/hello.txt
Double check the main website is up and running by opening https://t3-test.ddev.site:8443 in your web browser.
Double check the static test file is accessible by opening https://t3-test.ddev.site:8443/hello.txt in your web browser.
Setup and start the vite dev server:
ddev npm i vite
ddev viteTry to open the static test file using the vite development server https://vite.t3-test.ddev.site:8443/hello.txt in your web browser.
Try to open the website through the vite development server by opening https://vite.t3-test.ddev.site:8443.
Change config.vite.yaml by adding the port to VITE_SERVER_URI as described above, restart ddev and try opening https://vite.t3-test.ddev.site:8443 again.
s2b
commented
2 days ago As I said, you shouldn't access the TYPO3 from the vite domain, that won't work. The vite domain only serves frontend assets and some vite-internal stuff.
stasadev
commented
2 days ago you shouldn't access the TYPO3 from the vite domain, that won't work
Oh, that's what it is, good to know. I thought that any Vite server had a homepage. For example, in Laravel it opens this https://stackoverflow.com/q/74633234/8097891 when accessing the vite subdomain.
So, a 404 actually means it's working fine.
pdehne
commented
2 days ago I just can't get it to work with TYPO3. I am using https://github.com/s2b/vite-asset-collector and vite-plugin-typo3 on the TYPO3 side, and ddev-vite-sidecar:
ddev vite shows:
For vite.config.js I follow the recommendation of vite-asset-collector:
import { defineConfig } from "vite";
import typo3 from "vite-plugin-typo3";
export default defineConfig({
plugins: [typo3({ debug: true })],
});I got it finally to work after going through everything again.
With correctly configured vite-asset-collector and vite-plugin-typo3, my custom port 8443 needs to be added to config.vite.yaml, like @s2b suggested:
#ddev-generated
additional_hostnames:
- vite.t3-test
web_environment:
- VITE_SERVER_URI=https://vite.t3-test.ddev.site:8443
- VITE_PACKAGE_MANAGER=npmMany thanks for your support to all of you! I would not have been able to get this working without your help.
s2b
commented
2 days ago Thank you for your valuable input while debugging this. I've created #13 and #14 as follow-ups, so I'm closing this issue now.
s2b
commented
2 days ago ... and remember to remove #ddev-generated from the config file for now to prevent future updates from breaking your custom setup.
The TYPO3 website I am developing can be reached locally using https://keb-bc-slg.de.ddev.site:8443/ without problems. But when I start the Vite development server using
ddev viteand try to reach the website using https://vite.keb-bc-slg.de.ddev.site:8443/ I get an 404 error:If I stop the
ddev vitecommand and try to reach the website again usinghttps://vite.keb-bc-slg.de.ddev.site:8443/I get thevite-server-not-running.htmlresponse. So the request is at least reaching the proxy (https://github.com/s2b/ddev-vite-sidecar/blob/main/apache/vite.conf) that should forward the request to the Vite development server:I stripped down my
vite.config.jsto the very basic, the Vite development server needs only to proxy all requests to the TYPO3 website:Do you an idea why I do get a 404 error through the Vite development server?