# webapp-frame

> A common frame for webapps using Browserify and Sass

Latest version **0.0.1** (published 2014-09-24) · 0 weekly downloads

## Install

```sh
npm install webapp-frame
pnpm add webapp-frame
yarn add webapp-frame
bun add webapp-frame
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2014-09-24 |
| First published | 2014-09-24 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tomgrooffer |

## Links

- npm: https://www.npmjs.com/package/webapp-frame
- Repository: https://github.com/tomgrooffer/webapp-frame
- Issues: https://github.com/tomgrooffer/webapp-frame/issues
- npm.io page: https://npm.io/package/webapp-frame

## Recent versions

- 0.0.1 (latest) — 2014-09-24

## README

webapp-frame
============

This is a basic toolkit for building webapps. The primary goal is to provide
a stable, fast and feature rich boilerplate for developers that want to 
create webapps.

- [Browserify](http://browserify.org)
- [SCSS](http://sass-lang.com)
- [Gulp](http://gulpjs.com)
- [BrowserSync](http://browsersync.io)

### Installation

You need to install [Node](http://nodejs.org), [Gulp](http://gulpjs.org) 
(click the links to find installation instructions).

Open Terminal / Command Prompt from the project directory and run the 
following command:

```
sudo npm install
```

The installation is now complete.

### Getting started

Open Terminal / Command Prompt from the project directory and run
the following command to start developing your new web application:

```
gulp
```

### Directories / Files

- `src` main directory, contains HTML files.
- `src/index.html` this is the main HTML file, which is displayed in the
browser once gulp is started. When you make changes to HTML files, the browser
will automatically update.
- `src/scripts` this directory contains all your application modules.
- `src/scripts/main.js` this is the main module, the entry point of your 
application.
- `src/styles` this directory contains .scss files, scss files are automatically
compiled and injected to the browser.

### Modules

Most web applications exists of custom modules (i.e. login-form) and libraries
(i.e. [Backbone.js](http://backbonejs.org)).

All your modules go to the `src/scripts` directory. The entry point of your 
application is `src/scripts/main.js`, this file is required.

Modules are bundled on the fly and automatically reload the browser.

`src/index.html` at the end of the body tags has 2 scripts:

```html
<script src="scripts/vendors.js"></script>
<script src="scripts/main.js"></script>
```

Gulp creates and automatically updates these 2 scripts, main.js contains
your application modules and vendors.js contains all the 3th party dependencies
(i.e. jQuery, Angular.js etc.)

We maintain 2 seperate files because of the speed and size, if we would
recompile only 1 script file each time we make changes to our modules, it
will be slow as hell.

### Installing module dependencies

Lets say you are writing an application which needs [Backbone.js](http://backbonejs.org)
if we want to use Backbone in one of our modules we simply do this:

Open Terminal / Command prompt in the root of the project:

```
sudo npm install backbone --save
```

**NOTE:** You have to add the `--save` flag when installing npm packages that
you want to use in your application. If you forget this, the library will not
be compiled.

Once the installation is finished, you can `require` Backbone in your modules.

**src/scripts/login-form.js**
```js
var Backbone = require('backbone');

var LoginForm = Backbone.View.extend({
	// ...
});

module.exports = LoginForm;
```

**src/scripts/main.js**
```js
var LoginForm = require('./login-form');
var loginForm = new LoginForm();
```

And again, we automatically compile everything on the fly and reload the browser.

### React support

If you want to build your application using [React](http://facebook.github.io/react/)
simply install React like you would install any other library:

```
sudo npm install react --save
```

Now lets create our first react component

**src/scripts/hello.jsx**
```js
/** @jsx React.DOM */
var React = require('react');

var Hello = React.createClass({
	render: function () {
		return <div>Hello {this.props.name}</div>;
	}
});

module.exports = Hello;
```

Lets do something with this component in `src/scripts/main.js`

**src/scripts/main.js**
```js
var React = require('react');
var Hello = require('./hello.jsx');

var targetNode = document.getElementById('content');

React.renderComponent(Hello({ name: 'John' }), targetNode);
```

And your up and running!

---
_Source: https://npm.io/package/webapp-frame · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._