{"id":15689238,"url":"https://github.com/masterkale/a-frame-boilerplate","last_synced_at":"2025-05-09T00:52:21.524Z","repository":{"id":73085867,"uuid":"149191201","full_name":"MasterKale/a-frame-boilerplate","owner":"MasterKale","description":"A Webpack-powered boilerplate for A-Frame projects","archived":false,"fork":false,"pushed_at":"2018-09-18T17:37:08.000Z","size":61,"stargazers_count":6,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-09T00:52:15.854Z","etag":null,"topics":["aframe","boilerplate","webpack","webvr"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/MasterKale.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-09-17T21:37:01.000Z","updated_at":"2023-04-26T08:05:21.000Z","dependencies_parsed_at":null,"dependency_job_id":"3797a076-aee3-4c90-8b01-2a4869f26b7c","html_url":"https://github.com/MasterKale/a-frame-boilerplate","commit_stats":{"total_commits":4,"total_committers":1,"mean_commits":4.0,"dds":0.0,"last_synced_commit":"f4e34a3aa66772b2bce370ad2a471e167ebddb36"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MasterKale%2Fa-frame-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MasterKale%2Fa-frame-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MasterKale%2Fa-frame-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MasterKale%2Fa-frame-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MasterKale","download_url":"https://codeload.github.com/MasterKale/a-frame-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253171233,"owners_count":21865289,"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":["aframe","boilerplate","webpack","webvr"],"created_at":"2024-10-03T18:01:26.373Z","updated_at":"2025-05-09T00:52:21.498Z","avatar_url":"https://github.com/MasterKale.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# A-Frame Boilerplate\n\nA Webpack-based boilerplate for Mozilla's [A-Frame](https://aframe.io/) WebVR library.\n\n## Requirements\n\n- Node (see **.nvmrc**)\n- Yarn (latest)\n\n## Overview\n\nWebpack handles building the site, and is set up to include cache-busting for JavaScript _and_ static assets. A development liveserver with automatic reloading is also included.\n\nIn addition to A-Frame, several useful A-Frame components are included as project dependencies. See the `aframe-*-component` entries in **package.json**.\n\nTo reduce potential impact on VR performance due to over-abstraction, no other JavaScript-related transpilation or frameworks have been incorporated. That said, nothing about this project prevents their inclusion.\n\nAnd the way I see it, if a browser supports WebVR, it's very likely it also supports ES6 syntax natively, right?\n\n## Project Structure\n\n### index.html\n\nThis is intended to be the project's main HTML file. For some WebVR experiences, it may be the _only_ HTML file.\n\nBy default, this file will get processed by Webpack. JavaScript will be bundled and injected. Cache-busting will also be added to any `\u003cimg\u003e` and `\u003caudio\u003e` assets defined in places like A-Frame's `\u003ca-assets\u003e` element.\n\nAdditional HTML files can be easily added to this project. Simply add a new `HtmlWebpackPlugin` declaration to the `plugins` section of **webpack.config.js** (see the existing one for **index.html** for short descriptions of each of the values). Additional options can also be specified - see the [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) repo for more information about this plugin.\n\n### global.js\n\nThe majority of A-Frame and its dependencies should be defined in this file. Additional dependencies can be added to the project by running `yarn add`, and then adding a corresponding `require()` statement anywhere after A-Frame:\n\n```js\nrequire('aframe');\n# After running `yarn add aframe-look-at-component`\nrequire('aframe-look-at-component');\n```\n\nThese will get bundled into the project on the next build.\n\n### index.js\n\nThis file is **an example** of page-specific JavaScript. To include a specific **.js** file into its corresponding **.html** file, start by adding the JS file as an `entry` in **webpack.config.js**:\n\n```js\nentry: {\n  global: './src/global.js',\n  index: './src/index.js',\n}\n```\n\nThen, add the key as a string to the `chunks` array of the page's corresponding `HtmlWebpackPlugin` declaration:\n\n```js\nnew HtmlWebpackPlugin({\n  // ...snip...\n  chunks: ['global', 'index'],\n}),\n```\n\nThe JavaScript files will be injected at build-time into the HTML file in the same order as they are defined in the array:\n\n```html\n\u003chead\u003e\n  \u003c!-- ...snip... --\u003e\n  \u003cscript type=\"text/javascript\" src=\"global.c920cbaf33fa30bb9a70.js\"\u003e\u003c/script\u003e\n  \u003cscript type=\"text/javascript\" src=\"index.c920cbaf33fa30bb9a70.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n\n### assets/\n\nThe **assets/** directory is intended to contain the various textures/music/sounds/etc... used within the project. `\u003cimg\u003e` and `\u003caudio\u003e` assets defined within an HTML document will be included in a production build with cache-busting query-parameters appended to the name of the file.\n\nFor example, the following HTML:\n\n```html\n\u003ca-assets\u003e\n  \u003caudio src=\"assets/audio/lakenight.mp3\" autoplay preload loop\u003e\u003c/audio\u003e\n  \u003cimg id=\"textureBlur\" src=\"assets/textures/blur.jpg\"\u003e\n\u003c/a-assets\u003e\n```\n\nWill be converted to the following format for production:\n\n```html\n\u003ca-assets\u003e\n  \u003caudio src=\"assets/audio/lakenight.mp3?f67bfec\" autoplay preload loop\u003e\u003c/audio\u003e\n  \u003cimg id=\"textureBlur\" src=\"assets/textures/blur.jpg?b4465aa\"\u003e\n\u003ca-assets\u003e\n```\n\nThe asset folder structure should be preserved in the production build. This is intended to make it easier to troubleshoot potential issues when loading assets.\n\nIf any assets are loaded in using tags other than `\u003cimg\u003e` or `\u003caudio\u003e`, the `attrs` option for `html-loader` in **webpack.config.js** will need to be updated accordingly. See the [Usage section of the html-loader docs](https://github.com/webpack-contrib/html-loader#usage) for more information.\n\nThe cache-busting strategy can be adjusted by manipulating `file-loader`'s `options.name` property in **webpack.config.js**. Additional information about this option and others can found in the main Webpack docs [here](https://webpack.js.org/loaders/file-loader/#name).\n\n### components/\n\nThe **components/** folder is intended for any custom A-Frame components. If you add your own component, you can easily include it in the project by adding a `require()` statement for it within **src/global.js** or a page's specific **.js** file:\n\n```js\nrequire('./components/does-something');\n```\n\n## Using the boilerplate\n\n### Development\n\nThe development liveserver can be launched with a typical `start` command:\n\n```sh\n$\u003e yarn start\n```\n\nThe liveserver will be available at http://localhost:8080/. It will automatically reload whenever it detects changes to the source files.\n\n### Production\n\nA production build of the site can be generated via `build`:\n\n```sh\n$\u003e yarn run build\n```\n\nThe built site files will be contained within the **dist/** folder.\n\n## Contributing\n\nPR's are welcome! I'm still learning A-Frame myself and know that more knowledgeable people out there might know ways to improve this project.\n\nIn the meantime, I'll continue to update this as I make progress with my own A-Frame projects.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmasterkale%2Fa-frame-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmasterkale%2Fa-frame-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmasterkale%2Fa-frame-boilerplate/lists"}