aiware-header-bar

AIWARE HEADER BAR

New Veritone header bar reusable for all apps

• Introduction
  • Development mode
  • Production mode
• Quick Start
• Docker Test
• Documentation
  • Tech
  • Folder Structure
  • Babel
  • ESLint
  • Webpack
  • VSCode + ESLint + Prettier
    • Installation guide

Introduction

The Header Bar use rollup and webpack to create bundle file and publish as cdn and npm package.

NPM version: aiware-header-bar@0.1.6-beta-3

CDN version: aiware.js

Quick Start

Clone and install

# Clone the repository
git clone https://github.com/veritone/aiware-header-bar.git
# Go inside the directory
cd aiware-header-bar
# Install dependencies
yarn (or npm install)

Start development server

yarn start (or npm run dev)
Note: add this code into src/index.app.js
ReactDOM.render(
    <Provider store={store}>
        <HeaderBar />
    </Provider>,
    document.getElementById('root')
);

Build and publish

# Build for npmjs version
yarn build (or npm run build)
npm publish
# Build for cdn version
yarn build:cdn
yarn publish:cdn
#note: Currently I updload cdn version by myself. Script is comming.The s3 Bucket is aiware-header-bar. you need to upload the build/static/js => aiware-header-bar/aiware.js

Documentation

Tech

aiware-header-bar uses a number of open source projects to work properly:

• [ReactJs] - web apps - lastest
• [Redux] - predictable state container for JavaScript apps. - lastest
• [Redux-Saga] - library that aims to make application side effects - lastest
• [Node.js] - evented I/O for the backend - version 12
• [Webpack] - static module bundler for modern JavaScript applications - lastest
• [Babel] - JavaScript compiler - lastest
• [MaterialUI] - the world's most popular React UI framework - lastest
• [Rollup] - Rollup is a module bundler for JavaScript (https://rollupjs.org) =======

Folder Structure

All the source code will be inside root directory. Inside src, there is client and server directory. All the frontend code (react, css, js and any other assets) will be in client directory. Backend Node.js/Express code will be in the server directory.

ESLint

ESLint is a pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript.

.eslintrc.json file (alternatively configurations can we written in Javascript or YAML as well) is used describe the configurations required for ESLint. Below is the .eslintrc.json file which We are using Airbnb's Javascript Style Guide which is used by many JavaScript developers worldwide. Since we are going to write both client (browser) and server side (Node.js) code, We are setting the env to browser and node. Optionally, we can override the Airbnb's configurations to suit our needs.

Webpack

Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser.

script/webpack.config.js file is used to describe the configurations required for webpack.

VSCode + ESLint + Prettier

VSCode is a lightweight but powerful source code editor. ESLint takes care of the code-quality. Prettier takes care of all the formatting.

Installation guide

1. Install VSCode

2. Install ESLint extension

3. Install Prettier extension

4. Modify the VSCode user settings to add below configuration

   "eslint.alwaysShowStatus": true,
   "eslint.autoFixOnSave": true,
   "editor.formatOnSave": true,
   "prettier.eslintIntegration": true
   

Above, we have modified editor configurations. Alternatively, this can be configured at the project level by following this article.