https://github.com/opensheetmusicdisplay/webpack-usage-example
An example how to use OpenSheetMusicDisplay within a Webpack build.
https://github.com/opensheetmusicdisplay/webpack-usage-example
example musicxml opensheetmusicdisplay typescript vexflow webpack
Last synced: 6 months ago
JSON representation
An example how to use OpenSheetMusicDisplay within a Webpack build.
- Host: GitHub
- URL: https://github.com/opensheetmusicdisplay/webpack-usage-example
- Owner: opensheetmusicdisplay
- License: mit
- Created: 2016-07-07T08:59:47.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2025-03-10T22:39:41.000Z (11 months ago)
- Last Synced: 2025-05-07T03:47:06.547Z (9 months ago)
- Topics: example, musicxml, opensheetmusicdisplay, typescript, vexflow, webpack
- Language: TypeScript
- Homepage: http://www.opensheetmusicdisplay.org
- Size: 1.33 MB
- Stars: 4
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# webpack-usage-example
An example how to use [OpenSheetMusicDisplay](https://github.com/opensheetmusicdisplay/opensheetmusicdisplay) within a Webpack build. Uses TypeScript.
## Usage
```
$ npm install
$ npm start
```
Now you can browse to http://127.0.0.1:8080 and see your running instance of
OpenSheetMusicDisplay.
If you decided to play around and make changes, you can trigger a rebuild anytime using
```
$ npm run webpack
```
You may have to do a hard refresh in the browser (Ctrl+F5), Chrome sometimes caches the old page and compiled index.ts.
## Project structure
* `index.ts` - the application's entry point, contains all sources
* `webpack.config.js` - Webpack configuration
* `tsconfig.json` - TypeScript compiler configuration
* `Resources/` - Resources folder for project data
* `MuzioClementi_SonatinaOpus36No1_Part1.xml` - the MusicXML file to be displayed
* `favicon.ico` - OSMD icon for the tab bar
### Build artifacts
* `dist/` - directory containing all build artifacts, will be served from a local http server on `npm start`