Comments (15)
The default host will be 0.0.0.0
in Gridsome v0.7. And the GraphQL and SockJS endpoints will be /___graphql
and /___echo
instead of full absolute URLs. SockJS will also run on the same port as the site. I hope that will make it easier to use Gridsome inside Docker containers. At least it works well in a Forestry Instant Preview container :)
from gridsome.
Would it help if you could set a custom URL for the GraphQL server in gridsome.config.js
?
from gridsome.
I have gridsome develop running inside a docker container. I used the HOSTHANE environment variable set by docker so the container can reference itself, and added it to gridsome.config.js
like this:
module.exports = {
// Internal hostname provided by docker
host: process.env.HOSTNAME,
port: 8080,
};
This logs will show something like:
gridsome_1 | Site running at: http://44da3f8d258b:8080/
gridsome_1 | Explore GraphQL data at: http://44da3f8d258b:8080/___explore
Of course you can ignore the url because that's just from the container's perspective. If you've exposed the port you should have access to both endpoints through localhost (or however else you have it configured).
Note that you do need to restart the container for any changes to this file to be reflected.
from gridsome.
@carmanchris31 my problem may be slightly complicated by docker running on a different machine. When I add the docker HOSTNAME environment variable to gridsome.config.js
I can hit 8080 on the IP of my docker machine and get the initial Gridsome load but the browser then chokes on fetch.js
when it tries to access the internal docker domain, which I see as errors in console:
OPTIONS http://57afa2f0aab3:8080/___graphql net::ERR_NAME_NOT_RESOLVED fetch.js?1477:15
GET http://57afa2f0aab3:9000/echo/info?t=1548418779160 net::ERR_NAME_NOT_RESOLVE abstract-xhr.js?d8d6:132
If I specify the IP for 57afa2f0aab3
in my local /etc/hosts
then I can access the site on http://57afa2f0aab3:8080
which is vaguely workable but not ideal, especially if I rebuild the containers and that internal domain changes.
Any thoughts?
from gridsome.
I'm using LXD containers, I added to gridsome.config.js
as suggested above:
module.exports = {
host: '0.0.0.0'
port: 8080,
};
and according to this comment on issue #134:
This can be achieved by adding a
.env
file at the root of the project containing :GRAPHQL_ENDPOINT=/___graphql
This way it won't be necessary to manually enter the IP every time.
It works for me.
from gridsome.
So far the only way of getting the develop server to work is to override GRAPHQL_ENDPOINT
in fetch.js
to specify a url the browser will understand and connect to:
const GRAPHQL_ENDPOINT = 'http://gridsome.lndo.site:8080/___graphql';
from gridsome.
Yes, I think that would do it. I'm also seeing connection problems to the server on port 9000 but it hasn't seemed to cause problems so far, I'm not sure what that does?
from gridsome.
Port 9000
is for sockjs which makes the page-query
re-run whenever a node changes on the server. It's not possible to set a custom port atm, but there could be an option in gridsome.config.js
for that too.
from gridsome.
I think the port is fine but like the graphql server I probably need to be able to specify a host the browser understands
from gridsome.
Oh just a note, in the docs it says you can specify a host in the config but this didn't work for me. The only way a new host got picked up was to specify it with the -h switch on the commandline.
from gridsome.
Would it help if you could set a custom URL for the GraphQL server in
gridsome.config.js
?
Any luck implementing this?
from gridsome.
Closing, due to findings by @menteora above. Please reopen if there are more questions/issues.
from gridsome.
@hjvedvik cool, FYI Forestry is using the official NodeJS Docker image (node:10
by default, but you can use node:lastest
if you prefer)
from gridsome.
@tanc Using the latest version of gridsome this seems to work out of the box now.
I dont know if this helps anybody else but, I solved this same issue with a web-server container with 2 vhosts one a static file server pointed at dist
and another that would proxy requests to the gridsome container running develop
. I prefer it this way as I can use a domain eg site-name.test
and I dont need to worry about ports in the address bar.
from gridsome.
This is the Docker configuration that I am using to integrate Gridsome if this can be of any help.
Requirements
Dockerfile
$ touch Dockerfile
FROM archlinux:latest
RUN pacman -Sy --noconfirm nodejs npm gcc make mesa grep libxi sdl libpng libjpeg-turbo libtiff giflib awk diffutils file
RUN useradd -u 1000 -d /home/user -s /bin/bash -rm user
Docker Compose
$ touch docker-compose.yaml
version: "3"
services:
npm:
container_name: npm
build: .
user: user
entrypoint: npm
working_dir: /home/user/app
volumes:
- .:/home/user/app
website:
container_name: website
build: .
user: user
command: npm run develop
working_dir: /home/user/app
ports:
- 8080:8080
volumes:
- .:/home/user/app
Commands
Command | Description |
---|---|
docker-compose run npm ARGUMENTS |
Run any NPM commands. |
docker-compose up -d website |
Start the Gridsome development worflow. |
docker-compose down |
Stop the Gridsome development workflow. |
Example
$ docker-compose run --rm npm install
$ docker-compose up --detach website
$ chromium localhost:8080
$ docker-compose down
I think that this would be awesome to have these files and the documentation in one of (or all) starters. This could help be productive with Docker in no time without having to think about all the dependencies for pngquant and stuff!
from gridsome.
Related Issues (20)
- Dynamic pages using templates HOT 1
- error while using gridsome/vue-remark
- Load content within content container
- Gridsome i18n dynamic router with dot doesnt work HOT 1
- Gridsome is not really static and titles don't work when refreshing HOT 1
- Create a section that doesnt reload when you switch from page
- gridsome build stuck HOT 2
- how to use @gridsome/transformer-remark to marked
- An error which says "Failed to process image xxxx" happened when run gridsome build
- Google Analytics 4? HOT 1
- Will Gridsome continue to have support and updates? Or will it become a deprecated technology? HOT 4
- Gridsome build stucked
- Building with dynamically generated pages for tags fails.
- Google Tag Manager tag is not firing when viewing the page; we have to reload the page. HOT 1
- [remark-wiki-link] Warning: please upgrade to remark 13 to use this plugin
- Gridsome build error HOT 1
- Gridsome airtable requires update as API key will be depricated from Feb 2024
- Questions about adding properties to the page-query list HOT 1
- Is there a way to merge grid some into nuxt? HOT 1
- Build error HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gridsome.