Tweak the example build process. Move example -> examples/trivial to we can have more than one. Update README appropriately.
This commit is contained in:
parent
196ee3f6d4
commit
dff74f44de
|
@ -0,0 +1,3 @@
|
||||||
|
example
|
||||||
|
examples
|
||||||
|
build/.module-cache
|
37
README.md
37
README.md
|
@ -3,34 +3,31 @@ matrix-react-sdk
|
||||||
|
|
||||||
This is a react-based SDK for inserting a Matrix chat client into a web page
|
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`
|
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`
|
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`
|
3. Switch to the example directory: `cd matrix-react-sdk/examples/trivial`
|
||||||
4. Build the CSS: `npm install && npm run build:css`
|
4. Install the prerequisites: `npm install`
|
||||||
5. Switch to the example: `cd example`
|
5. Build the example and start a server: `npm start`
|
||||||
6. Build the javascript & copy the CSS:
|
|
||||||
`npm install && npm run build && ln -s ../bundle.css ./`
|
|
||||||
|
|
||||||
Serve the app from within the `example` directory by running `python -m
|
Now open http://127.0.0.1:8080/ in your browser to see your newly built
|
||||||
SimpleHTTPServer 8000` and access it at
|
Matrix client.
|
||||||
[http://127.0.0.1:8000](http://127.0.0.1:8000/)
|
|
||||||
|
|
||||||
Using the example app for development
|
Using the example app for development
|
||||||
=====================================
|
=====================================
|
||||||
|
|
||||||
To develop using the example app, you can avoid havign to repeat the above
|
The above commands will let you start working on the app, and any changes you
|
||||||
steps each time you change something:
|
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
|
To have the CSS bundle also rebuild as you change it:
|
||||||
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`
|
|
||||||
|
|
||||||
Now, development version of your Javascript and CSS will be rebuilt whenever
|
1. `cd matrix-react-sdk`
|
||||||
you change any of the files (although you may need to restart the CSS builder
|
2. `npm start:css`
|
||||||
if you add a new file). Note that the debug CSS and Javascript are much, much
|
|
||||||
larger than the production versions.
|
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.
|
||||||
|
|
||||||
|
|
|
@ -7,6 +7,6 @@
|
||||||
<body style="height: 100%; ">
|
<body style="height: 100%; ">
|
||||||
<section id="matrixchat" style="height: 100%; "></section>
|
<section id="matrixchat" style="height: 100%; "></section>
|
||||||
<script src="bundle.js"></script>
|
<script src="bundle.js"></script>
|
||||||
<link rel="stylesheet" href="bundle.css">
|
<link rel="stylesheet" href="node_modules/matrix-react-sdk/bundle.css">
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -7,17 +7,20 @@
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "https://github.com/matrix-org/matrix-react-sdk"
|
"url": "https://github.com/matrix-org/matrix-react-sdk"
|
||||||
},
|
},
|
||||||
"license": "Apache 2",
|
"license": "Apache-2.0",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"browserify": "^10.2.3",
|
"browserify": "^10.2.3",
|
||||||
"envify": "^3.4.0",
|
"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",
|
"reactify": "^1.1.1",
|
||||||
"uglify-js": "^2.4.23",
|
"uglify-js": "^2.4.23",
|
||||||
"watchify": "^3.2.1"
|
"watchify": "^3.2.1"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "browserify -t [ envify --NODE_ENV production ] -t reactify lib/index.js | uglifyjs -c -m -o bundle.js",
|
"build": "browserify -t [ envify --NODE_ENV production ] -t reactify index.js | uglifyjs -c -m -o bundle.js",
|
||||||
"start": "watchify -v -d -t reactify lib/index.js -o bundle.js"
|
"start": "parallelshell 'watchify -v -d -t reactify index.js -o bundle.js' 'http-server'"
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -7,15 +7,17 @@
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "https://github.com/matrix-org/matrix-react-sdk"
|
"url": "https://github.com/matrix-org/matrix-react-sdk"
|
||||||
},
|
},
|
||||||
"license": "Apache 2",
|
"license": "Apache-2.0",
|
||||||
"main": "src/index.js",
|
"main": "src/index.js",
|
||||||
|
"style": "bundle.css",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build:js": "jsx skins/base/views/ build",
|
"build:js": "jsx skins/base/views/ build",
|
||||||
"start:js": "jsx -w skins/base/views/ build --source-map-inline",
|
"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",
|
"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",
|
"start:css": "catw 'skins/base/css/**/*.css' -o bundle.css -v",
|
||||||
"build": "npm run build:js && npm run build:css",
|
"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": {
|
"dependencies": {
|
||||||
"classnames": "^2.1.2",
|
"classnames": "^2.1.2",
|
||||||
|
|
Loading…
Reference in New Issue