@airyrooms/catela

A front-end JavaScript framework for maximizing productivity

Usage no npm install needed!

<script type="module">
  import airyroomsCatela from 'https://cdn.skypack.dev/@airyrooms/catela';
</script>

README

Catela is a JavaScript framework based on React and Redux pattern.

changelog

[v2.1.0] - 2018-11-08

  • (Optional) Add storing variables capability in __PROJECT__ variable on setup.
// To setup
{
    ...
    variables: {
      FOO: getProjectFoo(),
      BAR: getProjectBar(),
      // ...more variables
    }
}

// To get
__PROJECT__.variables['FOO'] // get value stored in FOO
__PROJECT__.variables['BAR'] // get value stored in BAR
  • Moved react and react-dom to dev and peer dependencies (prevent this)

[v1.23]

  • Restructure for asset serving support for more flexible usage now use
{
    assetHost: 'https://cloudfront.123123.net' // as the CDN url,
    artifactPath: '/artifact'// as the bundled assets path (S3 folder path),
    assetPath: '/' // as the images and other assets path (S3 images path [we suggest to use root S3 dir]),
    useBuildID: true|false // if you want to use build ID for long term caching (required if using CDN)  
}
  • Now you can use global variable called __ARTIFACT_PATH__ to access the proper artifact path. add this code to main page
callback(null, {
    ...,
    ARTIFACT_PATH: __ARTIFACT_PATH__
})

and use this on the main.html

<script type="text/javascript" src="${ARTIFACT_PATH}/commons.js"></script>
  • Upload to S3 script example, run this script after ./docker-build
#!/bin/bash
set -e

export APPLICATION_NAME=$1
export ENVIRONMENT=$2

if [ "$ENVIRONMENT" == "dev" ]
  then
    export TARGET_ENV="development"
elif [ "$ENVIRONMENT" == "stg" ]
  then
    export TARGET_ENV="staging"
elif [ "$ENVIRONMENT" == "prod" ]
  then
    export TARGET_ENV="production"
else
  export TARGET_ENV="development"
fi

# Get bucket's folder name
if [ "$APPLICATION_NAME" == "airyrooms-web" ]
    then
    export APP_NAME="airy-web"
    else export APP_NAME="airy-mobile-web"
fi

export BUILDDIR="applications/$APPLICATION_NAME/build/$TARGET_ENV"

export BUILD_ID=$( cat $BUILDDIR/BUILD_ID )

# Upload S3 CF
export TARGET_ASSETS_DIR="$BUILDDIR/client"
export TARGET_ARTIFACTS_DIR="$TARGET_ASSETS_DIR/$BUILD_ID"

export S3_ASSETS_DIR="s3://airy-assets/$APP_NAME"
export S3_ARTIFACTS_DIR="s3://airy-assets/$APP_NAME/assets/$BUILD_ID"

# if [ "$ENVIRONMENT" == "prod" ]
if [ "$ENVIRONMENT" == "stg" ]
  then
    echo "=================================================================================="
    echo ""
    echo "[$APPLICATION_NAME - $TARGET_ENV]"
    echo "Uploading Artifacts from [$TARGET_ARTIFACTS_DIR] to [$S3_ARTIFACTS_DIR]"
    echo ""
    echo "=================================================================================="
    # aws s3 sync $TARGET_ARTIFACTS_DIR $S3_ARTIFACTS_DIR --recursive --exclude "*" --include "main.js" --include "commons.js" --include "styles.css" --include "*.map" --include "webpack-assets.json" --acl public-read
    aws s3 sync $TARGET_ARTIFACTS_DIR $S3_ARTIFACTS_DIR --include "*" --acl public-read

    echo "=================================================================================="
    echo ""
    echo "[$APPLICATION_NAME - $TARGET_ENV]"
    echo "Uploading Assets from [$TARGET_ASSETS_DIR] to [$S3_ASSETS_DIR]"
    echo ""
    echo "=================================================================================="
    aws s3 sync $TARGET_ASSETS_DIR $S3_ASSETS_DIR --exclude "*.js" --exclude "*.css" --exclude "*.json" --exclude "*.map" --acl public-read
fi

[v1.22]

  • added CDN prefix and logger options support to use fluentd, winston, or fluentd & winston.
  • url-loader now use original image name for easier S3 reusability
  • If your app is already using kubernetes, in order to use CDN support, please remove :port from host options and set forceHttps on server to be false (due to redirecting envoy and pods issue) - Don't forget to add on your main.html the prefix to the file you want to put on CDN, such as main.js