npm install
npm start
Now open up http://localhost:2304/livetracking
Note that "npm start" will auto-build bundle.js and index.css and keep them in memory rather than actually putting them in the given directory. So you won't see the generated files in the destination directory.
Add this json config in localStorage. remoteServerUrl is for where should the ajax requests hit in case you wish to set it/override it.
"debugConfig": {
"debug": true,
"remoteJsUrl": "http://localhost:2304/dist/"
"remoteServerUrl": <server url>
}
npm install
npm run build
- Entry point is
index.js
- Add your svg icons in the folder
res/svg/
. - The config file svg-icons.font.js in the root directory which would look like this:
module.exports = {
fontName: "svgicons",
files: [
"./res/svg/*.svg"
],
baseClass: "svgicons",
classPrefix: "svgicons-"
};
- Say you added
foo.svg
in the folder. Now just use<span class="svgicons svgicons-foo"/>"
in your component, and save. If npm start is running, it'll auto-build and the svg will be included and used.
How this works: See webpack.config.js. You'll find the loader fontgen being used along with url-loader. Currently embed is set true, so the created fonts are embedded in the final css file as data-uri.
- For custom font after adding it in the directory
res/fonts/
, simple create a @font-face declaration in the suitable scss file and use the path relative to the output css file after bundling.
How this works: Webpack's
url-loader
loads these fonts. See webpack.config.js for the current configuration.
- Add the image in
res/images/
- Use it with
background: url()
in your scss file and use the path relative to the output css file after bundling inside url.
How this works: Webpacks's
url-loader
loads these images. See webpack.config.js for the current configuration. If the image is smaller than 10kb it'll be embedded as data-uri. (See webpack.config.js)
- Comments: {/* add comment like this */}
- To dynamically navigate to a route, first add this parallel to the
render()
function:then use this:contextTypes: { router: React.PropTypes.object }
this.context.router.push("/whatever/route");
- For debugging while working on chrome, add source map by adding
devtool: '#source-map'
inwebpack.config.js
. Find more options here - Whenever you make any changes in webpack config do stop npm start and run it again for the change to take effect.