Code Monkey home page Code Monkey logo

ts-template's Introduction

TypeScript Project Files Template for OGP

Folder Structure

Two separate TypeScript projects, frontend/ and backend/, for frontend and backend respectively.

Structure within frontend/backend folder taken from [1]. Notably, we distinguish between lib/ and src/ directories, the latter for files that we have to process (eg, transpile) into build/ or dist/.

Linting

Done with ESLint, using the following rule configs:

  • eslint:recommended
  • plugin:prettier/recommended

Prettier is further configured using the rules in .prettierrc.js.

VSCode users will have to add the following to their ESLint extension settings for linting to work in both frontend/ and backend/:

    "eslint.workingDirectories": [
        "backend",
        "frontend"
    ],

Additional rules

Developers are free to add more ESLint rules that bring their project in-line with norms specific to their language or framework of choice, eg. typescript or React.

Conventional Commits

Commit messages follow conventional commits. This is enforced by commitlint, when pushing to remote branch.

Commitizen

Commitizen has been installed as a convenience for writing conventional commit messages, via npm run cz. This may be removed to minimise project dependencies.

Commit Hooks

Husky is used in tandem with:

  • lint-staged to ensure files are linted on commit
  • commitlint to ensure commits adhere to convention on push

The pre-push hook will interfere on initial push since commitlint uses the remote branch as the lower bound in the commit range to inspect, and there would be no remote branch. Bypass this the first time with git push --no-verify.

Continuous Integration

Travis is commonly used in OGP. A .travis.yml config has been provided for convenience, which will run the following in order:

  • unit-tests (commented out)
  • linting
  • commit linting

Builds will fail if any of these tasks fail.

Miscellany

Dependabot

.github/dependabot.yml is in place so that npm dependencies will be regularly updated.

Gitpod

A .gitpod.yml has been configured to run npm install for Gitpod users creating workspaces from the repository.

References

[1]: https://gist.github.com/tracker1/59f2c13044315f88bee9

ts-template's People

Contributors

dependabot[bot] avatar lonerifle avatar liangyuanruo avatar prestonlimlianjie avatar snyk-bot avatar madanalogy avatar buooy avatar zxr90 avatar jeantanzj avatar

Watchers

James Cloos 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.