Closed pdehne closed 2 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.
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: false
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
Please 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.
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?
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/
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
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. :)
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 vite
and 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).
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_URI
in yourconfig.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).
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=npm
Then I restarted ddev and vite like so:
ddev restart
ddev vite
When I open https://[vite.t3-test.ddev.site](https://vite.t3-test.ddev.site:8443/):8443/
I still get an 404 error.
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=db
Admin 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 vite
Try 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.
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.
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.
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=npm
Many thanks for your support to all of you! I would not have been able to get this working without your help.
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.
... 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 vite
and 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 vite
command and try to reach the website again usinghttps://vite.keb-bc-slg.de.ddev.site:8443/
I get thevite-server-not-running.html
response. 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.js
to 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?