Questions on template and login system

bobe

Hi! @JeremyZXi and I are students planning to create a website for our school as a platform for student-led projects. We are now facing some problems:

since we are planning to allow our users to edit their page on the platform, we wanted to provide some templates for them. However, we couldn't find a way to make a template system using Silex V3.
When we deployed Silex v3 locally, after we tried to log in with GitLab, it said "An error has occurred. The redirect URI included is not valid."

These are my env vars(p.s. I do have actual gitlab client id and secret, below are just placeholders)

const env = {
  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 || 'Gitlab',
  GITLAB_CLIENT_ID: process.env.GITLAB_CLIENT_ID||'my-client-id', 
  GITLAB_CLIENT_SECRET: process.env.GITLAB_CLIENT_SECRET||'my-client-secret',
  GITLAB_DOMAIN: process.env.GITLAB_DOMAIN||'https://gitlab.com',
  FTP_STORAGE_PATH: process.env.FTP_STORAGE_PATH || '/silex/storage',
  FTP_HOSTING_PATH: process.env.FTP_HOSTING_PATH || '/silex/hosting',
}

The callback URL of the application is http://localhost:6805/auth/gitlab/callback

Could you provide some advice for us? Thanks a lot! 🙂 @lexoyo

lexoyo

The callback URL of the application is http://localhost:6805/auth/gitlab/callback

In my gitlab apps I have this one
http://localhost:6805/api/connector/login/callback

Where did you find your version? I'd like to fix the docs

bobe

lexoyo
We found it here

/**
 * This file is an example of a server configuration file.
 * It is used to test hosting and storage connectors.
 *
 * You can run the server with the following environment variable to use this configuration file:
 * SILEX_SERVER_CONFIG=`pwd`/examples/server-config-connectors.js
 *
 * It expects the following environment variables to be set:
 * - GITLAB_CLIENT_ID
 * - GITLAB_CLIENT_SECRET
 * - GITLAB_DOMAIN
 * - FRAMAGIT_CLIENT_ID
 * - FRAMAGIT_CLIENT_SECRET
 * - FRAMAGIT_DOMAIN
 *
 * Suggested values:
 * - GITLAB_DOMAIN=https://gitlab.com
 * - FRAMAGIT_DOMAIN=https://framagit.org
 *
 * You need to create an application on gitlab.com and framagit.org
 * and set the callback url to http://localhost:6805/auth/gitlab/callback
 *
 */

JeremyZXi

Hi lexoyo,

Just asking, if I deployed silex on my server, and I have a custom domain, is change 'http://localhost:6805' to my own domain all I have to do?
I tried with https://edit.newbeemc.online, and I created a new gitlab app with callback url of https://edit.newbeemc.online/api/connector/login/callback. However, the auth process, once again, falls into the The redirect URI included is not valid. error : (
The error popped up under this link.

https://gitlab.com/oauth/authorize?client_id=62cce62edc2f921f36b21dbd1137430ff503dc59337b0fd8d0d3e37f5c46c159&redirect_uri=http%3A%2F%2Flocalhost%3A6805%2Fapi%2Fconnector%2Flogin%2Fcallback%3FconnectorId%3Dgitlab%26type%3DSTORAGE&response_type=code&state=mv7ch1oq4j8ykgzi8vsdfl&scope=api&code_challenge=xE5Zyv2EvEKyMfdKEEhytcFDS0Fkqm_0RK4tcUic-FA&code_challenge_method=S256

lexoyo

since we are planning to allow our users to edit their page on the platform, we wanted to provide some templates for them. However, we couldn't find a way to make a template system using Silex V3.

That's a very good use case, and there are no templates yet, and no template system

I was thinking we should add this feature to the dashboard. It would use gitlab API to clone a repo with the chosen template

In the mean time you can

create templates
give your users a list of your templates with links to the templates repositories
your users click "fork" in the repo they want
the website will appear on their silex dashboard

note that your users need to leave the name as it is, starting with silex_ because that is how silex knows it is a website

let me know what you think?

bobe

lexoyo Got it, thanks for your advice

lexoyo

I guess we really need to publish your doc about gitlab connector @Olivier

Olivier

lexoyo what do you mean ? sorry ?

lexoyo

JeremyZXi
Did you set the options for the domain name of Silex?
https://docs.silex.me/en/dev/options#server-side-options

Try setting the host, port and protocol

And here is how to start Silex with options (as command line options, env vars or in your config file)
https://docs.silex.me/en/dev/run

JeremyZXi

lexoyo

lexoyo Did you set the options for the domain name of Silex?
https://docs.silex.me/en/dev/options#server-side-options

No I didn't... :\

I just set them in the config file

SILEX_PORT:process.env.SILEX_PORT || 6805,
SILEX_HOST: process.env.SILEX_HOST ||'edit.newbeemc.online',
SILEX_PROTOCOL: process.env.SILEX_PROTOCOL || 'https',
SILEX_URL: process.env.SILEX_URL || 'https://edit.newbeemc.online',

but then the problem still exist, perhaps I miss filled something?

I really appreciate your patience. I'm still a high school student, so my knowledge is limited in these areas. If this has caused any inconvenience, please forgive me :>

lexoyo

No problem I'm happy to help

In your config file you should set config.url as explained here
https://docs.silex.me/en/dev/config#url

Do you know how to do this? If not you can paste here your whole config file and I'll help you

JeremyZXi

lexoyo
I was trying to add them in the way below in .silex.js file, but it doesn't seem to work(or maybe I didn't properly setup my server(?)).

  config.url.SILEX_PROTOCOL = 'https'
  config.url.SILEX_HOST = 'edit.newbeemc.online'
  config.url.SILEX_PORT = 6805

Here is my whole .silex.js config file

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.SILEX_PROTOCOL = 'https'
  config.url.SILEX_HOST = 'edit.newbeemc.online'
  config.url.SILEX_PORT = 6805
}

const env = {
  SILEX_HOST: process.env.SILEX_HOST ||'edit.newbeemc.online',
  SILEX_PROTOCOL: process.env.SILEX_PROTOCOL || 'https',
  SILEX_URL: process.env.SILEX_URL || 'https://edit.newbeemc.online',
  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 || 'Gitlab',
  GITLAB_CLIENT_ID: process.env.GITLAB_CLIENT_ID||'badebe529bb8f3f11ab5244a1078546899ea6649ca7eba63fedf0c3f07ca9832',
  GITLAB_CLIENT_SECRET: process.env.GITLAB_CLIENT_SECRET||'gloas-f0b50afda663989da102fd24023c79e07878f5a602f18f685009fff9a7637a3d',
  GITLAB_DOMAIN: process.env.GITLAB_DOMAIN||'https://gitlab.com',
  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

JeremyZXi just

config.url = 'https://yourdomain.com'

lexoyo

Olivier in your config file, you have a config object that silex gives you right? on this object you can set the URL of the site so that silex builds the correct callback url for gitlab
it is an alternative to env vars