{"id":20923804,"url":"https://github.com/patternfly/patternfly-demo-app","last_synced_at":"2025-05-13T16:30:45.996Z","repository":{"id":66146581,"uuid":"62244400","full_name":"patternfly/patternfly-demo-app","owner":"patternfly","description":"The PatternFly 3 demo app serves as a boiler for building your production app with PatternFly, Node.JS, and Webpack. Demo:","archived":true,"fork":false,"pushed_at":"2017-06-01T18:55:39.000Z","size":26766,"stargazers_count":25,"open_issues_count":2,"forks_count":23,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-03-13T07:02:22.049Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://rawgit.com/patternfly/patternfly-demo-app/master/dist/index.html","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/patternfly.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-06-29T17:22:43.000Z","updated_at":"2025-02-05T17:52:51.000Z","dependencies_parsed_at":"2023-03-04T13:45:52.918Z","dependency_job_id":null,"html_url":"https://github.com/patternfly/patternfly-demo-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patternfly%2Fpatternfly-demo-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patternfly%2Fpatternfly-demo-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patternfly%2Fpatternfly-demo-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patternfly%2Fpatternfly-demo-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/patternfly","download_url":"https://codeload.github.com/patternfly/patternfly-demo-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253981668,"owners_count":21994314,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-18T20:17:49.036Z","updated_at":"2025-05-13T16:30:43.223Z","avatar_url":"https://github.com/patternfly.png","language":"CSS","readme":"# patternfly-demo-app\n\nThe PatternFly demo app serves as a boiler for building your production app with [PatternFly](http://patternfly.org/), [Node.JS](https://nodejs.org/en/), and [Webpack](https://webpack.github.io/).\n\n![Image of PatternFly](https://avatars2.githubusercontent.com/u/6391110?v=3\u0026s=400)\n![Image of NodeJS](http://www.devsensation.es/sites/default/files/styles/large/public/field/image/nodejs-logo.png?itok=URP6hUpT)\n![Image of Webpack](https://avatars0.githubusercontent.com/webpack?\u0026s=256)\n\n## Demo\nThe main demo can be found [here](https://rawgit.com/patternfly/patternfly-demo-app/master/dist/index.html). There is a sample [login](https://rawgit.com/patternfly/patternfly-demo-app/master/dist/login.html) page as well.\n\n### Installation\n\nInstall project node modules:\n```\nnpm i\n```\n\n### Development\nFor development with [BrowserSync](https://www.browsersync.io/) run:\n```\nnpm start\n```\n\nThis will do two things:\n\n1. It will build the static assets in the [dist](dist) directory. You can just click on the `dist/index.html` file to browse around.\n2. It will automatically open up the running application in your default browser, which is located at `localhost:3000`.\n\n### Production\nFor production, you will just want to compile your webpack bundle. You'd then have to choose how to run your app (e.g. with Node by running `node server/app.js`, setting up CI, a process monitor, etc.; serving static assets built in the `/dist` directory) depending on your needs.\n\n```\nnpm run build:prod\n```\n\nThe resulting build will be in the [dist](dist) folder.\n\n### Extending the Demo App\n\n#### JS\nAll js references loaded in `src/js/main.js` will be chunked by webpack and loaded in a single file, `dist/main.bundle.js`. Feel free to add your own JS scripts and `require` them in the bundle.\n \nIf you would like to add `d3.js` or `c3.js` charts to your page, include the `charts` bundle in `dist/charts.bundle.js`.\n\n#### HTML\nAll HTML documents added to [src/html](src/html) are copied as-is to the `dist` folder.\n\n#### CSS/LESS\nLess/css is written to a file via the [extract-text plugin](https://github.com/webpack/extract-text-webpack-plugin). You can write any custom less in `src/less/custom.less` and it will be compiled to `dist/custom.css` which can be referenced in your HTML.\n\nNote that images and fonts referenced in your custom css are automatically inlined via webpack [url-loader](https://github.com/webpack/url-loader).\n\n#### Webpack dev notes\nYou will want to copy any html or images that are referenced in html *\u003cimg\u003e* tags to your *dist* folder via the [copy-webpack plugin](https://github.com/kevlened/copy-webpack-plugin). An\nalternative is to source images in your js/jsx templates and [html-loader](https://github.com/webpack/html-loader) can compress them.\n\n```\n        new CopyWebpackPlugin([\n            {\n                from: { glob:'./src/html/*.html'},\n                to: './',\n                flatten: true\n            },\n            {\n                from: { glob: 'node_modules/patternfly/dist/img/*.*'},\n                to: './img',\n                flatten: true\n            }\n        ]),\n```\n\n#### WebpackDevMiddleware / Hot Module Replacement\nWhile developing and making to changes to `src` files, you should see changes propagate immediately to the browser. Files are also updated in the `dist` folder via the [write-file-plugin](write-file-webpack-plugin).\n\n**Note:** New files will not be included automatically - you must restart your server with `npm start`.\n\n**Note:** you can gitignore webpack incremental updates. These are written to `dist/hot`. You can read more about this [here](http://code.fitness/post/2016/02/webpack-public-path-and-hot-reload.html).\n\n#### Having trouble with Webpack?\nGiven it is a new technology, there is certainly room for error. You can sometimes trace more error info with the `--display-error-details` arg:\n```\nwebpack -p --config build/webpack.config.js --display-error-details\n```\n\nAlso, there is a wonderful collection of detailed examples in the webpack project [here](https://github.com/webpack/webpack/tree/master/examples). \n\nThere are some more helpful debugging tips [here](http://webpack.github.io/docs/troubleshooting.html). \n\nIf you are still having troubles, find us on [PatternFly Gitter](https://gitter.im/patternfly/patternfly) or ask someone in the [Webpack community](https://gitter.im/webpack/webpack).\n","funding_links":[],"categories":["Demos"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatternfly%2Fpatternfly-demo-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpatternfly%2Fpatternfly-demo-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatternfly%2Fpatternfly-demo-app/lists"}