Page MenuHomePhabricator

Add Gitlab automatic build and deployment to Toolforge
Closed, ResolvedPublic

Description

Index.html is served but returns the follwing error:

Uncaught TypeError: The specifier “vue” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”.

So I started discussion with ChatGPT / Copilot Chat:

Q: Is npm installed on toolforge ? What if i need it ?

According to Copilote Chat, Toolforge is mostly for python so npm is not really available nor is npm install front-end/package.json. The way is to use Gitlab pireline (or job) to npm run build:prod for a ./dist/.

Q: On https://lingua-libre.toolforge.org's server, my ~/www/python/uwsgi.ini contains :

[uwsgi]
check-static = /data/project/lingua-libre/www/python/src

My https://lingua-libre.toolforge.org/front-end/index.html containing :

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lingua Libre</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./src/main.js"></script>
  </body>
</html>

is served as a static html, the JS doesn't load, and the browser console returns le following error :
Uncaught TypeError: The specifier “vue” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”.
What should I do to make the js work ?

Q: My repository is at https://gitlab.wikimedia.org/repos/wikimedia-france/lingua-libre/lingua-libre/ , how to automatize the build process and deployment toward https://lingua-libre.toolforge.org/ ?

Copilote chat suggests to add a "CI/CD pipeline" yml in order to :

  • builds the frontend on every commit.
  • deploy to Toolforge via SSH

It seems doable in 1~3hours depending on bugs. Is someone interested to take this on ? Seems an interesting learning for junior developers. Else I take this turn myself and you enjoy. 👍🏼

Event Timeline

Yug triaged this task as Medium priority.Feb 24 2025, 3:19 PM
Yug updated the task description. (Show Details)
Yug updated the task description. (Show Details)
Yug updated the task description. (Show Details)
Yug updated the task description. (Show Details)

🎉 Solved in MR44. Reproducible documentation in doc/toolforge-deployment.md#Front.

Yug claimed this task.

There are various avenues to deploy to toolforge, below is a personal recap and archive.

Outline
  • Gitlab pipeline
  • (Github workflows : very similar to previous)
  • Build service
  • Webhook listener
Gitlab pipeline

Create a .gitlab-ci.yml with two task :

  • front-build : use your build tool to create temporary /dist/** files
  • front-deploy-to-toolforge: use ssh and rsynch to send your dist/** files to toolforge's folder

See :

Build service

See : Build service > Help:Toolforge/Building_container_images > Nodejs

@So9q :

"I can help you write a Procfile if you want."

and

My workflow is:

  1. make some changes and push to git
  2. run the tests (I didn't bother with a CI yet)
  3. login to toolforge and run a 2 line update script that tells the buildservice to create a new image based on rhe latest commit and restart if successful.

You do have:

  • /front-end/Dockerfile

You presently miss :

you have many webservice shells open xd

@TuukkaH :

The advantage with the build service is that your tool can have its own container image. The disadvantage is all the current limitations such as manual builds and deployments

Webhook listener

See : Help:Toolforge/Auto-update_a_tool_from_GitHub/GitLab

Thanks

@dcaro , @So9q, @TuukkaH , Nizo, thanks for yesterday's guidance !