Giter Club home page Giter Club logo

ui-template's Introduction

[UI-Template]

The Cloud Dashboard & User Interface for Cloud-Technology LLC.

[[TOC]]

Overview

Cloud-Technology's Dashboard is a set of user-friendly utilities that interface RESTful HTTP endpoints & related database CRUD actions. The User-Interface is consistent in visibility, styling, but above all else, functionality.

As a Single-Page-Application (SPA), the client-sided front-end can remain functional so long as the API & dependent endpoints remain online -- largely a benefit from micro-serviced architecture(s).

Usage

Setup & Installation

npm run setup

Development

npm run start

CI-CD

Runbook

Build

Production 
source .env.production || true

cat << EOF > .env
PORT="${PORT:-8443}"
HTTPS="${HTTPS:-false}"
HOST="${HOST:-0.0.0.0}"

FAST_REFRESH="${FAST_REFRESH:-false}"

NODE_ENV="${NODE_ENV:-production}"
BABEL_ENV="${BABEL_ENV:-production}"

BROWSERSLIST_DISABLE_CACHE="${BROWSERSLIST_DISABLE_CACHE:-true}"
BROWSERSLIST_CONFIG="${BROWSERSLIST_CONFIG:="configuration/.browserlistrc"}"

SCROLL_TRACKING="${SCROLL_TRACKING:-false}"
GENERATE_SOURCEMAP="${GENERATE_SOURCEMAP:-true}"
INLINE_RUNTIME_CHUNK="${INLINE_RUNTIME_CHUNK:-true}"
ESLINT_NO_DEV_ERRORS="${ESLINT_NO_DEV_ERRORS:-true}"
DISABLE_ESLINT_PLUGIN="${DISABLE_ESLINT_PLUGIN:-true}"

SASS_PATH="${SASS_PATH:-node_modules:src}"

SSL_CRT_FILE="${SSL_CRT_FILE}"
SSL_KEY_FILE="${SSL_KEY_FILE}"

ENVIRONMENT="${ENVIRONMENT:-Production}"

REACT_APP_API="${REACT_APP_API}"
REACT_APP_API_ENDPOINT="${REACT_APP_API_ENDPOINT}"
REACT_APP_WS_ENDPOINT="${REACT_APP_WS_ENDPOINT}"
EOF

npm run build --production

Archive

Registry 
export VERSION="$(printf "%s" "$(cat VERSION)")"

export BASE="${CI_REGISTRY_IMAGE}/${CONTAINER}"
export TARGET="${BASE}/${VERSION}"
export LATEST="${TARGET}:latest"

docker build --no-cache --tag "${TARGET}" --tag "${LATEST}" .
docker login -u "${CI_REGISTRY_USER}" -p "${CI_REGISTRY_PASSWORD}" "${CI_REGISTRY}"
docker push "${TARGET}" && docker push "${LATEST}"

Distribution

ECR 
export VERSION="$(printf "%s" "$(cat VERSION)")"

export AWS_ACCESS_KEY_ID="${AWS_ACCESS_KEY_ID}"
export AWS_SECRET_ACCESS_KEY="${AWS_SECRET_ACCESS_KEY}"

export BASE="${AWS_ACCOUNT_ID}.dkr.ecr.${AWS_DEFAULT_REGION}.amazonaws.com/${CONTAINER}"
export TARGET="${BASE}:${VERSION}"
export LATEST="${BASE}:latest"

docker build --no-cache --tag "${TARGET}" --tag "${LATEST}" .

export URL="${AWS_ACCOUNT_ID}.dkr.ecr.${AWS_DEFAULT_REGION}.amazonaws.com"
export PASSWORD="$(aws ecr get-login-password --region ${AWS_DEFAULT_REGION})"

aws ecr create-repository --repository-name "${CONTAINER}" --region "${AWS_DEFAULT_REGION}" || true
printf "%s\n" "${PASSWORD}" | docker login "${URL}" --username AWS --password-stdin

docker push "${TARGET}" && docker push "${LATEST}"

Deployment

Stack 
aws cloudformation create-stack --stack-name "${STACK}" \
    --template-body "file://Stack.Yaml"

# --> Update

aws cloudformation update-stack --stack-name "${STACK}" \
    --template-body "file://Stack.Yaml"

# --> Waiter(s)

aws cloudformation wait stack-create-complete \
    --stack-name "${STACK}" || true

aws cloudformation wait stack-delete-complete \
    --stack-name "${STACK}" || true

aws cloudformation wait stack-exists \
    --stack-name "${STACK}" || true

aws cloudformation wait stack-import-complete \
    --stack-name "${STACK}" || true

aws cloudformation wait stack-rollback-complete \
    --stack-name "${STACK}" || true

aws cloudformation wait stack-update-complete \
    --stack-name "${STACK}" || true

Environment Variables

The included .env.local file + pre-configured TLS *.key, *.conf, *.crt, & *.pfx located in configuration should be enough to begin local development. If the default development TLS file(s) need to be changed, the password for Development.pfx is Development.

Please refer to the following table when creating distributions & deploying assets:

Key Value Description
PORT 8443 [Description]
HTTPS false [Description]
HOST 0.0.0.0 [Description]
FAST_REFRESH false [Description]
NODE_ENV production [Description]
BABEL_ENV production [Description]
SCROLL_TRACKING false [Description]
GENERATE_SOURCEMAP true [Description]
INLINE_RUNTIME_CHUNK true [Description]
ESLINT_NO_DEV_ERRORS true [Description]
DISABLE_ESLINT_PLUGIN true [Description]
SASS_PATH node_modules:src [Description]
SSL_CRT_FILE N/A [Description]
SSL_KEY_FILE N/A [Description]
ENVIRONMENT Production [Description]

Anything listed as a value of ... is a soft dependency -- meaning that in order to achieve a full working state, the value(s) should exist and any associated resource(s) created ahead of time. However, the application will continue to resolve requests regardless of such dependents in order to avoid chicken-or-egg problems.

These values for production should be established in a .env.production file during the CI-CD build process, and finally, in a .env during the distribution.

TLS Development Key(s)

OpenSSL CLI Instructions 
#!/bin/bash --posix

#
# A CSR or Certificate Signing request is a block of encoded text that is given to a Certificate Authority
# when applying for an SSL Certificate. It is usually generated on the server where the certificate will be
# installed and contains information that will be included in the certificate such as the organization name,
# common name (domain name), locality, and country. It also contains the public key that will be included in
# the certificate. A private key is usually created at the same time that you create the CSR, making a key pair.
#
# CSRs are generally encoded using ASN.1 according to the PKCS #10 specification.
#

# ... export SUB="/C=US/ST=MN/O=Cloud Technology LLC./CN=localhost/subjectAltName=DNS:*.nexus.cloud-technology.io,DNS:nexus.cloud-technology.io,localhost,0.0.0.0"
# ...
# ... openssl req -x509 -newkey rsa:8192 -nodes -sha256   \
# ...     -days 365 -passin "pass:Development"            \
# ...         -subj "${SUB}" -keyout Development.key      \
# ...             -out Development.pem

# --> Debian & Ubuntu
# ... sudo apt install libnss3-tools --yes

# --> OS Agnostic
cat << "EOF" | tee Development.conf
[ req ]
prompt              = no
default_bits        = 2048
default_keyfile     = Development.pem
distinguished_name  = subject
req_extensions      = req_ext
x509_extensions     = x509_ext
string_mask         = utf8only

# RFC 4514, RFC 4519

[ subject ]
countryName              = US
stateOrProvinceName      = MN
localityName             = Minneapolis
organizationName         = Localhost

# Friendly Name

commonName          = Development Certificate
emailAddress        = [email protected]

[ x509_ext ]

subjectKeyIdentifier        = hash
authorityKeyIdentifier      = keyid,issuer
basicConstraints        = CA:FALSE
keyUsage                = digitalSignature, keyEncipherment
subjectAltName          = @alternate_names
nsComment               = "OpenSSL Generated Certificate"

# RFC 5280, Section 4.2.1.12 makes EKU optional

[ req_ext ]

subjectKeyIdentifier        = hash

basicConstraints            = CA:FALSE
keyUsage                    = digitalSignature, keyEncipherment
subjectAltName              = @alternate_names
nsComment                   = "OpenSSL Generated Certificate"

# CA/Browser Baseline Requirements, Appendix (B)(3)(G)

[ alternate_names ]

DNS.1       = localhost
DNS.7       = 127.0.0.1

# IPv6 localhost
# DNS.8     = ::1
EOF

openssl req -config Development.conf -new -x509 -sha256 -newkey rsa:2048 -nodes \
    -days "1024" -keyout "Development.key" -out "Development.crt"

openssl pkcs12 -export -out "Development.pfx" -inkey "Development.key" -in "Development.crt"

# --> MacOS Only
# ... sudo security -v add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain Development.crt

# --> Debian & Ubuntu
# ... pk12util -d "sql:${HOME}/.pki/nssdb" -i Development.pfx
# ... certutil -d sql:$HOME/.pki/nssdb -A -t "P,," -n "Development Certificate" -i Development.crt

# Reference
#   - https://stackoverflow.com/questions/7580508/getting-chrome-to-accept-self-signed-localhost-certificate

ui-template's People

Contributors

segmentational avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.