Login with Matrix / Synapse using this Vue Custom Element (Vue WebCompoment) built using toguro-cli
- Node 16 (we have .nvmrc if you just want to run nvm use)
Install the dependencies:
npm install
You will need an app-id to start testing your app in the client application.
For now you can use the @toguro/cli
(Instructions on how to install here: https://www.npmjs.com/package/@toguro/cli)
After installation, just the following:
toguro --generate-app-id
After adding the new generated app-id to your .env, you should make sure you have the same inside fake-api.json
in the client-app (toguro-fe);
Run the following command
npm run dev
The project will be served in: http://localhost:3000/
This is essentially a login/register web-component. We assume that if you want to use matrix to login, it means you want to use matrix in some part of your main application.
For this reason, matrix-js-sdk
is added as external
by default in this vite app.
If you want to test it using our base client toguro-fe, you can check the with-matrix
branch.
If you want to integrate it in your existing project you will need to add matrix-js-sdk
to your window using the same alias we have in the vite.config.ts
here. By default it should be window.mxJsSdk = require('matrix-js-dk')
If you want to add it to your own vite
project, you might need to configure the node-globals there.
Bellow you will see some of the configs I had to setup to have it running properly
// vite.config.(js/ts)
import inject from '@rollup/plugin-inject';
import builtins from 'rollup-plugin-polyfill-node';
import NodeModulesPolyfills from '@esbuild-plugins/node-modules-polyfill';
define: {
global: 'globalThis'
},
plugins: {
...YOURPLUGINS,
insertBuiltinsPlugin,
NodeModulesPolyfills
},
build: {
rollupOptions: {
output: {
sourcemap: mode !== 'production',
rollupOptions: {
plugins: [inject({ Buffer: ['buffer', 'Buffer'] })]
}
}
}
}
// declare this function to be used in the plugins
function insertBuiltinsPlugin() {
return {
name: 'my-project:insert-builtins-plugin',
options(options) {
const plugins = options.plugins;
const idx = plugins.findIndex((plugin) => plugin.name === 'node-resolve');
// @ts-ignore
plugins.splice(idx, 0, { ...builtins({ crypto: true, buffer: true }), name: 'rollup-plugin-node-builtins' });
return options;
}
};
}
I added the script to automatically deploy the app using AWS CDK
You will find the instructions on how to setup and deploy it inside of /stack/README.md
.
If you already have AWS CLI configured and are already using AWS CDK in your aws account, you could pretty much just run
cdk deploy --profile=the-profile-you-have
inside /stack
folder (Don't forget to run npm install
inside of STACK
folder before).
At this moment you will need to run npm run build
manually in the root folder before publishing it.
NOTE: I don't have strong skills with devops stuff, so if you find things that could be improved in the stack, please open an issue or send me an email <3
I will be improving the stack to configure automated pipeline in the future (user will be able to choose from CLI what they want to include).
Any questions, comments and suggestions you can send an email to
hmendes00@gmail.com