- Reusability of components
- IPFS Components registry
- Decentralized future
Install @rxdi/deploy global
npm i -g @rxdi/deployExecute command:
rxdi-deploy --graphiql-playground --webui --browser --ipfs-api-gateway 8080 --ipfs-api-port 5001Current working directory will be used for serving files throught Web user interface
This setup will create following directories inide current user folder ~/ ~/.jsipfs, ~/.rxdi, ~/.packages
Create my-project directory
mkdir my-project
docker run \
-p 8957:8957 \
-p 5001:5001 \
-p 8080:8080 \
-p 9300:9300 \
-v $(pwd)/my-project:/usr/src/app/files \
-v $(pwd)/packages:/usr/src/app/packages \
-v $(pwd)/.rxdi:/root/.rxdi \
-v $(pwd)/.jsipfs:/root/.jsipfs \
-i \
-t \
rxdi/deploy:latest \
--graphiql-playground \
--webui
--browserdocker run \
-p 8957:8957 \
-p 5001:5001 \
-p 8080:8080 \
-p 9300:9300 \
-v $(pwd)/my-project:/usr/src/app/files \
-v $(pwd)/packages:/usr/src/app/packages \
-v $(pwd)/.rxdi:/root/.rxdi \
-v $(pwd)/.jsipfs:/root/.jsipfs \
-i \
-t \
rxdi/deploy:latest \
--graphiql-playground \
--webuiManaging your deployment processes
http://localhost:9300/webui/cd my-project && mkdir trelloimport { Component, html } from '@rxdi/lit-html';
/**
* @customElement inject-tailwind
*/
@Component({
selector: 'inject-tailwind',
template: () => html`
<link
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet"
/>
`,
})
export class TailWindComponent extends HTMLElement {}mutation {
triggerBuild(
buildFolder: "./trello-component/build"
file: "trello.component.ts"
folder: "./trello-component/"
message: "Init trello component"
namespace: "@my-project/trello"
) {
status
file {
hash
}
}
}This will give you ipfs hash QmQGKFj9pF8pcdffdnRZJ5rLg1rs8xiNh2D974ZG9FQsgU
Default provider is http://127.0.0.1:8080/ipfs/ so we can access our transpiled file at address http://127.0.0.1:8080/ipfs/QmQGKFj9pF8pcdffdnRZJ5rLg1rs8xiNh2D974ZG9FQsgU
$views:
home:
components:
- link: http://127.0.0.1:8080/ipfs/QmQGKFj9pF8pcdffdnRZJ5rLg1rs8xiNh2D974ZG9FQsgU
selector: trello-component
html: |
<trello-component></trello-component>
Add inside the working directory file with name interceptor.ts and add following content;
if using docker place interceptor.ts inside my-project or mount it at with custom folder -v $(pwd)/files:/usr/src/app/files
as long as interceptor.ts present inside /usr/src/app/files it will be loaded.
Working with this approach you need to set --interceptor ./interceptor.ts argument
import { Request } from 'hapi';
import { errorUnauthorized, GenericGapiResolversType } from '@gapi/core';
interface Context {
user: { type: string };
}
interface Resolver extends GenericGapiResolversType {
scope?: string[];
public?: boolean;
}
function canAccess(resolverScope: string[], context: Context) {
return context && context.user && resolverScope.filter(scope => scope === context.user.type).length
? true
: errorUnauthorized();
}
function AuthenticationHooks(resolver: Resolver, context: Context) {
canAccess(resolver.scope, context);
}
function ResolverHooks(resolver: Resolver, root, args, context: Context, info) {
if (resolver && !resolver.public) {
AuthenticationHooks(resolver, context);
}
}
export async function OnRequestHook(request: Request) {
return { user: { type: 'ADMIN' } };
}
export async function ResolverHook(resolver: Resolver, root, args, context: Context, info) {
return ResolverHooks(resolver, root, args, context, info);
}
Important part is that we export 2 methods OnRequestHook and ResolverHook
These are named for convenience the script internally will take UP to 2 methods
- Request handler function - will populate
contextvariable for resolver - Resolver hook function - on every request apply some authentication logic
- By default every resolver scope is predefined with
ADMINto change it set Environment variableAPP_DEFAULT_SCOPE
export async function MyMethodWhichWillPopulateContext(request: Request) {
return { user: { type: 'ADMIN' } };
}
export async function MyMethodThatWillBeRunnedOnEveryRequest(resolver: Resolver, root, args, context: Context, info) {
console.log(context);
return ResolverHooks(resolver, root, args, context, info);
}Create import.ts file and pass argument --import ./import.ts with the following format
import {
Module,
ON_REQUEST_HANDLER,
GRAPHQL_PLUGIN_CONFIG,
Boom,
RESOLVER_HOOK,
GenericGapiResolversType
} from '@gapi/core';
import { ResponseToolkit } from 'hapi';
@Module({
providers: [
{
provide: ON_REQUEST_HANDLER,
deps: [GRAPHQL_PLUGIN_CONFIG],
useFactory: (config: GRAPHQL_PLUGIN_CONFIG) => async (
next,
request: Request,
h: ResponseToolkit,
err: Error
) => {
if (request.headers['authorization']) {
try {
config.graphqlOptions.context = {};
} catch (e) {
Boom.unauthorized();
}
} else {
config.graphqlOptions.context = null;
}
return next();
}
},
{
provide: RESOLVER_HOOK,
useFactory: () => (resolver: GenericGapiResolversType) => {
const resolve = resolver.resolve.bind(resolver.target);
resolver.resolve = async function(root, args, context, info, ...a) {
// Do something with resolver
return resolve(root, args, context, info, ...a);
};
return resolver;
}
}
]
})
export class TestImport {}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent