-
-
Notifications
You must be signed in to change notification settings - Fork 21
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add ddev config file #111
Add ddev config file #111
Conversation
After looking at some plugins I wonder if Astro dev settings should be part of a plugin such as vite and others. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks - The next thing to add is to update the README explaining how to use it.
You could also get just slightly fancier and change the nginx config to use astro as its upstream instead of php-fpm, and then everything would be on ports 80 and 443.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This seems fine. If you wanted to automatlcally npm run dev
you could do it with a web_extra_daemons
stanza.
I'm looking into the nginx config to switch from php-fpm but I'm not sure if I found the right settings there. Additionally, Astro runs Vite underhood so I figure maybe the Vite ddev add-on or running vite as a web_extra_exposed_ports would do it but so far I haven't been able to get HMR Hot module reloading working with Astro Vite implementation. I saw a few support posts on discord about some getting it to work but they are using a standard vite install and I think Astro does a wrapper which might complicate it a bit. The dev.config file works well as it is if one just runs |
I get an astro.conf in /etc/supervisor/conf.d/astro.config after I do a ddev.ssh with the following settings.
Which seems fine. Looking at this issue ddev/ddev#4872 but port 9998 or 9999 does not let me reach it it gives me a bad gateway. I imagine this should be reachable http://ddev.com.ddev.site:9998/ and I thought that would give me the same output as |
time="2023-10-12T23:55:54Z" level=debug msg="'502 Bad Gateway' caused by: dial tcp 192.168.112.4:4321: connect: connection refused" ddev logs --follow --time |
Got it working, the issue was a missing -- that Atro Vite required to allow all hosts. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Congrats on all the good work. Variety of suggestions, I haven't manually tested yet.
.ddev/config.yaml
Outdated
@@ -0,0 +1,35 @@ | |||
name: astrosite |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Recommend just leaving this out if possible. It will then take the name of the directory it's in.
name: astrosite |
.ddev/config.yaml
Outdated
# The extra -- is a Vite item | ||
# https://github.com/vitejs/vite/discussions/3396 | ||
web_extra_daemons: | ||
- name: astro-dev-deamon |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Might as well spell it as expected.
- name: astro-dev-deamon | |
- name: astro-dev-daemon |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sounds good
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ddev npm run build
gets
▶ src/pages/index.astro
node:internal/event_target:1033
process.nextTick(() => { throw err; });
Since you're using web_extra_exposed_ports you shouldn't be telling people to hit http://127.0.0.1, should be named URL, for example https://ddev.com.ddev.site:4321
(which works)
But https://ddev.com.ddev.site:4321/blog
gets me a 404.
The post-start hook shows By default it will be available at port 4321 - URL:4321
, but there's no reason it can't show the full URL using ${DDEV_PRIMARY_URL}:4321
README.md
Outdated
DDev already has all the dependencies included. | ||
|
||
1. Run `ddev start && ddev npm install` set up the project’s dependencies. | ||
3. `npm run build` can be found at the base URL and `npm run dev` is found at URL:4321. Dev has Vite HMR(hot module reloading) among other features. The site will automatically refresh as you work on it, displaying errors in the relevant console (terminal or browser). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
3. `npm run build` can be found at the base URL and `npm run dev` is found at URL:4321. Dev has Vite HMR(hot module reloading) among other features. The site will automatically refresh as you work on it, displaying errors in the relevant console (terminal or browser). | |
2. `ddev npm run build` can be found at the base URL and `ddev npm run dev` is found at URL:4321. Dev has Vite HMR(hot module reloading) among other features. The site will automatically refresh as you work on it, displaying errors in the relevant console (terminal or browser). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
${DDEV_PRIMARY_URL}:4321 - I was looking for that variable for a while haha, I will work on that.
http://127.0.0.1/ is for the local setup without DDev in case they just want to run npm but maybe I can make that clearer I will double check.
I did not see that build error I will check on that one as well.
Thanks for the feedback.
Not sure what you were hitting there, especially if you had mutagen enabled. Can't tell much about what you were running against with Colima without knowing what Colima config you were using and whether you had mutagen enabled. However, note that Lima just had an update... |
https://ddev.readthedocs.io/en/stable/users/install/docker-installation/#macos Yeah, I might have gone too close to the bleeding edge now. O well, it will work eventually hahaha. |
Not sure how you can get permissions errors with that setup if using mutagen. New limactl version (which makes a big difference) is
|
Ups, I was not using mutagen. Thanks for adding that note. |
It's working!!! and I think is ready. To run it in ddev make sure to run If it fails then run Sometimes the npm cache will get stuck if one compiles it locally and then inside the container. Doing both creates chaos and requires a little more knowledge of the npm cache. |
README.md
Outdated
@@ -65,7 +65,7 @@ All commands are run from the root of the project, from a terminal: | |||
|
|||
DDev already has all the dependencies included. | |||
|
|||
1. Run `ddev start && ddev npm install` set up the project’s dependencies. | |||
1. Run `ddev start && ddev npm cache clean --force && ddev npm install ` set up the project’s dependencies. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Safe to get rid of the extra space unless that was important:
1. Run `ddev start && ddev npm cache clean --force && ddev npm install ` set up the project’s dependencies. | |
1. Run `ddev start && ddev npm cache clean --force && ddev npm install` set up the project’s dependencies. |
README.md
Outdated
@@ -65,7 +65,7 @@ All commands are run from the root of the project, from a terminal: | |||
|
|||
DDev already has all the dependencies included. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not sure where “DDev” came from, but it should always be referred to as DDEV the product or ddev
the command.
DDev already has all the dependencies included. | |
DDEV already has all the dependencies included. |
README.md
Outdated
@@ -65,7 +65,7 @@ All commands are run from the root of the project, from a terminal: | |||
|
|||
DDev already has all the dependencies included. | |||
|
|||
1. Run `ddev start && ddev npm install` set up the project’s dependencies. | |||
1. Run `ddev start && ddev npm cache clean --force && ddev npm install ` set up the project’s dependencies. | |||
3. `ddev npm run build` can be found at the base URL and `ddev npm run dev` is found at https://<projectname>.ddev.site:4321. Dev has Vite HMR(hot module reloading) among other features. The site will automatically refresh as you work on it, displaying errors in the relevant console (terminal or browser). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
3 → 2, fix spacing, reword slightly for clarity:
3. `ddev npm run build` can be found at the base URL and `ddev npm run dev` is found at https://<projectname>.ddev.site:4321. Dev has Vite HMR(hot module reloading) among other features. The site will automatically refresh as you work on it, displaying errors in the relevant console (terminal or browser). | |
2. `ddev npm run build` can be found at the base URL and `ddev npm run dev` is found at https://<projectname>.ddev.site:4321. The dev server has Vite HMR (hot module reloading) among other features. The site will automatically refresh as you work on it, displaying errors in the relevant terminal or browser console. |
What do you mean by ddev npm run build
can be found at the base URL?
I know that running the build
command generates a static version of the site into the dist/
directory, which you can run the preview
command to serve, but the wording of this seems sort of ambiguous. Similarly with “ddev npm run dev
is found at”—the command isn’t found at a browser address, but running it starts a server you can access from the browser at that address. I know you’re aware of this, but the wording leaves it unclear for someone figuring it out.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, I can see why it could be confusing. I updated the text to say.
ddev npm run build
can be found at https://.ddev.site and ddev npm run dev
is found at https://.ddev.site:4321.The dev server has Vite HMR (hot module reloading) among other features. The site will automatically refresh as you work on it, displaying errors in the relevant terminal or browser console.
README.md
Outdated
|
||
To generate a static copy of the site, run `ddev npm run build`. The contents of the `dist/` folder are exactly what get [deployed to Cloudflare Pages](#build--deployment). You can preview locally by running `ddev npm run preview` or using a tool like [`serve`](https://www.npmjs.com/package/serve). | ||
|
||
#### Without DDev setup |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
#### Without DDev setup | |
#### Setup Without DDEV |
README.md
Outdated
6. Run `npm run dev` to start Astro’s dev server. | ||
7. Visit the URL displayed in your terminal. (Probably `http://127.0.0.1:3000/`.) The site will automatically refresh as you work on it, displaying errors in the relevant console (terminal or browser). | ||
3. Run `npm run dev` to start Astro’s dev server. If it fails then run `npm cache clean --force && npm install && npm run dev`. | ||
4. Visit the URL displayed in your terminal. (Probably `http://localhost:4321/`.) The site will automatically refresh as you work on it, displaying errors in the relevant console (terminal or browser). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
4. Visit the URL displayed in your terminal. (Probably `http://localhost:4321/`.) The site will automatically refresh as you work on it, displaying errors in the relevant console (terminal or browser). | |
4. Visit the URL displayed in your terminal. (Probably `http://localhost:4321/`.) The site will automatically refresh as you work on it, displaying errors in the relevant terminal or browser console. |
README.md
Outdated
|
||
To generate a static copy of the site, run `npm run build`. The contents of the `dist/` folder are exactly what get [deployed to Cloudflare Pages](#build--deployment). You can preview locally by running `npm run preview` or using a tool like [`serve`](https://www.npmjs.com/package/serve). | ||
|
||
|
||
#### Switching from without Ddev to with DDev local environment. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use correct “DDEV”s and shorten:
#### Switching from without Ddev to with DDev local environment. | |
#### Switching from Without DDEV to With DDEV |
README.md
Outdated
|
||
#### Switching from without Ddev to with DDev local environment. | ||
|
||
Make sure to delete your node vendor folder everytime you switch and run npm install. The change in architecture can create odd issues otherwise. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Be specific, use backticks for command:
Make sure to delete your node vendor folder everytime you switch and run npm install. The change in architecture can create odd issues otherwise. | |
Make sure to delete your `node_modules/` directory and run `npm install`. The change in architecture can create odd issues otherwise. |
I'm running into a few odd issues here among them.
Additionally, web_extra_daemons sometimes runs before ddev npm install and that breaks the build as it won't have anything to build upon. The post-start hook would not do it because that has the same race condition issue. |
If you're seeing |
This PR works but the daemon running before npm install has completed does concern me a bit. It fails if it can't find those files. I feel like I need a hook between pre-start and post-start so I can still do the npm install but it won't run the daemon until is over with it. |
I'll try to take a look at this before long. |
Sorry I lost track of this. |
No worries, im sure you been pinned down after traveling fora while. |
9a0e5ab
to
a002105
Compare
Rebased |
I'm seeing this kind of behavior:
Anyway, it comes up but I think astro dies soon, and then the whole web container gets brought down. I've seen this lately running Could you take a look and see what you see? |
Never mind. I didn't follow the instructions. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Working great for me, thanks! Minor suggestion in README.
webserver_type: nginx-fpm | ||
additional_hostnames: [] | ||
additional_fqdns: [] | ||
performance_mode: mutagen # Important to avoid EPERM errors |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'd love to know what mode you were using and what docker provider you were using that gave you trouble.
Co-authored-by: Randy Fay <[email protected]>
The Issue
This repo does not use a ddev file that requires one to install npm. I tried making my own a while back and ended up down a rabbit hole. It potentially adds a barrier to contrib.
Because ddev is already on my machine it would be nice to take advantage of it to among other things switch npm versions and have easy access to a database.
How This PR Solves The Issue
This PR adds the ddev config file. However, I ran into a few issues.
If I set the project type to astro it will complain since it's not on the list and that makes sense I suppose but It made me think whether there should be a custom type or a generic type.
Additionally, I was trying to run ddev npm run dev and map the local HTTPs server port 4321 but when I tried it with
web_extra_exposed_ports
it did not work. It gave me a bad route error.I might be missing some history on why some of these items are the way they are. I will look on Discord and see if I can find them.