Deploy monorepo in single app on Heroku

description : NodeJS App Web and Worker process type


Requirements:

assume that your have a monorepo folder tree like this:

root(monorepo)--webapp
----app.js
----package.json
--workerapp
----app.js
----package.json

In your monorepo root create .buildpacks file

webapp=https://github.com/heroku/heroku-buildpack-nodejs.git
workerapp=https://github.com/heroku/heroku-buildpack-nodejs.git

Add a Procfile

In root folder.

web: cd webapp && npm start
worker: cd workerapp && npm start

Create an app  on heroku and set up git in your monorepo folder

Add Buildpack config in your  settings

https://github.com/negativetwelve/heroku-buildpack-subdir

Git push heroku master

Scale your web et worker

heroku ps:scale web=1 worker=1

Ionic 4 & Stencil.js

description : Dev tips in Stencil.js


Use Ionic 4 Ion Toast Controller in Stencil.js

 @Prop({ connect: 'ion-toast-controller' }) toastCtrl: HTMLIonToastControllerElement; async showMessage(){
   const toast = await this.toastCtrl.create({
     message: 'Hello World',
     showCloseButton: true,
     closeButtonText: 'Close',
     position: 'middle'
     });
     await toast.present();
 }

Example: https://github.com/ionic-team/ionic-stencil-conference-app

Authentification HTTP Basic Header avec Firebase functions

description : “Sécuriser” simplement une application sur Firebase. Exemple empêcher l’accès à l’environnement de recette.


Attention ne fonctionne pas en local avec “firebase serve” ou le shell firebase. Il faut obligatoirement déployer la fonction pour pouvoir tester.

// functions/index.js'use strict';
const functions = require("firebase-functions");
const path = require("path");
const functions = require('firebase-functions');
// CORS Express middleware to enable CORS Requests.
const cors = require('cors')({origin: true});
exports.auth = functions.https.onRequest((req, res) => {
    // check for basic auth header
    if (!req.headers.authorization || req.headers.authorization.indexOf('Basic ') === -1) {
      // le navigateur détecte automatiquement l'header
      // et ouvre une boite de dialogue avec les champs User/Password
      res.status(401).setHeader("WWW-Authenticate", "Basic");
      return res.end();
  }
  // verify auth credentials
  const base64Credentials = req.headers.authorization.split(' ')[1];
  const credentials = Buffer.from(base64Credentials, 'base64').toString('ascii');
  const [username, password] = credentials.split(':');
  if (username === "demo" && password === "demo") {
      console.log(username, "successfully logged in");
      // rediriger vers l'application
      // etant donnee qu'on est sur une single page application
      // une seule authentification est nécessaire pour charger
      // l'application dans le navigateur
      return res.sendFile(path.join(__dirname, "public/index.html"));
  }
  console.log(username, "failed to logged in with password: ", password);
  res.status(401).setHeader("WWW-Authenticate", "Basic");
  return res.send("Unauthorized");
});

A placer dans le dossier functions. La partie hosting ne devra comporter que les assets( Images, CSS). Il ne devra pas contenir de fichier avec le nom “index.html”.

fucntions/public/index.html


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Application Sample</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- GOOGLE FONT -->
  <link href="<https://fonts.googleapis.com/css?family=Montserrat:400,600,700>" rel="stylesheet" type="text/css">
<body>
  <noscript>Please enable JavaScript to continue using this application.</noscript>
  <script type="application/javascript">
  alert("Vous avez accéder à la page.");
  </script>
</body>
</html>

Inspiré de : https://www.dotnetcurry.com/nodejs/1231/basic-authentication-using-nodejs

Installer TwixTel réseau avec un partage de fichier dans le cloud


description : Utiliser Microsoft Azure File Share pour installer la version réseau de TwixTel

La version réseau de TwixTel nécessite la configuration d’un partage de fichier sur un serveur Windows, Linux, ou Mac.

Il est possible de l’installer sans avoir à maintenir un serveur. Pour ce faire on peut créer un partage de fichier sans serveur, sur le cloud Microsoft Azure.

Prérequis

  • Un compte Microsoft Azure (l’ouverture d’un compte donne droit à 170€ de crédit offert gratuitement pour tester les services de la plateforme)
  • Le logiciel Twixtel et sa clé d’activation.

Suivre la documentation pour créer un partage de fichier sur Azure.

https://docs.microsoft.com/fr-fr/azure/storage/files/storage-how-to-create-file-share

Configurer l’accès au partage de fichier Azure depuis un poste Windows

https://docs.microsoft.com/fr-fr/azure/storage/files/storage-how-to-use-files-windows

Enfin installer Twixtel Réseau

  1. Spécifier le chemin vers le partage réseau créer précédemment.
  2. Installer ensuite la version client de Twixtel sur les autres postes.

StencilJS State Management Tips

description: Advanced State management without Redux, Mobs, or Stencil State Tunnel.


Example with Stencil.js v0.16.x .

Root Component

import { Component } from '@stencil/core';export interface User {
  name: string;
}
@Component({
  tag: 'app-root'
})
export class AppRoot {
  postService: PostService;
  @State() user: User;
  constructor(){
    this.postService = new PostService();
  }
  signOut = () => {
      this.user = null;
    }
  signIn = () => {
      this.user = { name: "Pablo" }
    }
  render() {
    return (
      <div>
        <header>
          <h1>Stencil App Starter</h1>
        </header>
        { this.user && <span> Your are connected {this.user.name}. </span> }
        <main>
          <stencil-router>
            <stencil-route-switch scrollTopOffset={0}>
              <stencil-route url='/' component='app-home' exact={true} />
              <stencil-route url='/profile' component='app-profile' componentsProps={{user: this.user, signIn : this.signIn, signOut : this.signout }}/>
            </stencil-route-switch>
          </stencil-router>
        </main>
      </div>
    );
  }
}

Profile Page


import { Component, Prop } from '@stencil/core';
@Component({
  tag: 'app-profile'
})
export class AppProfile {
  @Prop() user: User;
  @Prop() signIn: Function;
  @Prop() signOut: Function;
  render() {
      return (
        <div class="app-profile">
          <p>
            Hello! My name is {this.user && this.user.name}. My name was passed in
            through a @Prop!
          </p>
          <button onClick={this.signIn}>Sign In</button>
          <button onClick={this.signOut}>Sign Out</button>
        </div>
      );
  }
}

Resources :

Real world example application built with Stencil.js :

https://github.com/hcavalieri/stencil-realworld-app

Firebase Auth onAuthStateChanged avec Stenciljs

description : Attendre que la callback enregistrer dans onAuthStateChanged soit appelé avant

d’initialiser l’application. Permet d’éviter le déclenchement trop tôt d’une
routeGuard redirection si User non connecté.


Date publication : 28/10/2019

Version : Stencil.js v1.X

Solution pour éviter qu’au rechargement de la page que l’utilisateur soit rediriger vers la page de connexion. Alors que l’utilisateur est encore connecté. On attends juste que la callback soit au moins appelé une fois pour vérifier que l’utilisateur est bien à null ou présent.

Exemple d’implémentation avec Stenciljs. La documentation de Stencil suggère de retourner une Promise dans la méthode componentWillLoad() afin d’être sur que les données soit chargées avant le rendu du composant.

app-root.tsx

import { Component, State, h, Prop, } from '@stencil/core';import { User } from '../models/user';
import { PrivateRoute } from '../commons/utils';
declare var firebase: firebase.app.App
@Component({
  tag: 'app-root'
})
export class AppRoot {
  @State() user: User;
  componentWillLoad() {
    return new Promise((resolve) => {
      firebase.auth().onAuthStateChanged((user) => {
        this.injectUser(user);
        resolve();
      });
    })
  }
  injectUser = (user) => {
    if (user) {
      this.defaultProps = Object.assign({}, { user: user })
    } else {
      this.defaultProps =Object.assign({ user: undefined });
    }
  }
  render() {
    return (
      [
          <stencil-route-switch >
            <stencil-route componentProps={{user: this.user}} url='/' component='app-home' exact={true} />
            <stencil-route componentProps={{user: this.user}} url='/sign-in' component='app-sign-in' />
            <stencil-route componentProps={{user: this.user}} url='/sign-up' component='app-sign-up' />
            <PrivateRoute url='/profile' componentProps={{user: this.user}} component='app-profile' />
          </stencil-route-switch>
        </stencil-router>
      ]
    );
  }
}

utils.tsx

import { h } from "@stencil/core";
/**
 * <https://github.com/ionic-team/stencil-router/wiki/Enforce-authentication-for-some-routes>
*/
export const PrivateRoute = ({ component, ...props}: { [key: string]: any}) => {
    const Component = component;
    const redirectUrl = props.failureRedirect || '/sign-in';
    return (
      <stencil-route {...props} routeRender={
        (props: { [key: string]: any}) => {
          if (props.user) {
            return <Component {...props} {...props.componentProps}></Component>;
          }
          return <stencil-router-redirect url={redirectUrl}></stencil-router-redirect>
        }
      }/>
    );
  }