• EN
  • Questions on template and login system

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:

  1. 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.

  2. 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

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

  1. create templates
  2. give your users a list of your templates with links to the templates repositories
  3. your users click "fork" in the repo they want
  4. 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?

    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
     *
     */
    a month later

    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

      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
      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}`)
            }
          })
        }
      }

        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

        Write a Reply...