{"id":19561840,"url":"https://github.com/valantic/ember-template","last_synced_at":"2025-04-27T00:31:23.464Z","repository":{"id":93915597,"uuid":"126960320","full_name":"valantic/ember-template","owner":"valantic","description":"A custom Ember.js template.","archived":true,"fork":false,"pushed_at":"2018-03-27T09:28:31.000Z","size":681,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-02-26T08:44:55.867Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/valantic.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-03-27T09:13:57.000Z","updated_at":"2023-09-06T08:45:03.000Z","dependencies_parsed_at":"2023-04-09T14:01:00.139Z","dependency_job_id":null,"html_url":"https://github.com/valantic/ember-template","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/valantic%2Fember-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valantic%2Fember-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valantic%2Fember-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valantic%2Fember-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/valantic","download_url":"https://codeload.github.com/valantic/ember-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251072279,"owners_count":21532004,"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-11T05:12:41.146Z","updated_at":"2025-04-27T00:31:23.457Z","avatar_url":"https://github.com/valantic.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ember Project Template\n\nThis project will get you started developing an Ember application in no time.\n\nThe style guide is applying [the Ember Freestyle living styleguide](https://github.com/chrislopresto/ember-freestyle) system for Ember apps.\n\n## Requirements\n\n### System requirements\n\n* ember-cli version 2.12.3\n* node version: 6.7.0\n* npm version: 3.10.3\n\n### Developers Prerequisites\n\nYou will need the following things properly installed on your computer (Mac OSX).\n\n* [Homebrew][]\n* [Git](http://git-scm.com/)\n* [Node.js](http://nodejs.org/) (with NPM)\n* [Bower](http://bower.io/)\n* [Ember CLI](http://ember-cli.com/)\n* [PhantomJS](http://phantomjs.org/)\n* [ESLint](http://eslint.org)\n* [scss-lint](https://github.com/brigade/scss-lint)\n* [Watchman](https://ember-cli.com/user-guide/#watchman)\n\n### Browser support\n\n| Operating systems | Browser |\n| --- | --- |\n| Windows | ?? |\n| Mac OS X | ?? |\n\n| Devices | Browser | Viewport |\n| --- | --- | --- |\n| Phone 1 | ?? | ?? |\n| Tablet 1 | ?? | ?? |\n\n\n## Quick Getting Started\n\nAfter installing Ember and all its dependencies you can have the application running locally after executing the following commands.:\n\n* `git clone \u003crepository-url\u003e` this repository\n* change into the new directory\n* `npm install`\n* `bower install`\n\nOnce the Ember application is completely installed you can start the Ember HTTP server.\n\n* `ember server` or `ember s`\n* Visit your app at [http://localhost:4200](http://localhost:4200)\n\nIt is also possible to \"serve\" the production environment:\n\n* `ember server --prod` or `ember s --prod`\n\nIt is possible to have a unit test server active in a separate terminal window. Run the following commands:\n\n* `ember test`\n* `ember test --server`\n\nOpen a browser window and open the Ember application on http://localhost:4200 \nIf the window is blank, check the browser console.\n\n## Code Guidelines\n\n\u003e **Important:** Make sure to use an editor which supports and applies [.editorconfig](http://editorconfig.org/#download) files!\n\n### Editor Configuration\n\nNote for Visual Studio Code: install the official \"[vscode-editorconfig](https://github.com/Microsoft/vscode-editorconfig)\" extension.\n\n### JavaScript Linting\n\nMake sure to [install ESLint](https://www.npmjs.com/package/eslint) and activate linting in your editor of choice.\nWe don't recommend to use other linting tools, because we customize just the eslint config.\n\nWhen installing the project for the first time running `npm install`, the system will install our own _eslint-config-movento_ configuration project which includes the required settings for ESLint.\n\n- More information about ESLint can be found at \u003chttps://eslint.org\u003e\n- The movento configuration for Stylelint can be found at \u003chttps://git.movento.com/movento-public/eslint-config-movento\u003e\n\n### SCSS Linting\n\nWe're using Stylelint to lint our stylesheets. Unfortunately Stylelint can currently not be integrated into `ember test`. So please set up your IDE to lint your styles while working on them or use the console command `npm run stylelint`.\n\nWhen installing the project for the first time running `npm install`, the system will install our own _stylelint-config-movento_ configuration project which includes the required settings for Stylelint.\n\n- More information about Stylelint can be found at \u003chttps://stylelint.io\u003e\n- The movento configuration for Stylelint can be found at \u003chttps://git.movento.com/movento-public/stylelint-config-movento\u003e\n\n### SCSS Autoprefixer\n\nWe are using a Autoprefixer for vendor prefixes. So you don't have to care about vendor prefixes in writing css / scss.\nThe config about browser support you can set in the ember-cli-build.js file in the root directory.\n\n- Documentation (https://github.com/kimroen/ember-cli-autoprefixer)\n- Browser specification (https://github.com/ai/browserslist#queries)\n\n## Getting Started with EmberJS\n\nWe have gathered Ember JS tutorials and videos which should help you understand how Ember works.\n\nPlease make sure to go through [the EmberJS official documentation](https://guides.emberjs.com/v2.5.0/getting-started/quick-start/) at least once.\n\n## Getting Started\n\nThis is the full explanation on how to access the code for this project so you can locally run it and extend upon it.\n\nFirst of all: make sure to have NodeJS (npm) and bower installed!\n\nGet access to the ember-project-template repository:\n\n- Generate a SSH key ([Github Help](https://help.github.com/articles/generating-an-ssh-key/))\n- Add SSH key to your repository account throught the CodebaseHQ website.\n\n### Starting with a clean git history\n\nIf you're starting a new project based upon the \"ember-project-template\", use the following process to get started:\n\n```\n$ cd my-new-project\n$ git init\n$ git fetch --depth=1 -n git@codebasehq.com:movento2/ember-sandbox/ember-project-template.git\n$ git reset --hard $(git commit-tree FETCH_HEAD^{tree} -m \"initial commit\")\n```\n\n### Working with the ember-project-template\n\nIf you want to make changes to the \"ember-project-template\", you should follow this process.\n\nClone the repository to a local folder.\n\nOpen a terminal window and execute this command in your _projects_ local folder:\n\n    git clone git@codebasehq.com:movento2/ember-sandbox/ember-project-template.git\n\nYou should have a new folder \"ember-project-template\" in the active folder _cd_ into it.\n\nRun the following commands in the terminal window within the new folder:\n\n    npm install\n    bower install\n\nWhen npm and bower are done installing all the dependencies on your machine, it's time to run Ember.\n\nFirst run the Ember-cli server:\n\n    ember s\n\nThe output in the terminal should look something like this:\n\n```\nLivereload server on http://localhost:49152\nServing on http://localhost:4200/\nBuild successful - 18517ms.\n```\n\nNow open a browser and behold the app in all its glory on this URL:\n\n    http://localhost:4200    \n\nWhen you make changes to the code with server running Ember will refresh the site in your browser (Livereload is taking care of this).\n\nIf you haven't read through the Ember Getting Started Guide yet, now is definitely the time.\n\nThe app code resides in the _/app_ folder where you now can add your own code.\n\n*Tip* Major changes to the applicatin will require a server restart! For instance changes to services and adding new components.\n\n## Building the Application\n\nEmber-cli generates all files in the \"/dist\" folder by default. It will concantenate and optimize JavaScript and CSS for us.\n\n* `ember build` - this will run the development build\n* `ember build --environment production` or shorter `ember build --prod` - runs the production build\n\n### Production Build\n\nWhen performing an application build determined for \"production\" we should run ember-cli build with the option `--prod`.\nThis will make sure that only the actual HTML, CSS and JavaScript for the components which make up the site will be generated.\nWe currently have set up the production build to *exclude* all pods in the _/app/pods/styleguide-freestyle_ folder.\n\n*Note* At this time the _/dist_ folder will still include the CSS from _/app/styles/style-guide.scss_.\nWe're working on removing this file for production builds.\n\nThe system which is removing the unnecessary folders and files is set up in the _/lib/addon-styleguide_ [in-repo-addon](https://ember-cli.com/extending/#developing-addons-and-blueprints).\n\n## Usage Guide\n\nThis EmberJS app will generate the Living StyleGuide based upon \"HTML Components\" written in [HTMLBars](http://emberjs.com/api/modules/ember-htmlbars.html),\nthe EmberJS templating system is based upon [HandleBars JS](http://handlebarsjs.com/).\n\nWhen generating elements using _ember-cli_, it will create the new files as \"pods\" in the _/pods_ folder.\n\n## Ember-cli\n\nMake use of the many generators [ember-cli](https://ember-cli.com/user-guide/) offers us.\n\nTo get help, enter `ember help generate` on the command line.\n\n## Customizing a component\n\nEmber will render all components in a default \"div\" wrapper element. We choose to avoid this wrapper element and define every new component with a `tagName` and optional `classNames` properties defined in the _component.js_ file. \n\nFor instance the component _c-header_ will have this _component.js_ script:\n\n```\nimport Ember from 'ember';\n\nexport default Ember.Component.extend({\n  tagName: 'header',\n  classNames: ['c-header']\n});\n```\n\nAnd this will render the following Ember element:\n\n```\n\u003cheader id=\"ember663\" class=\"ember-view c-header\"\u003e\n...\n\u003c/header\u003e\n```\n\nIt is possible to create components with dynamically switching class names.\n\nFor instance the component _g-section-title_'s _component.js_ script looks like this: \n\n```\nexport default Ember.Component.extend({\n  classNames: ['section-title'],\n  tagName: 'div',\n  classNameBindings: ['isBold:section-title--bold'],  // Adds the class name \"section-title--bold\" when isBold === true\n  isBold: false                                       // default setting\n});\n```\n\nThe `isBold` property can then be set when the component is used.\n\n```\n{{#c-section-title isBold=true}}Seasonal Products{{/c-section-title}}\n```\n\nThis will render the _c-section-title_ component with the class name `section-title--bold` active in the HTML output.\n\n## Getting started with Ember Freestyle (living style guide)\n\nHere's a simple style guide example using Ember Freestyle where `{{loading-spinner}}` is a hypothetical component in our application:\n\n```\n{{#freestyle-guide title=\"My Living Style Guide\" subtitle=\"Showcasing My App's Components\"}}\n  {{#freestyle-section name=\"UI Elements\"}}\n    {{#freestyle-usage \"loading-spinner\" title=\"Loading Spinner\"}}\n      {{loading-spinner}}\n    {{/freestyle-usage}}\n  {{/freestyle-section}}\n{{/freestyle-guide}}\n```\n\nFor our styleguide we have defined the _freestyle-guide_ component in the file: _/app/pods/styleguide-freestyle/template.hbs_. Here we defined the style guide header and initial structure.\n\nWe've organized the components in two main categories:\n\n- **freestyle-section _\"Visual Style\"_** - contains general design and styling like typography and color\n- **freestyle-section _\"Components\"_** - contains actual page elements\n\n### Creating Components and Displaying them in Ember Freestyle\n\nAll styleguide components will be organized in the _components_ folder.\n\n*Note* Prefix names of actual components with \"`c-`\".\n\nTo display the component we need to add it to Ember Freestyle's main _template.hbs_ file.\n\nTo make the library of components easier to manage, we have made it possible to include \"subsection\" components so we don't overload the main \"_template.hbs_\" template file.\n\nThis way we only need to include the files we want to display.\n\n**Example:** The \"Visual Style\" section consists of the partials, \"subsection-typography\" and \"subsection-color\":\n\n```\n{{#freestyle-section name='Visual Style' as |section|}}\n\n  {{partial 'styleguide-freestyle/subsection-typography'}}\n\n  {{partial 'styleguide-freestyle/subsection-color'}}\n\n{{/freestyle-section}}\n```\n\n*Note* Currently this is a manual process by creating a new _template.hbs_ file within the _/app/pods/styleguide-freestyle/_ folder and adding the required \"Ember Freestyle\" syntax.\n\n**Example:** the contents of the _styleguide-freestyle/subsection-buttons/template.hbs_:\n\n```\n{{#section.subsection name='buttons'}}\n\n  {{#freestyle-usage \"c-button1\" title=\"Default Button\"}}\n    {{c-button title=\"My Button\"}}\n  {{/freestyle-usage}}\n\n  {{#freestyle-usage \"c-button-@block\" title=\"Button as block component\"}}\n    {{#c-button}}\n      \u003cstrong\u003eBlock\u003c/strong\u003e content \u003c!-- can contain HTML --\u003e\n    {{/c-button}}\n  {{/freestyle-usage}}\n\n{{/section.subsection}}\n\n```\n\n### Displaying Data in Freestyle Components\n\nThe quickest way to add \"data\" to be used by the components is by setting up an \"Ember service\".\n\n    ember g service colorpalette --pod\n\nThis will create the service in the `/app/services` folder.\nUse this service in the application _components_ by injecting it.\n\n```\ncolorPalette: inject.service('colorpalette')\n```\n\nThen use the `{{colorPalette}}` variable in your templates, like so:\n\n```\n{{freestyle-palette\n  colorPalette=colorPalette.colours\n  title='Dummy App Color Palette'\n  description='This component displays the color palette specified in freestyle/palette.json'\n}}\n```\n\nMore information can be found in the Ember documentation on the \"Customizing a Component's Element\" page.\n\n## Switching layouts\n\n\u003e This technique can be used in case you need new complete page layouts.\n\nWrapping elements in a specific layout can be done using Ember Components applied as block-level elements.\nThe layout components are basically element containers. In short, change the layout component, change the page layout.\n\n### Routes define main templates\n\nWhen a route should render a page with a specific layout generate a new layout component.\nAdd the new layout component to the \"_template.hbs_\" file of the route by using the block notation.\nThe HTML content is therefor wrapped within the component.\n\n### Naming layouts\n\nLayout components should be prefixed with the string \"`l-`\".\n\nFor example: _l-default_ or _l-product-page_ are good layout component names.\n\n### Create a new layout\n\nUse ``ember-cli``:\n\n```\nember g component l-my-new-layout\n```\n\n### Example layout\n\n```\n{{#l-default}}\n  \u003ch1\u003eHello!\u003c/h1\u003e\n  \u003cp\u003eWelcome to our ember project!\u003c/p\u003e\n  {{outlet}}\n{{/l-default}}\n```\n\nThe \"default layout\" page is currently nothing more than a \"yield output\", with the required HTML to define a specific layout:\n\n```\n\u003cem\u003eDefault layout\u003c/em\u003e\n{{yield}}\n```\n\n## Generating static HTML files from the Ember Project\n\nWe can apply [Ember Fastboot][] to render the HTML pages including all components and dynamic parts.\n\nThe script _scrape.sh_ will apply _wget_ to go through a predefined list of URLS and copy the HTML into the _./static-dist_ folder.\n\nSteps to render the Ember application to re-usable HTML files:\n\n1. Make sure to have *wget* and *zip* installed on your OSX machine. Check the [Homebrew][] documentation on how to do this.\n2. Install Ember fastboot: ``$ember install ember-cli-fastboot``\n3. Start Ember Fastboot server: ``$ember fastboot --environment=production --serve-assets``\n4. Add the Ember application routes to go through which need to be rendered to HTML.\n5. Open another command console (within the project folder) and run ``$sh ./scrape.sh``\n6. Check for a static copy of the site in the folder _./static-dist_\n\nMake sure to give the _scrape.sh_ file executable rights first:\n\n```\nchmod u+x scrape.sh\n```\n\nIf scrape ran successfully you see this file and folder structure:\n\n```\nstatic-dist\n├── assets\n│   ├── ember-sandbox-6b4c4b23e6904e48842c4511fa384c4d.js\n│   ├── ember-sandbox-b10dad43d4f464b79cc187772228206f.css\n│   ├── images\n│   │   └── logo-movento-5ad1b7ed3504328b94aa3c48afba87af.png\n│   ├── vendor-8f89c8afa4a30c46d670e84227771a80.js\n│   └── vendor-d41d8cd98f00b204e9800998ecf8427e.css\n├── index.html\n├── readme\n│   └── index.html\n└── views\n    ├── index.html\n    ├── order-list\n    │   └── index.html\n    └── product-page\n        └── index.html\n```\n\nThe _scrape.sh_ will also generate a _deliver_ folder where it will gather zip files of the generated \"static\" files.\n\n*Important notes:*\n\n- We are currently using Ember Fastboot version _v1.0.0-beta.4_. Development of Ember Fastboot might break things in future releases.\n- The proof-of-concept works with on the current Ember Sandbox project while it is very simple. On more complete, full fledged projects, things might break.\n- This HTML file rendering will currently only work on mac OSX due to its dependencies on Unix tools, *wget* and *zip*.\n- The shell script will remove the output folder before every execution.\n- JavaScript is not executed by _wget_ so only pure static HTML is saved, hence Ember Fastboot.\n- Currently we need to manually take care of the list of pages to render to HTML in the scrape.sh file.\n- Static assets like CSS and images are also copied to the _./scrape-dist_ folder if they are first rendered by ember-cli!\n- There are a couple of important \"[Known Limitations](https://github.com/ember-fastboot/ember-cli-fastboot#known-limitations)\" regarding rendering Ember apps which we need to take into account.\n\n## To do\n\n- [x] Add check to the script to see if the required tools are available. _Update 2017-07-13 : scrape.sh does a check for wget and zip._\n- [x] Add zip generation to the script to automatize the HTML delivery process. _Update 2017-07-13 : scrape.sh will now generate zip files._\n- [ ] Automatically generate a list of routes to go through.\n\n## Credits\n\nThanks goes to [Martin Malinda](https://twitter.com/martinmalindacz) for the idea of using wget and a shell script!\n\n## Further Reading / Useful Links\n\n* [ember.js](http://emberjs.com/)\n* [ember-cli](http://ember-cli.com/)\n* [Ember Fastboot][]\n* [Homebrew][]\n\nDevelopment Browser Extensions\n\n* [ember inspector for chrome](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)\n* [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/)\n\n\n[Ember Fastboot]: https://www.ember-fastboot.com/\n[Homebrew]: http://brew.sh/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvalantic%2Fember-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvalantic%2Fember-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvalantic%2Fember-template/lists"}