https://github.com/kriswep/modern-modular-javascript

A modern and modular JavaScript boilerplate setup
https://github.com/kriswep/modern-modular-javascript

babel boilerplate es2015 es6 inspiration javascript starter webapp webpack webpack2

Last synced: about 1 month ago
JSON representation

A modern and modular JavaScript boilerplate setup

• Host: GitHub
• URL: https://github.com/kriswep/modern-modular-javascript
• Owner: kriswep
• License: unlicense
• Created: 2016-11-06T12:29:36.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-10-22T10:12:12.000Z (over 7 years ago)
• Last Synced: 2024-11-03T23:42:08.658Z (3 months ago)
• Topics: babel, boilerplate, es2015, es6, inspiration, javascript, starter, webapp, webpack, webpack2
• Language: JavaScript
• Size: 401 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Modern, modular JavaScript

This is the JavaScript boilerplate stack I set up late 2016.

It was heavily inspired by [js-stack-from-scratch](https://github.com/verekia/js-stack-from-scratch), but was simplified in some areas and adapted to my wishes.

Code examples inspired by a great [composition>inheritance](https://medium.com/humans-create-software/composition-over-inheritance-cb6f88070205#.aac2jfcff) tutorial.

It comes with a fast running, simple to grasp, [jest](https://facebook.github.io/jest/) test setup.

All dev-tools are exposed as npm scripts.

To get started, clone this repo and run `npm install` (or `yarn install` if you prefer).

Hope somebody may find it useful.

Ideas and contributions very welcome!

## File structure

The bulk of your development is supposed to happen in the `src` folder.

There you'll find `client`, `server` and `shared` subfolders you can fill accordingly

The `dist` folder should contain your static assets (here only `index.html`) and the generated client JavaScript bundle.

`node_modules`, well, contains your modules.

The following folders will be generated by the included scripts and should not be modified manually.

`lib` contains compiled JavaScript, whoch can be used by an node.js server.

`coverage` and `.nyc_output` contains files releated to test coverage.

## Included scripts

You can run all scripts either with [`npm`](https://www.npmjs.com/) or [`yarn`](https://yarnpkg.com/). For the sake of briefness, `npm` is used in the following. For `yarn` just replace `npm` with `yarn`

- `npm start` : Starts node server serving the build client bundle

- `npm test` : Run the test suite

- `npm run lint` : run eslint, we use airbnb style

- `npm build` : Build the client bundle

- `npm run compile` : Compile server side (node.js) JavaScript

- `npm run dev`: Start the development, live-reloading, server

- `npm run coverage`: Calculate test coverage.

For some task there is a watch task, which can run the corresponding task

after file cahnges.

- `npm run test:watch`: Run tests repeatedly

- `npm run lint:watch`: Run eslint repeatedly

- `npm run coverage:watch`: Run coverage task repeatedly

- `npm run fulltest`: Run eslint and test repeatedly

## Ideas

This boilerplate doesn't set up any UI.

You could add whatever you want, like [React](https://facebook.github.io/react/)

or maybe even use [custom elements v1](https://developers.google.com/web/fundamentals/getting-started/primers/customelements).

Also backend implementation is kind of simplistic,

this setup is more focused on frontend JavaScript for now.

## License

Licensed under the [Unlicense](./LICENSE) (this is a permissive open-source license and doesn't mean

this project is not licensed!)