This might be a silly question stemming from unfamiliarity. I'm rewriting a project that was previously using Ember 1.7 in Ember 2.3, using Ember-cli v2.2
Now, in the old project, there were a couple of libraries being included manually on the index.html file, put in the scripts directory and then compiled. For example, let's say the JS asset I want to include is offline.js.
I understand that Ember-cli uses Bower and can be used to install bower components, like Bootstrap or moment.js and such. What about custom JS? I've put the file in offline.js, included it in index.html but that doesn't do anything.
I don't think I understand how to add/import vendor assets at all; how do add, say offline.js to the project and have it available throughout the application?
You should add the offline.js file to the vendor folder at the root of the project, and then in your ember-cli-build.js file add the following line:
app.import('vendor/offline.js');
This adds the offline.js file to the vendor.js which is built by default. You can see more documentation at the Ember CLI website.
Related
The following problem needs to be solved: I try to create a component within an ember addon, that's using sass. Within my addon I don't want to compile that scss files, that should be done within my project using ember-cli-sass and ember-css-modules-sass. The component I'm creating in my addon is also using sass modules, but I didn't install the ember packages for this, because I do that in my project.
I run into the problem, that when I try to serve my ember application from my project directory, I get the error that within my addon an imported scss file is unreadable or not there.
What am I doing wrong?
Thank you very much!
Add the Sass files to /app/styles/, not /addon/styles. This way they will be merged with the host app.
I've got the NPM package xlsx as a dependency in my ember app which comes with an optional module for translations. When I build my app with Ember-CLI I'd like to specify somehow that this optional module be excluded.
The README for that package states “Webpack and browserify builds include optional modules by default. Webpack can be configured to remove support with resolve.alias:”
I'm not sure how I could configure my ember-cli-build.js to work with this.
I do know that I can download the package, build it myself, and then stick the resulting files in my vendor directory but this feels like the wrong way to go about it.
Does anybody have experience with this sort of situation?
Edit
I'm currently including xlsx in my app as a dependency inside my package.json and simply importing it within one of my components.
If you take a look into your node_modules/xlsx/dist/ folder you'll see that there are several different versions of xlsx available: core, full and a third version without a specifier.
You can use either of those versions by putting for example
app.import('node_modules/xlsx/dist/xlsx.core.min.js');
in your ember-cli-build.js file.
Note that the above requires Ember CLI 2.15 or above. If you use an older Ember CLI version you should either upgrade or install xlsx from Bower instead.
after creating a folder in ember I see nothing but a file called ".gitkeep" in all the folders such as routes and templates(in every folder). This problem seems to be repeating after trying to install many times..
.gitkeep files are here to force git to commit the directory. By default git do not version folder and an ember-cli project is by default a git repository. (unless you specified --skip-git).
A new ember-cli project should contain at least app/templates/application.hbs because this is all you need to start.
You can add routes and controllers with ember generate route and ember generate controller.
I am trying to learn to use Google Polymer and wanted to use Django as I have some data crunching planned for the app and wanted to use python for it. The google Polymer website (Getting the code) highly suggested installing Polymer through bower. I went to the bower website and they said to install bower using nmp. I installed nmp (nodejs.org, I ran out of link privileges), installed bower and proceeded to install Polymer into my django virtual environment. I found a functioning website with it's files on Github (github.com/mc706/three_most_important_things) and compared their settings.py files to mine, and their directory hierarchy to see how they had implemented Polymer. It appears that they didn't use bower to install polymer, and they have polymer as an app inside their django project. I am not a django expert but I have used Bootstrap with it and had no problem. I assumed Polymer was just a set of css and js files that made code implementation easier. I have tried shifting the Polymer "components" around (first in bower-components, then static/components) and changed my link references to point there, but I still get a blank page when I render it. Can someone give me a simple file hierarchy example of where the polymer files should be stored and how to reference them? eg.
project
bin
include
lib
project
project main
project apps
static
static
components
There are only a view sites that mention django+polymer together, and normally it's a question about {{}} and {% verbatim %} usage. I can't seem to get to that point. Any setup advice would greatly appreciated.
I have a django project under a virtualenv.
I included the django-zurb-foundation 5.3.0 package to use foundation but this version only include static css files.
It's my first time using django and normally i use foundation with sass using bower and grunt.
How can i do to use the sass version of foundation?
What should be the files tree?
UPDATE
i installed django compressor and i got it work on local, it works perfectly, but i cannot get it to work on my production server:
on local env i have a CACHE folder with the css static files in it and the html page call correctly the file from there.
On the prod site instead, it doesnt create the CACHE folder and it doesnt render the path to it and it keeps the path to the scss file.
What am i doing wrong?
It seems like compressor isnt working on the prod server, i'm afraid i'm doing something wrong with django settings.py since i'm new to it.
any help?
I have heard of a few people using django-bower with foundation, personally I have not played with it but its worth looking into if you have not already.
I really can't find a reason to use a third party Django application to do that, using front-end frameworks like foundation or Bootstrap is as simple as compiling the less or sass source files to a css file and include it in your html (<link rel="stylesheet"...).
With Django you can use Bower and Grunt without any problem because they're independent and totally configurable to fill your needs. What I do with bower is to create a .bowerrc file at the same level of the bower.json file with the directory setting pointing to the main static folder, something like:
{
"directory": "my_django_app/static/bower_components"
}
Talking about the django-compressor app all that I can say is I don't recommend to use it in a production environment, it has some performance problems and personally I prefer the static files to be responsibility of the front-end dev instead of the back-end dev. For example you will need to have source maps for your javascript for debugging purposes and I don't remember if it's possible with this plugin.
Instead of using the django-compressor you can use a grunt plugin to to it, I've done one that may help you to do so: https://www.npmjs.org/package/grunt-django-compressor