{"id":13695816,"url":"https://github.com/pulseshift/openui5-gulp-starter-kit","last_synced_at":"2025-05-03T13:33:41.288Z","repository":{"id":22223507,"uuid":"95137698","full_name":"pulseshift/openui5-gulp-starter-kit","owner":"pulseshift","description":"A progressive enterprise-ready project template with Gulp and OpenUI5","archived":false,"fork":false,"pushed_at":"2023-01-27T01:29:25.000Z","size":5547,"stargazers_count":51,"open_issues_count":28,"forks_count":12,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-04-14T08:30:28.991Z","etag":null,"topics":["boilerplate","gulp","openui5","opinions","starter-kit","todoapp","ui5"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pulseshift.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null}},"created_at":"2017-06-22T16:58:17.000Z","updated_at":"2022-07-20T13:51:34.000Z","dependencies_parsed_at":"2023-02-18T01:15:30.439Z","dependency_job_id":null,"html_url":"https://github.com/pulseshift/openui5-gulp-starter-kit","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pulseshift%2Fopenui5-gulp-starter-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pulseshift%2Fopenui5-gulp-starter-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pulseshift%2Fopenui5-gulp-starter-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pulseshift%2Fopenui5-gulp-starter-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pulseshift","download_url":"https://codeload.github.com/pulseshift/openui5-gulp-starter-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224364411,"owners_count":17299066,"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":["boilerplate","gulp","openui5","opinions","starter-kit","todoapp","ui5"],"created_at":"2024-08-02T18:00:33.771Z","updated_at":"2024-11-12T23:31:06.908Z","avatar_url":"https://github.com/pulseshift.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"![OpenUI5 Starter Kit](https://github.com/pulseshift/openui5-gulp-starter-kit/raw/master/UI5StarterKit.png)\n\n## Quickstart\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/pulseshift/openui5-gulp-starter-kit.svg)](https://greenkeeper.io/)\n[![Build Status](https://travis-ci.org/pulseshift/openui5-gulp-starter-kit.svg?branch=master)](https://travis-ci.org/pulseshift/ui5-lib-visualization)\n\n[Download](https://github.com/pulseshift/openui5-gulp-starter-kit/archive/master.zip) or clone this repository:\n\n```\ngit clone git@github.com:pulseshift/openui5-gulp-starter-kit.git\n```\n\nPlease ensure that you have installed [node](https://nodejs.org/en/) and [yarn](https://yarnpkg.com/en/docs/install) before you continue.\n\nInstall dependencies:\n\n```\nyarn\n```\n\nStart developing:\n_Will build all resources start watcher task and start a HTTP server_\n\n```\nyarn start\n```\n\nThe app should open in your browser automatically, otherwise open: `http://localhost:3000`\n\nInfo: To get a more detailed logging, just use `yarn start:verbose` instead.\n\n## Overview\n\n_OpenUI5 Starter Kit_ is an opinionated to-do app example as template for OpenUI5 web development. Containing a modern build infrastructure, tools and a set of best practices for building a great development experience and helping you to stay productive.\n\n\u003e A solid starting point for both professionals and newcomers to OpenUI5.\n\n## Other branches\n\nPlease see also the seperated branches of this project, at the time these are:\n\n* [nwabap](https://github.com/pulseshift/openui5-gulp-starter-kit/tree/nwabap) is the OpenUI5 Starter Kit branch which allows a developer to upload SAPUI5/OpenUI5 sources into a SAP NetWeaver ABAP system as part of the Gulp task chain\n\n### Features\n\n| Feature                                            | Summary                                                                                                                                                                                                                                                                                                                                                                                                                                         |\n| -------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| ❤ ES6/ES7 via Babel 6.0                            | Compile [ES6/ES7](https://babeljs.io) into ES5 (supported by most browsers) with ease, bringing support for next generation JavaScript, today.                                                                                                                                                                                                                                                                                                  |\n| Less support                                       | Compile [Less](http://lesscss.org) into CSS with ease, bringing support for variables, mixins and more.                                                                                                                                                                                                                                                                                                                                         |\n| Consistent code formatting                         | [Prettier](https://github.com/prettier/prettier) is an awesome opinionated code formatter used in many well known projects like Webpack, Babel or React. In this starter kit prettier re-formats your files that are marked as \"staged\" via git add before you commit. We recommend to [add also prettier as integration to your Editor](https://github.com/prettier/prettier) during development.                                              |\n| Built-in HTTP Server                               | An extendable [built-in server](https://www.browsersync.io) for previewing your site locally while you develop and iterate and the option to add API endpoints via a proxy to get around Access-Control-Allow-Origin (CORS) errors.                                                                                                                                                                                                             |\n| Live Browser Reloading                             | Reload the browser in real-time anytime an edit is made without the need for an extension. (Run `yarn start` and edit your files)                                                                                                                                                                                                                                                                                                               |\n| Cross-device Synchronization                       | Synchronize clicks, scrolls, forms and live-reload across multiple devices as you edit your project. Powered by [BrowserSync](http://browsersync.io). (Run `yarn start` and open up the IP provided on other devices on your network)                                                                                                                                                                                                           |\n| Production ready builds                            | Pre-configured build pipeline to create optimized assets, UI5 pre-loads etc. just as you would expect from a state of the art build process. All kind of UI5 asets are supported: App Components, Custom Themes, Control Libraries and non-UI5 assets roots. The structure of your project can be configured in your `package.json` in section `ui5`. _A detailed documentation of all options will follow soon._                               |\n| ⚡️ Reliable UI5 Cache-Buster                      | Ensure your users are always enjoying the latest version of your app. OpenUI5 provides only [solutions proprietary for SAP Gateway and SAP Cloud Platform](https://openui5.hana.ondemand.com/#docs/guide/91f080966f4d1014b6dd926db0e91070.html). In this project, we added a more reliable mechanism that is open source and available for any environment. But much more important, with our Gulp build script, it works right out of the box. |\n| A Hackable UI5 Build Process                       | Define in your `package.json` the source of your OpenUI5 library. Supported options are online CDN link, download URL of a prebuild library or a GitHub release link of OpenUI5. In all cases, the build process will handle the download, unzip and OpenUI5 build task by its own. Lean back and wait relaxed.                                                                                                                                 |\n| Pre-configured linter (ESLint)                     | [ESLint](https://eslint.org) is a pluggable linting utility for JavaScript. It is pre-configured to work reliable and hand in hand with babel and prettier.                                                                                                                                                                                                                                                                                     |\n| RealFaviconGenerator support                       | [RealFaviconGenerator](https://realfavicongenerator.net/) is a module that auto generates favicons for all platforms based on a single master image.                                                                                                                                                                                                                                                                                            |\n| ⚙️ **Gzip** and **Brotli** compression ready build | Pre-compression of the two most common and modern compression algorithms to minify the used bandwith (your HTTP server must support static serve of gzip and/or brotli files – `yarn start:dist` is able to serve the compressed files).                                                                                                                                                                                                        |\n| 🤘 Support for external ui5 npm modules            | Support for external npm ui5 libraries added via `yarn add **npm-module-name** --dev`. Ensure the module name matches the exposed name of the external lib and that you point to the prebuild dist folder. (Auto-build of non prebuild modules is in BETA).                                                                                                                                                                                     |\n\n\u003c!-- | Code Linting               | JavaScript code linting is done using [ESLint](http://eslint.org) - a pluggable linter tool for identifying and reporting on patterns in JavaScript. Run `yarn test` to lint your repository.                                                                         | --\u003e\n\n## Distribution\n\nStart build:\n_Will create a `dist` directory in your project root._\n\n```\nyarn build\n```\n\nAfterwards, the production app build can be tested by run `yarn start:dist`. The app should open in your browser automatically, otherwise open: `http://localhost:3000`\n\nInfo: To get a more detailed logging, just use `yarn build:verbose` instead.\n\n## Configuration\n\n### `package.json`\n\n_Attention: comments are only for explanation, tehy can't be used in package.json._\n\n```javascript\n{\n  // path to an handlebars file used to create the index.html file of this project\n  \"main\": \"src/index.hbs\",\n\n  // define a master favicon and generate all x-browser fav-icons at once\n  \"favicon\": {\n      \"src\": \"src/assets/favicon/master.png\"\n  },\n\n  // custom section with settings required for the build process\n  \"ui5\": {\n    // tite name of the index.html\n    \"indexTitle\": \"UI5 Todo App\",\n\n    // build settings\n    \"build\": {\n        // turn cache buster on to invalidate the users browser cache automatically for changed files\n        \"cacheBuster\": true,\n\n        // turn on compression to minify file size and bandwith of HTTP server (options: boolean or list of compression algorithms)\n        \"compression\": [\"gzip\", \"brotli\"]\n    },\n\n    // key of the selected UI5 library source (must be available in section ui5.srcLinks)\n    \"src\": \"cdn\",\n\n    // map of different sources for the UI5 library, only one can be selected to be used in the UI5-bootstrap of the index.html\n    \"srcLinks\": {\n      \"cdn\": {\n        // URL or relative path to the UI5 library (it is possible to pass properties in the URL via handlebars notation)\n        \"url\": \"https://openui5.hana.ondemand.com/{{version}}/resources/sap-ui-core.js\",\n\n        // flag whether or not the UI5 library at the defined URL is a prebuild or not\n        \"isPrebuild\": true,\n\n        // flag whether or not the UI5 library at the defined URL must be unarchived before further processing\n        \"isArchive\": false,\n\n        // list of further attributes that can be used as properties for the URL creation\n        \"version\": \"1.50.8\"\n      }\n    },\n\n    // target path for 3rd party npm dependencies\n    // e.g. moment.js can then be required via sap.ui.define(['apps/libs/moment']function(moment){ ... });\n    \"vendor\": {\n      \"name\": \"app.libs\",\n      \"path\": \"src/libs\"\n    },\n\n    // name of the selected UI5 theme for your bootstrap\n    \"theme\": \"sap_belize\",\n\n    // list with custom ui5-component/app roots consisting of a 'name' and a 'path'\n    \"apps\": [{\n      \"name\": \"app.todo\",\n      \"path\": \"src/openui5-todo-app\",\n\n      // abab BSP destination of your app\n      \"nwabapDestination\": {\n          \"package\": \"$TMP\",\n          \"bspcontainer\": \"ZZ_UI5_LOCAL\",\n          \"bspcontainer_text\": \"UI5 upload local objects\",\n          \"langauage\": \"EN\"\n      }\n    }],\n\n    // list with custom ui5-library roots consisting of a 'name' and a 'path'\n    \"libraries\": [\n      {\n        \"name\": \"my.control.lib\",\n        \"path\": \"src/commons/ui5-controls\"\n      },{\n        // support for external npm ui5 libraries added via 'yarn add xyz --dev' (since starter-kit v0.3.2)\n        // ensure the module name matches the exposed name of the external lib\n        \"name\": \"npm.control.lib\",\n        \"path\": \"node_modules/dist/ui5-controls\",\n        \"prebuild\": true\n      }],\n\n    // list with custom ui5-theme roots consisting of a 'name' and a 'path'\n    \"themes\": [{\n      \"name\": \"my_custom_theme_name\",\n      \"path\": \"src/commons/ui5-themes\"\n    }],\n\n    // list with non-ui5 resource roots consisting of a 'name' and a 'path'\n    \"assets\": [{\n      \"name\": \"commons.images\",\n      \"path\": \"src/commons/img\"\n    }]\n  },\n\n  // all dependencies installed via 'yarn add ...' will be made available for your UI5 app without need of editing the manifest.json\n  \"dependencies\": {\n    // libraries are automatically loaded into the path defined at section ui5.vendor.path,\n    // they can be required in your controler via the name defined in ui5.vendor.name\n  }\n}\n```\n\n### Contributing \u0026 Troubleshooting\n\nContributions, questions and comments are all welcome and encouraged.\n\nCheck our [current issues](https://github.com/pulseshift/openui5-gulp-starter-kit/issues) or, if you have something in mind how to make it better, [create your own issue](https://github.com/pulseshift/openui5-gulp-starter-kit/issues/new). We would be happy to discuss how they can be solved.\n\n### Outlook\n\nHere is a brief overview on what we are working right know and what will follow, soon. We are interested to hear your opinion on what should follow next.\n\nCurrent idea backlog (unordered):\n\n* Add a further project based on Webpack\n* Add Facebooks flow type system with help of vagrant to support Windows machines, too\n* Unit test and browser test framework\n* Documentation generation via JSDoc\n* Optimized OpenUI5 library modules (containing only these controls you used)\n* I18N helper integration\n* Detailed README for all package.json (section ui5) configuration options\n\n### Credits\n\nRocket logo created by Hopkins from the Noun Project [CC BY 3.0 US](https://creativecommons.org/licenses/by/3.0/us/).\n\n### License\n\nThis project is licensed under the MIT license.\nCopyright 2017 [PulseShift GmbH](https://pulseshift.com/en/index.html)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpulseshift%2Fopenui5-gulp-starter-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpulseshift%2Fopenui5-gulp-starter-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpulseshift%2Fopenui5-gulp-starter-kit/lists"}