[WIP] Setting up Gitpod for Django + React

Hi all,

My name is KimSia, and I’m the owner and developer of a software company selling quotation software. My stack is Django + React via REST API. Been meaning to move my dev env from localdisk to the cloud. Have experimented with AWS EC2, Azure and VS CodeSpaces setup, but I discovered GitPod and I’m quite excited by it. I think it’s the most comprehensive setup so far.

I have been working with @jan for a while now for my experiment. And I just became a subscriber. I have promised to write a blogpost and send to Jan once I finished.

For now, this thread is like a WIP log and also a log of the related tasks. Once I hit some level of completeness, I will write up the entire blogpost.

Given the headless architecture I adopted, the first natural intermediate goal is when I can run my Django unit tests on Gitpod workspace

  • [x] able to create a gitpod workspace of my private GitHub Django backend repo
  • [x] able to download the React frontend manually from npm
  • [x] able to run python manage.py runserver within the Gitpod workspace successfully
  • [ ] access the postgres database using my desktop client (TablePlus)
  • [ ] able to download the React frontend automatically from npm
  • [ ] able to download the React frontend automatically from GitHub React frontend repo
  • [ ] able to restore the development postgres schema and data into the gitpod workspace database
  • [ ] use my own custom gitpod-postgres 10.14 Dockerfile
1 Like

Hey @kimstacks, many thanks for sharing your progress here! :100: I’m sure that the solutions you implement here will become super useful for others wanting to achieve similar things with Gitpod.

For this, as suggested via email, I think you could take inspiration from @corneliusludmann’s Chisel tutorial in How to SSH into gitpod workspace? which should allow you to set up Chisel so that it can connect, locally from your computer, to any TCP port in your Gitpod workspace (including the PostgreSQL port).

Here, I guess you’re referring to the npm login step of your current .gitpod.yml, which prompts you for your credentials every time you open a new workspace.

To automate this, I would suggest replacing the interactive npm login solution with a pre-configured authentication file .npmrc in your workspace.

This could be achieved like so:

  1. Generate a new access token from https://www.npmjs.com/settings/janx/tokens

  2. Save that token as a Gitpod environment variable in https://gitpod.io/settings/ – for example, you could set:

    • Name: NPM_TOKEN
    • Value: (your token)
    • Repository: (your org)/(your repo) if you want this variable to be exposed only in workspaces of your project, or */* if you want this variable to be exposed in all your workspaces
  3. In your .gitpod.yml, replace the npm login call with something like:

tasks:
  - init: printf "//(YOUR ORG).npmjs.org/:_authToken=${NPM_TOKEN}" > .npmrc

Hopefully this should automate the NPM login flow.

As mentioned in our call, I think this could be automated like so:

  1. Start a Gitpod workspace with an empty PostgreSQL database

  2. Initialize the database manually, like you would normally do the first time you started working on this project

  3. Export the resulting, initialized database

  4. If the data doesn’t contain any sensitive information, commit the database dump file to your repository, and make Gitpod import the database dump file in a init step in your .gitpod.yml – that way, every time you start a new Gitpod workspace, it will have an already-initialized database ready to go

1 Like

Thank you @jan and @corneliusludmann

Since I can no longer edit my original post this is my update post instead.

Newly completed tasks

  • [x] access the postgres database using my desktop client (TablePlus)
  • [x] run backend tests on gitpod
  • [x] create a github template repo for those who want to just try gitpod with postgres

I have created this github template. It is carefully curated such that all the chisel and dropbear and postgres setup are all done properly and with nothing else.

Yes, this is not merged to the main branch yet. But will rename in future.

What I will do next is to figure out a way to auto add in the public ssh key because it’s a hassle everytime the workspace is rebuilt