Orijs - Javascript Build Template

Starting a new project

Create a new project directory

~ mkdir ./project_name
~ cd ./project_name
~ npm init

Follow the on screen instructions for creating a package.json. Now install the orijs package

npm install orijs --save-dev

Inside your package.json edit the scripts section with the following

{
  "scripts": {
    "start": "orijs start",
    "build": "NODE_ENV=production orijs build"
  },
}

Using Default Template

~ ./node_modules/orijs/bin/orijs new-from-template

Integrating with existing project

The project structure the app looks for is the following

build/ ## Where the project is compiled to
src/
  -> index.js ## The default javascript file
public/
  -> index.html ## The template file for the html

About orijs

Javascript

By default the javascript is compiled with Babel using the preset-env and the following plugins

  'babel-plugin-transform-object-rest-spread'
  'babel-plugin-syntax-dynamic-import'
  'babel-plugin-dynamic-import-webpack'
  'babel-plugin-transform-decorators-legacy'
  'babel-plugin-transform-class-properties'

Stylesheets

By default the stylesheets are compiled to use plain CSS or SASS. Import a sass file from src/index.js or from any javascript file using.

import 'style.scss'; or import 'style.css';

Environments

Environment variables are placed into a /environments folder in the root of your project. I recommend creating a local.js environemnt file and adding it to your .gitignore if you are using version control. To define a specific environment while you build set an environment variable before you run the script.

npm start will become ENV=staging npm start to build the staging environment file. npm run build will become ENV=staging npm run build.

For windows install the cross-env npm plugin globally npm i -g cross-env and prefix the command with cross-env cross-env ENV=staging npm start

Environment example:

module.exports = {
  "apiUrl": "http://localhost:8000",
  ...
}

Other

Importing any other file import '[name].[ext]' will be imported using the file-loader and will be built into dist/static

TODO

1. Allow for path overrides using a config file.
2. Allow other loaders for file processing
3. Use Service Workers
4. Figure out testing using JEST or something else. (I dont want to be specific to React)