Frontend that instantiate custom apps created using toguro-cli

Overview

Toguro FE

This project contains the frontend for the main Toguro platform using Matrix Js SDK

It includes the built .es.js of Mx-Login-App for reference.

You should be able to easily integrate any app created using toguro-cli. Feel free to create and share some app as well :)

Toguro-cli + Apps + Toguro FE (this project) simplified architecture Architecture

Requirements

  • Node 16
  • NVM

** Note: ** NVM might not exist for Windows so feel free to use any Node.JS Version Manager as long as you are using the Node 16 version

if you are using node globally and you don't have a Node.JS Version Manager, make sure you install one to avoid upgrading or downgrading your global node version.

To install NVM

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | NVM_DIR=/usr/local/nvm bash

How to install

First make sure you are inside of SRC folder (and not STACK folder)

Then run the following command to enforce the correct NodeJS version for the project:

nvm use

Then install the dependencies:

npm install

You might want to change the VITE_MATRIX_URL in the .env file to point to your own homeserver. o/

How to run

First make sure you are inside of SRC folder (and not STACK folder)

Then run the following command

npm run dev

How to setup my custom app

You will see a file called fake-api.json. You should essentially change the values according to how you named your custom app and what was the generated appid.

E.G:

"appName": "toguro-test-app",
"appUrl": "http://localhost:3000/src/main.ts",
"developerEmail": "[email protected]",
"hasSupport": true,
"appVersion": "1",
"target": "menu",
"appType": "page",
"label": "My Test Label",
"appId": "d95b4121-4222-4752-8674-b832k4cef93e"

The app will be automatically injected and rendered inside of a custom-page-app route. It should also generate a menu with the label "My Test Label" (As defined in the json).

The idea is that your app will, at some point, come from a real api call.

The way it will "end up" in your db is by publishing the api through the toguro-cli. This will add the app to the app marketplace of toguro's ecossystem.

Of course you can create your own way of publishing this and dealing with this whole thing. My idea here is to have a base website where people can create any types of websites using latest tech and using the app marketplace to build those pages block.

How to test

http://localhost:8080/

Global Event Listeners

Should be used by login apps so you can know when a user is logged in or not toguro-events:login-updated

How to deploy

TBD

You might also like...

Raaghu is a micro frontend design system for modern web apps

Raaghu is a micro frontend design system for modern web apps

Raaghu is a micro frontend design system for modern web apps, which is an open source, Bootstrap 5.x enabled collection of reusable elements and components guided by clear standards, capable of giving the designers the necessary tools to develop beautiful, responsive and engaging product experiences. Single source of truth for truly scalable and consistent UI language for your application.

Dec 30, 2022

Theme Redone is a custom WordPress theme starter/framework with its own Gutenberg blocks solution and a CLI that speeds up the block creation process.

Theme Redone is a custom WordPress theme starter/framework with its own Gutenberg blocks solution and a CLI that speeds up the block creation process.

Theme Redone The Framework for Developing Custom WordPress Themes with its own Gutenberg Blocks creation solution. Theme Redone is a custom WordPress

Dec 30, 2022

Git Frameworker is a CLI tool for quickly bootstrapping custom framework configurations.

Git Frameworker is a CLI tool for quickly bootstrapping custom framework configurations.

Git Frameworker Git Frameworker is a tool that allows you to quickly bootstrap a project using a framework from GitHub. If the repository you clone co

May 3, 2023

Open apps directly in GNOME Software by clicking Install from Flathub and apps.gnome.

Open apps directly in GNOME Software by clicking Install from Flathub and apps.gnome.

Flatline Open apps directly in GNOME Software by clicking Install from Flathub and apps.gnome. Load the extension in Firefox Clone the repository Open

Nov 7, 2022

why make apps to increase focus -- when you can make apps to reduce focus

impossifocus 🕺 What is this? ImpossiFocus will measure focus by reading your brainwaves -- and if you're in the zone, it'll ensure that changes with

Nov 30, 2022

The operator CLI for CDK apps.

cdk-app The operator CLI for CDK apps. Experimental. cdk-app lets you associate commands with CDK constructs so that you can quickly invoke functions,

Dec 8, 2022

Node-cli-starter - Basic starter kit for building Node CLI applications with TypeScript.

node-cli-starter Minimal starter kit for building Node CLI applications with TypeScript. Getting Started To get started clone repo locally and run npm

May 17, 2022

A CLI tool to create a NodeJS project with TypeScript CTSP is a CLI tool to make easier to start a new NodeJS project and configure Typescript on it.

A CLI tool to create a NodeJS project with TypeScript CTSP is a CLI tool to make easier to start a new NodeJS project and configure Typescript on it.

CTSP- Create TS Project A CLI tool to create a NodeJS project with TypeScript CTSP is a CLI tool to make easier to start a new NodeJS project and conf

Sep 13, 2022

This repo contains instructions on how to create your NFT in Solana(using Metaplex and Candy Machine) and mint it using your custom front-end Dapp

This repo contains instructions on how to create your NFT in Solana(using Metaplex and Candy Machine) and mint it using your custom front-end Dapp

Solana-NFT minting Dapp Create your own NFT's on Solana, and mint them from your custom front-end Dapp. Tools used Metaplex - Metaplex is the NFT sta

Nov 2, 2022
Releases(0.1.0)
Owner
Hugo Leonardo Simas Mendes
Hugo Leonardo Simas Mendes
Um date time simples com frases do nosso Deus toguro 📅

toguro-datetime Um date time simples com frases do nosso Deus toguro ?? Como utilizar o pacote ? ?? Instale o pacote ?? npm -i toguro-datetime | ya

Paulo Henrique 7 Oct 23, 2022
Kuldeep 2 Jun 21, 2022
Create Bootstrap 5 Modal Box using JavaScript with custom title, description, button labels and custom YES button callback

Dynamic BS5 Modal Box Create Bootstrap 5 Modal Box using JavaScript with custom title, description, button labels and custom YES button callback Insta

null 5 Oct 23, 2022
Sample apps showing how to build music and video apps for Xbox using a WebView.

description languages name page_type products urlFragment Sample showing how to build music and video apps using primarily web technologies for Xbox.

Microsoft 11 Dec 14, 2022
O objetivo dessa aplicação era criar um frontend feito totalmente em Javascript, sem nenhum arquivo HTML ou CSS pré-criado. Além disso, esse projeto também é o frontend da minha API 100% NodeJS.

Projeto HTML 100% Javascript Front-end feito "sem HTML" Conteúdos ➜ Sobre o projeto ➜ O que aprendi ➜ Como usar ?? Sobre o projeto Voltar ao topo O ob

João Victor Negreiros 19 Aug 3, 2021
logseq custom.js and custom.css utilities : resize query table columns, hide namespaces...

logseq-custom-files custom.js and custom.css utilities for Logseq. current version v20220331 query table view : add handles on the query table headers

null 44 Dec 7, 2022
This experimental library patches the global custom elements registry to allow re-defining or reload a custom element.

Redefine Custom Elements This experimental library patches the global custom elements registry to allow re-defining a custom element. Based on the spe

Caridy Patiño 21 Dec 11, 2022
Ready to manipulate partitions file? Create a custom partition, apply custom security system, hide the partition and share your hidden data on the www

Paranoia ?? Ready to manipulate partitions file? Create a custom partition, apply custom security system, hide the partition and share your hidden dat

Alice Snow 3 Dec 29, 2022
Custom Gutenburg blocks to add custom functionalities to your WordPress site. Brought to you by Arif Khan with <3

Gutpress(WordPress Gutenburg Block Plugin) Custom Gutenburg blocks to add custom functionalities to your WordPress site. Brought to you by Arif Khan w

Arif Khan 4 Nov 23, 2022
Custom navigations for Solid written in Typescript. Implement custom page transition logic and ✨ animations ✨

solid-custom-navigation Get, Set, Go! Custom navigations for Solid, written in Typescript. Implement custom page transition logic and ✨ animations ✨ .

Dirag Biswas 8 Nov 27, 2022