Error using self host gitlab

Giao_at_keycas

Hi sir, I encountered a problem with self host v3 connected with a self host gitlab. I hope you can help me with it, thanks alot!
so, connecting with my gitlab (named gitstone) is alright, and i can create a page as well as editing it with the visual editor. However, whenever i want to publish a page, i get this error: An error occured, your site is not published. Error publishing the website. Gitlab API error (1): Not Found
I wonder if this is caused by my self host gitlab...because when we were using the official gitlab, it was alright...
Am I not setting something in my gitlab correct?

this is my .silex.js :

const { ConnectorType } = require('@silexlabs/silex/dist/server/types')
const FtpConnector = require('@silexlabs/silex/dist/plugins/server/plugins/server/FtpConnector').default
const DownloadConnector = require('@silexlabs/silex/dist/plugins/server/plugins/server/DownloadConnector').default
const GitlabConnector = require('@silexlabs/silex/dist/plugins/server/plugins/server/GitlabConnector').default
const GitlabHostingConnector = require('@silexlabs/silex/dist/plugins/server/plugins/server/GitlabHostingConnector').default
const FsStorage = require('@silexlabs/silex/dist/server/server/connectors/FsStorage').default
const dash = require('@silexlabs/silex-dashboard')
const StaticPlugin = require('@silexlabs/silex/dist/plugins/server/plugins/server/StaticPlugin').default
const node_modules = require('node_modules-path')
const onboarding = require(__dirname + '/server-plugins/onboarding.js')
const { join } = require('path')

module.exports = async function (config) {
  await config.addPlugin(dash)
  await config.addPlugin(onboarding)

  initConnectors(config)
  //config.setHostingConnectors([
  //  new FtpConnector(config, {
  //    type: ConnectorType.HOSTING,
  //  }),
  //  new DownloadPlugin(config),
  //])

  //config.setStorageConnectors([
  //  new FtpConnector(config, {
  //    type: ConnectorType.STORAGE,
  //  }),
  //  new GitlabConnector(config, {
  //    clientId: process.env.GITLAB_CLIENT_ID,
  //    clientSecret: process.env.GITLAB_CLIENT_SECRET,
  //    domain: process.env.GITLAB_DOMAIN,
  //  }),
  //  new FramagitConnector(config, {
  //    clientId: process.env.FRAMAGIT_CLIENT_ID,
  //    clientSecret: process.env.FRAMAGIT_CLIENT_SECRET,
  //    domain: process.env.FRAMAGIT_DOMAIN,
  //  }),
  //])

  // CMS Plugin
  config.addPlugin(StaticPlugin, {
    routes: [
      {
        route: '/js/client-plugins/',
        path: './client-plugins/',
      },
    ],
  })
  // GrapesJS Plugin
  config.addPlugin(StaticPlugin, {
    routes: [
      {
        route: '/plugins/',
        path: __dirname + '/node_modules/THE_GRAPESJS_PLUGIN/', // This assumes you have installed your plugin with npm
      },
    ],
  })
  config.url = 'https://edit.keycas.cn'
  
}

const env = {
  SILEX_HOST: process.env.SILEX_HOST ||'edit.keycas.cn',
  SILEX_PROTOCOL: process.env.SILEX_PROTOCOL || 'https',
  SILEX_URL: process.env.SILEX_URL || 'https://edit.keycas.cn',
  STORAGE_CONNECTORS: process.env.STORAGE_CONNECTORS || 'ftp,gitlab',
  HOSTING_CONNECTORS: process.env.HOSTING_CONNECTORS || 'ftp,gitlab,download',
  SILEX_FS_ROOT: process.env.SILEX_FS_ROOT || join(process.cwd(), '/silex/storage'),
  SILEX_FS_HOSTING_ROOT: process.env.SILEX_FS_HOSTING_ROOT || join(process.cwd(), '/silex/hosting'),
  GITLAB_DISPLAY_NAME: process.env.GITLAB_DISPLAY_NAME || 'GitStone',
  GITLAB_CLIENT_ID: process.env.GITLAB_CLIENT_ID||'ef80ce01c6e72c073a20b14afcd79ae7f168ea8f9d17a1137e4341c37d43373b',//badebe529bb8f3f11ab5244a1078546899ea6649ca7eba63fedf0c3f07ca9832
  GITLAB_CLIENT_SECRET: process.env.GITLAB_CLIENT_SECRET||'5511fc4a857dbbb1f2a02f4d07f1938f34de1c676c1cf536f296b90933e1e7fe',//gloas-f0b50afda663989da102fd24023c79e07878f5a602f18f685009fff9a7637a3d
  GITLAB_DOMAIN: process.env.GITLAB_DOMAIN||'https://gitstone.keycas.cn',
  GITLAB2_DISPLAY_NAME: process.env.GITLAB2_DISPLAY_NAME || 'Gitlab',
  GITLAB2_CLIENT_ID: process.env.GITLAB2_CLIENT_ID,
  GITLAB2_CLIENT_SECRET: process.env.GITLAB2_CLIENT_SECRET,
  GITLAB2_DOMAIN: process.env.GITLAB2_DOMAIN,
  FTP_STORAGE_PATH: process.env.FTP_STORAGE_PATH || '/silex/storage',
  FTP_HOSTING_PATH: process.env.FTP_HOSTING_PATH || '/silex/hosting',
}

// Create alternate versions of the the Gitlab connector
class GitlabConnector1 extends GitlabConnector {
  displayName = env.GITLAB_DISPLAY_NAME
  constructor(config, options) {
    super(config, options)
  }
}

class GitlabConnector2 extends GitlabConnector {
  connectorId = 'gitlab2'
  displayName = env.GITLAB2_DISPLAY_NAME
  constructor(config, options) {
    super(config, options)
  }
}

class GitlabHostingConnector1 extends GitlabHostingConnector {
  displayName = env.GITLAB_DISPLAY_NAME
  constructor(config, options) {
    super(config, options)
  }
}

class GitlabHostingConnector2 extends GitlabHostingConnector {
  connectorId = 'gitlab2'
  displayName = env.GITLAB2_DISPLAY_NAME
  constructor(config, options) {
    super(config, options)
  }
}

function initConnectors(config) {
  // Add storage and hosting connectors from env vars
  if (env.STORAGE_CONNECTORS) {
    config.setStorageConnectors([])
    const connectors = env.STORAGE_CONNECTORS.split(',')
    connectors.forEach((connector) => {
      console.info('> Add storage connector from env var:', connector)
      switch (connector) {
        case 'fs':
          config.addStorageConnector(new FsStorage(config, {
            path: env.SILEX_FS_ROOT,
          }))
          break
        case 'gitlab':
          config.addStorageConnector(new GitlabConnector1(config, {
            clientId: env.GITLAB_CLIENT_ID,
            clientSecret: env.GITLAB_CLIENT_SECRET,
            domain: env.GITLAB_DOMAIN,
          }))
          break
        case 'gitlab2':
          config.addStorageConnector(new GitlabConnector2(config, {
            clientId: env.GITLAB2_CLIENT_ID,
            clientSecret: env.GITLAB2_CLIENT_SECRET,
            domain: env.GITLAB2_DOMAIN,
          }))
          break
        case 'ftp':
          config.addStorageConnector(new FtpConnector(config, {
            type: ConnectorType.STORAGE,
            path: env.FTP_STORAGE_PATH,
          }))
          break
        default:
          console.error('Unknown storage connector', connector)
          throw new Error(`Unknown storage connector ${connector}`)
      }
    })
  }

  if (env.HOSTING_CONNECTORS) {
    config.setHostingConnectors([])
    const connectors = env.HOSTING_CONNECTORS.split(',')
    connectors.forEach((connector) => {
      console.info('> Add hosting connector from env var:', connector)
      switch (connector) {
        case 'fs':
          config.addHostingConnector(new FsHosting(config, {
            path: env.SILEX_FS_HOSTING_ROOT,
          }))
          break
        case 'gitlab':
          config.addHostingConnector(new GitlabHostingConnector1(config, {
            clientId: env.GITLAB_CLIENT_ID,
            clientSecret: env.GITLAB_CLIENT_SECRET,
            domain: env.GITLAB_DOMAIN,
          }))
          break
        case 'gitlab2':
          config.addHostingConnector(new GitlabHostingConnector2(config, {
            clientId: env.GITLAB2_CLIENT_ID,
            clientSecret: env.GITLAB2_CLIENT_SECRET,
            domain: env.GITLAB2_DOMAIN,
          }))
          break
        case 'ftp':
          config.addHostingConnector(new FtpConnector(config, {
            type: ConnectorType.HOSTING,
            path: env.FTP_HOSTING_PATH,
          }))
          break
        case 'download':
          config.addHostingConnector(new DownloadConnector(config))
          break
        default:
          console.error('Unknown hosting connector', connector)
          throw new Error(`Unknown hosting connector ${connector}`)
      }
    })
  }
}

lexoyo

hello
I'll need to know more about the error
Can you check in the browser console: which route is called for publish and what is in the response body?

Giao_at_keycas

lexoyo

main.js:390 publish error Error: Error publishing the website. Gitlab API error (1): Not Found
at On (main.js:75:1397383)
at async fn (main.js:75:1395548)
at async wo.startPublication (main.js:390:7391)

this is what i found in my console in inspect, is this what you looking for? thanks for the help!

Giao_at_keycas

Giao_at_keycas
there is also this message coming before that one:

/api/publication/?websiteId=2&hostingId=gitlab&storageId=gitlab:1

    
   Failed to load resource: the server responded with a status of 500 ()

lexoyo

What's the URL called? Look in the network tab pls

Giao_at_keycas

lexoyo
Request URL:
https://edit.keycas.cn/api/publication/?websiteId=2&hostingId=gitlab&storageId=gitlab
Request Method:
POST
Status Code:
500 Internal Server Error
Remote Address:
127.0.0.1:8902
Referrer Policy:
strict-origin-when-cross-origin

lexoyo

Ok i don't see anything strange
Could you check the server logs? In your terminal

Giao_at_keycas

lexoyo
I'm ready, listening to port 6805

Gitlab API error (1) 404 Not Found {
url: 'https://gitstone.keycas.cn/api/v4/projects/2/pages?access_token=57ebc544f2be82abd5d619be449dd5d4cf9772d84b138e7d27145bbba606feb7&',
method: 'GET',
body: null,
params: {},
text: '{"error":"404 Not Found"}',
message: 'Not Found'
}
API error 404 Gitlab API error (1): Not Found
Error publishing the website ApiError: Gitlab API error (1): Not Found
at GitlabHostingConnector1.callApi (/www/wwwroot/KeyCAS/node_modules/@silexlabs/silex/dist/plugins/server/plugins/server/GitlabConnector.js:290:23)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async GitlabHostingConnector1.getUrl (/www/wwwroot/KeyCAS/node_modules/@silexlabs/silex/dist/plugins/server/plugins/server/GitlabHostingConnector.js:147:26)
at async /www/wwwroot/KeyCAS/node_modules/@silexlabs/silex/dist/server/server/api/publicationApi.js:88:22 {
httpStatusCode: 404

Gitlab API error (2) - could not refresh token 400 Bad Request { message: 'invalid_grant' } refresh_token: 39292e1eac3c3df372eb708eb8713f2b2c26dfd0b59926f6c005736cd6179dee
API error 400 Gitlab API error (2): invalid_grant
Error in the user request ApiError: Gitlab API error (2): invalid_grant
at GitlabConnector1.callApi (/www/wwwroot/KeyCAS/node_modules/@silexlabs/silex/dist/plugins/server/plugins/server/GitlabConnector.js:284:27)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async GitlabConnector1.getUser (/www/wwwroot/KeyCAS/node_modules/@silexlabs/silex/dist/plugins/server/plugins/server/GitlabConnector.js:421:22)
at async routeUser (/www/wwwroot/KeyCAS/node_modules/@silexlabs/silex/dist/server/server/api/connectorApi.js:54:22) {
httpStatusCode: 400
} undefined
Gitlab API error (1) 404 Not Found {
url: 'https://gitstone.keycas.cn/api/v4/projects/2/pages?access_token=57ebc544f2be82abd5d619be449dd5d4cf9772d84b138e7d27145bbba606feb7&',
method: 'GET',
body: null,
params: {},
text: '{"error":"404 Not Found"}',
message: 'Not Found'
}

Giao_at_keycas

lexoyo

any thoughts on this, sir? : )

Giao_at_keycas

@lexoyo

I think something is wrong with my pipeline in my self host gitlab. maybe I didn't setup some variable correctly?

lexoyo

hello
I am not sure what is happening 😬
Maybe try with gitlab.com first?
Also, I'm creating an account on your instance

lexoyo

can you share a screenshot of the OAuth app settings?

lexoyo

oh noooo, I understand now: you didn't configure gitlab pages which is required for publication

Your instance:
Screenshot from 2024-08-02 09-20-59

My instance:
Screenshot from 2024-08-02 09-20-56

Giao_at_keycas

lexoyo
hi! so i've now enabled pages on my instance, and i think i still need to configure the CI pipeline stuff before i can publish right? is there like specific requirements on build image and stuff? or i can just follow any any tutorial online?
Also, when i try to configure pages for a project, is it just working for that particular project or does it cover all the project on my gitlab instance?

Giao_at_keycas

oh! I see, so once i enable pages function for my whole gitlab, it should also allow every project be be able to be published right? thanks alot for this! but i might come back to you if there is any trouble with setting up the pages, sorry about that, thank you for your help sir!

lexoyo

you have to understand what happens on v3.silex.me

there are 2 publication cases: with or without using a CMS

it generates 2 different .gitlab-ci.yml files, you should check them out both, it will answer your question

hi! so i've now enabled pages on my instance, and i think i still need to configure the CI pipeline stuff before i can publish right?

i'm not sure really, try without it

is there like specific requirements on build image and stuff? or i can just follow any any tutorial online?

check the gitlab-ci.yml files, it uses nodejs and that is all it needs

Also, when i try to configure pages for a project, is it just working for that particular project or does it cover all the project on my gitlab instance?

i'm not sure, you should test

Giao_at_keycas

lexoyo
It worked now! well partially... after I updated our instance to 17.2.1
Any way, there is still a small problem with the runner, is it ok to have a look at how you set up your runner on your instance? Thanks alot!

Giao_at_keycas

Giao_at_keycas
nevermind, I got it working!
But before we end this, I still have one last question on how to customize the ui of v3? like how do i change the text at the publication part, or how do i change the color from purple to maybe blue or something. Is that possible?
Also, again big thank to you! You've been super helpful!

lexoyo

Giao_at_keycas nevermind, I got it working!

Great !!!
Well done !

But before we end this, I still have one last question on how to customize the ui of v3? like how do i change the text at the publication part, or how do i change the color from purple to maybe blue or something. Is that possible?

There is no mechanism to change the texts or colors

That said I think the solutions are

create a client side plugin which inserts js and css to modify behavior (with events) and the look and feel (then please contribute a tutorial / doc on how to do this)
change the source code - not recommended because updates to new versions of Silex will be hazardous
contribute to Silex a mechanism to change texts and colors, e.g. new options or a plugin - that may be the best way

Let me know what you think?

PS: if you feel like contributing, I would be very happy if you can add to the docs.silex.me what was missing when you were learning, also you can leave a review here and here too 🙂

Giao_at_keycas

lexoyo
Ok, I'll try to make a plugin for customization of the UI, and if i succeed, I will also make a tutorial for that or contribute that to the docs.
Also, I will try to formalize a tutorial on using v3 with self host gitlab and how to configure runner for the publication feature.