Run RedwoodJS on GitPod

Hat tip to @pi0neerpat for showing me how to do this.

Gitpod lets you run a development environment in the browser much like Codesandbox, Repl.it, or Stackblitz.

If you just kick up their Node starter project you can run something like

yarn create redwood-app patrick-is-a-boss

Then delete all the previous files and move the Redwood files into the root of the project directory.

After doing so all you need to do is run

yarn rw dev

1 Like

I made a repo that does all these tasks.

New Redwood project in one click

1 Like

Thanks @pi0neerpat, that is clean!

Hi :wave:,

Mike here, I work at Gitpod and have been following Redwood for quite some time out of personal interests. Excited to have a chance and combine it all :slight_smile:.

Excellent work @pi0neerpat with the repo! This is a simple way to get started.

I’m working on another example where I automated the CONTRIBUTING.md file from the redwood repo. The config file is at redwood/.gitpod.yml at configure-cloud-based-development · mikenikles/redwood · GitHub.

Here’s what I want to achieve:

  • :white_check_mark: Create the redwood and redwood-app directories
  • :white_check_mark: Install dependencies in redwood
  • :white_check_mark: Create the functional test project in redwood-app
  • :x: Linking with rwt link
  • :x: (blocked) Run the test project servers

The linking fails with error An unexpected error occurred: "expected workspace package to exist for \"css-loader"".. Unfortunately, the workaround in issue 2215 (sorry, new users can only post two links) doesn’t seem to resolve the issue.

If you want to test it, this link opens a Gitpod workspace on my branch. Run yarn rwt link ../redwood in the redwood-app directory to see the error.

Any advice on how to get passed that would be awesome :pray:

Mike

1 Like

This is interesting. I would like to use this for reviewing PRs. How does it work with databases? What are the options or we have to use a cloud option? And running scripts for seeding the data?

Hey @mikenikles ,

Welcome to the Redwood community! We actually have a newer way of “linking” the latest redwood codebase, the improved process is in PR and should be merged shortly (probably today)

Are you on the Redwood discord? Please ping me on there if you’d like to chat realtime - would be awesome to see this working on Gitpod esp. if we could use it for PRs and/or framework testing

1 Like

PR has been merged (I think this is the one Danny was referring to) so you should be (:crossed_fingers:) good to go @mikenikles.

:+1: Thanks Anthony, I’ve been working with Danny behind the scenes to get Redwood working on Gitpod. We’re now at a point where you can test it with the following link: Dashboard — Gitpod

I’m going to open a PR with instructions on how to enable Prebuilds so that Gitpod continuously prepares new development environments for each code change. With that, you no longer have to wait for any yarn install, building the test-project or linking redwood to the test-project.

I’ll open a PR later today. Please let me know your feedback :pray:

Update: This is not happening tonight :slight_smile:. I had a day off and am exhausted from spending it in downtown :sweat_smile:

1 Like

As of v0.36, GitPod is a go! :rocket:

1 Like

The new gitpod integration is really awesome especially for contributing. I just checked out on a PR and it was great for testing the changes but I think something that would be really cool if there was a way to also get the changed files to show up in the git source control panel on the sidebar and be able to see the diffs would be great for code reviewing

Do you know if that is something that is possible @mikenikles

Hi Kris,

Ah that’s likely a UX issue. There’s a “Source Control” and a “GitHub Pull Request” panel. The “Source Control” panel only shows changes you’ve made since you started the Gitpod workspace.

You should see the “GitHub Pull Request” icon at the bottom of the left side nav. The screenshot below is what I see when I click the Gitpod status link in the 3253 PR.

Once you click on a file in the “GitHub Pull Request” panel, it opens on the right and you can leave comments in the code right there and Gitpod will sync them with GitHub.

Please let me know if you see that PR panel.

Cheers,

Mike

Ahh that makes sense. I was definetly looking in the wrong area I don’t have that icon on the bottom I would assume I need to login to github. But when I do that it says try again or go to access controls Maybe I need to check certain permissions on?

Hm… :thinking: Yeah let’s double check your permissions.

  1. Head over to Dashboard — Gitpod
  2. Click the 3-dots menu for the GitHub list item
  3. Click “Edit Permissions”

In that dialog, make sure public_repo is checked. If it’s checked, please let me know what else is checked / unchecked.

yeah still nothing I gave access earlier to public_repos because thats what I thought it needed but still won’t show pull requests. I have email and public_repos on the rest is off

2021-08-20 22.20.32

Hi there,

Can we get this resurrected and brought up to date? I just heard about GitPods yesterday in a older podcast

It sounds like a really easy way for people to create minimal examples of problems – perhaps also a GitPod with the Tutorial ?

Given that it creates K8’s pods - it would be a great fit for those that want to deploy to K8 or EKS ?

I am joining @ajoslin103 - and expect many more RW fans, once this additional feature that feature (GitPod with the Tutorial) gets announced (@mikenikles hope you “hear” this.

Tag me anywhere on the internet and I’ll show up :slight_smile:.

There’s a gitpod-starter repo on the redwoodjs org on GitHub that is a good place to start (I can’t post links yet here). Worth checking that out although I don’t believe it’s documented anywhere officially yet.

Renovate bot has been keeping the dependencies up-to-date, but let me know if you run into any issues.

1 Like

in case it helps, the example-storybook repo has an “Open in GitPod” button that should work for the most part. I referenced gitpod-starter to help get it started. The example-storybook repo is the tutorial.

I think there is still some more work to do there because things like SESSION_SECRET are not setup in the gitpod environment for you by default. I made a PR to work around this, but I have not yet tested it: Update .gitpod.yml by virtuoushub · Pull Request #73 · redwoodjs/example-storybook · GitHub

cc @adriatic

3 Likes