create-application-template v2.1.1

Create Application Template

This project aims to provide a configured application template for you to build upon.

All configuration is fully visable and under your control to augment as you see fit.

The template is a typescript enabled React application with a test suite and code linting.

See the template running live here.

installation

first install globally

npm install -g create-application-template

then create your project

npx create-application-template --name={my-project}

usage

webpack is used for code bundling and the development server

run development server and test suite (on http://localhost:3333 by default)

npm run dev

build static bundle

npm run build

tsconfig

focused on type checking; babel is used for transpiling

pre-commit

scripts in .husky/pre-commit are run on commits for quality control

add or remove scripts you'd like run before code is commited

test suite

to create a test follow this file naming format: *.{spec,test}.{ts,tsx}

run the test suite stand alone like so

npm run test

code linting

linting rules are in .eslintrc.js; install the ESLint pluggin if using vscode

npm run lint

css linting rules are in .stylelintrc.js; install the Stylelint pluggin if using vscode

npm run stylelint

styles

styling is done using the style-components module, but straight CSS is supported

after instillation it is recommended to proceed using styled-components or CSS, but not both

if you proceed with styled-components:

• remove the single .css example in /src/styles/
• that's it!

if you prefer CSS:

• alter .stylintrc.js and .husky/pre-commit per the files' notes
• remove .ts files from /src/styles/ or "recreate" them in .css

environmental settings

access environmental variables in code like so

console.log(process.env.PORT)

NODE_ENV settings

automatically set to production for build; develop for dev server

.env variables

add new or alter existing environmental variables via the .env file

the following variables exist in the default configuration and can be altered

develop (dev server)

# optional
PORT={port number}
INLINE_SIZE_LIMIT={default is 10000}

production (build)

# optional
INLINE_SIZE_LIMIT={default is 10000}