Gitpod: Accessing development server very slow.

[TheFirstMe]

Describe the bug

I am working on a GatsbyJS project. The development server starts quickly but when I try to open it loads forever.

[jankeromnes]

Hi @TheFirstMe, if your repository is public, could you please share the repo URL?

This would be helpful for us to try and reproduce the slowness, and be able to investigate & potentially fix it.

[TheFirstMe]

@jankeromnes Here’s the repo URL: https://github.com/TheFirstMe/ieeesb

[TheFirstMe]

@jankeromnes I’m working on the branch “ react-bootstrap-to-theme-ui-migration” right now

[jankeromnes]

Thanks! I'm taking a look.

The development server starts quickly but when I try to open it loads forever.

What are all the commands that you run in Gitpod to achieve this?

Side note, you may want to put these commands into your .gitpod.yml, replacing the stub init and command instructions:

tasks:
  - init: echo 'init script' # runs during prebuild
    command: echo 'start script'

(E.g. replace echo 'init script' with yarn install-dependencies, and echo 'start script' with gatsby start-dev-server or so.)

This will make Gitpod run your usual init / setup / start instructions automatically on workspace start.

[TheFirstMe]

What are all the commands that you run in Gitpod to achieve this?

After switching over to the branch I mentioned above,

npm install
npm run storybook

Not giving the commands to start Gatsby dev server because it requires the environment variables. The development server issue happens on both Gatsby and Storybook

[TheFirstMe]

Thanks I’ll do that.

Side note, you may want to put these commands into your .gitpod.yml, replacing the stub init and command instructions:

tasks:
  - init: echo 'init script' # runs during prebuild
    command: echo 'start script'

(E.g. replace echo 'init script' with yarn install-dependencies, and echo 'start script' with gatsby start-dev-server or so.)

This will make Gitpod run your usual init / setup / start instructions automatically on workspace start.

[jankeromnes]

After switching over to the branch I mentioned above,

FYI you can open that branch directly in Gitpod, e.g. by opening the branch in GitHub and then clicking the Gitpod button, or by visiting a URL like:

https://gitpod.io/#https://github.com/TheFirstMe/ieeesb/tree/react-bootstrap-to-theme-ui-migration

npm install
npm run storybook

Thanks! I'll try these and look for any signs of slowness.

[jankeromnes]

First, I noticed that npm install takes a little over 3 minutes:

added 3606 packages from 1797 contributors and audited 74163 packages in 188.025s

So you can already save 3 minutes of waiting by making Gitpod do this work ahead-of-time (i.e. before you actually open a workspace):

1. Add npm install to the init step in .gitpod.yml
2. Enable prebuilt workspaces

[jankeromnes]

On the other hand, the npm run storybook command ran pretty fast (20 seconds).

But the Gitpod UX is not ideal here (i.e. it opens both a notification, to ask you whether you want to open port 6006 in a Preview pane or Browser tab, but it also opens a Preview anyway -- likely because Gatsby or StoryBook use the BROWSER environment variable).

I would suggest that you specify the port 6006 behavior in .gitpod.yml. Either make it:

ports:
  - port: 6006
    onOpen: open-preview

tasks:
  - init: npm install
    command: npm run storybook

to automatically open port 6006 in a Preview pane and not notify you about it.

Or, if this opens port 6006 too fast while Gatsby isn't ready yet (leading to a Port 6006 didn't respond error page), you can introduce a delay in .gitpod.yml, like so:

ports:
  - port: 6006
    onOpen: ignore

tasks:
  - command: gp await-port 6006 && sleep 3 && gp preview $(gp url 6006)
  - init: npm install
    command: npm run storybook

[TheFirstMe]

@jankeromnes So is that the problem? There’s also

npm run storybook -- --ci

that prevents a preview from opening.

[TheFirstMe]

@jankeromnes Any updates? I have updated the yml file as you suggested but the result is the same.

[TheFirstMe]

After 5-10 minutes of waiting, it finally loaded. But its not ok that I have to wait that long everytime :(

[TheFirstMe]

Hot reloading is also slow. Changes are reflected in 10 seconds or so.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.