Tweak the example build process. Move example -> examples/trivial to we can have more than one. Update README appropriately.

This commit is contained in:
David Baker 2015-07-03 15:56:04 +01:00
parent 196ee3f6d4
commit dff74f44de
7 changed files with 32 additions and 27 deletions

3
.npmignore Normal file
View File

@ -0,0 +1,3 @@
example
examples
build/.module-cache

View File

@ -3,34 +3,31 @@ matrix-react-sdk
This is a react-based SDK for inserting a Matrix chat client into a web page
Getting started with the example
================================
Getting started with the trivial example
========================================
1. Install or update `node.js` so that your `npm` is at least at version `2.0.0`
2. Clone the repo: `git clone https://github.com/matrix-org/matrix-react-sdk.git`
3. Switch to your new checkout: `cd matrix-react-sdk`
4. Build the CSS: `npm install && npm run build:css`
5. Switch to the example: `cd example`
6. Build the javascript & copy the CSS:
`npm install && npm run build && ln -s ../bundle.css ./`
3. Switch to the example directory: `cd matrix-react-sdk/examples/trivial`
4. Install the prerequisites: `npm install`
5. Build the example and start a server: `npm start`
Serve the app from within the `example` directory by running `python -m
SimpleHTTPServer 8000` and access it at
[http://127.0.0.1:8000](http://127.0.0.1:8000/)
Now open http://127.0.0.1:8080/ in your browser to see your newly built
Matrix client.
Using the example app for development
=====================================
To develop using the example app, you can avoid havign to repeat the above
steps each time you change something:
The above commands will let you start working on the app, and any changes you
make to the javascript source files will cause the javascript to be rebuilt
automatically, but the same will not apply for the CSS.
1. Perform all the steps above
2. In the matrix-react-sdk directory: `npm run start:css`
3. Open a new terminal window in the matrix-react-sdk directory:
`cd example; npm start`
To have the CSS bundle also rebuild as you change it:
Now, development version of your Javascript and CSS will be rebuilt whenever
you change any of the files (although you may need to restart the CSS builder
if you add a new file). Note that the debug CSS and Javascript are much, much
larger than the production versions.
1. `cd matrix-react-sdk`
2. `npm start:css`
Note that you may need to restart the CSS builder if you add a new file. Note
that `npm start` builds debug versions of the the javascript and CSS, which are
much larger than the production versions build by the `npm run build` commands.

View File

@ -7,6 +7,6 @@
<body style="height: 100%; ">
<section id="matrixchat" style="height: 100%; "></section>
<script src="bundle.js"></script>
<link rel="stylesheet" href="bundle.css">
<link rel="stylesheet" href="node_modules/matrix-react-sdk/bundle.css">
</body>
</html>

View File

@ -7,17 +7,20 @@
"type": "git",
"url": "https://github.com/matrix-org/matrix-react-sdk"
},
"license": "Apache 2",
"license": "Apache-2.0",
"devDependencies": {
"browserify": "^10.2.3",
"envify": "^3.4.0",
"matrix-react-sdk": "../",
"http-server": "^0.8.0",
"matrix-react-sdk": "../../",
"npm-css": "^0.2.3",
"parallelshell": "^1.2.0",
"reactify": "^1.1.1",
"uglify-js": "^2.4.23",
"watchify": "^3.2.1"
},
"scripts": {
"build": "browserify -t [ envify --NODE_ENV production ] -t reactify lib/index.js | uglifyjs -c -m -o bundle.js",
"start": "watchify -v -d -t reactify lib/index.js -o bundle.js"
"build": "browserify -t [ envify --NODE_ENV production ] -t reactify index.js | uglifyjs -c -m -o bundle.js",
"start": "parallelshell 'watchify -v -d -t reactify index.js -o bundle.js' 'http-server'"
}
}

View File

@ -7,15 +7,17 @@
"type": "git",
"url": "https://github.com/matrix-org/matrix-react-sdk"
},
"license": "Apache 2",
"license": "Apache-2.0",
"main": "src/index.js",
"style": "bundle.css",
"scripts": {
"build:js": "jsx skins/base/views/ build",
"start:js": "jsx -w skins/base/views/ build --source-map-inline",
"build:css": "catw 'skins/base/css/**/*.css' -o bundle.css -c uglifycss --no-watch",
"start:css": "catw 'skins/base/css/**/*.css' -o bundle.css -v",
"build": "npm run build:js && npm run build:css",
"start": "parallelshell 'npm run start:js' 'npm run start:css'"
"start": "parallelshell 'npm run start:js' 'npm run start:css'",
"prepublish": "npm run build"
},
"dependencies": {
"classnames": "^2.1.2",