@airyrooms/catela

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

changelog

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