I have added chosen-package to my app, but when I deployed it on production, images of the package are not loaded. Example page: http://package-images.meteor.com/
How to show/load images of Meteor package on production server?
Note to package creators: If you include images and css which reference those images, you must modify the paths (or user an override css file) to start with /packages, otherwise the files won't be found in production.
I haven't used chosen but after spending a couple of minutes looking at the source it looks like it wasn't packaged in a way that will work with the current version of meteor's production path system. You have two choices:
Use select2 instead.
Create a new version of chosen (you could host it locally or create a new atmosphere package), and include a path override css file. See this example from select2.
Related
I use npm as a package manager for my web frontend projects. I have a need to generate some fake data locally within JavaScript in a project. Faker.js seems to be the perfect library to do so.
Most libraries, when I install them with npm, either have usable js files at the root of the installed files or provide a dist or similar folder with the .js files that I can reference, e.g. <script src="node_modules/angular/angular.min.js"></script> Faker.js however does not include this.
The documentation for faker simply includes this line: <script src = "faker.js" type = "text/javascript"></script> Clearly this will not work since the package doesn't even install a file called faker.js anywhere. My assumption is that you're expected to either use it with Node.js (non web frontend) projects or you're expected to build it somehow to get the faker.js file.
One tutorial I found online says you can npm install faker and then use <script src="node_modules/faker/build/build/faker.js">. But I also do not have a build folder. The tutorial didn't give any instructions on building the faker.js file.
Can someone shed some light on how this works? I have actually seen at least one other package (jQuery) that is similar and does not include a compiled usable browser version in the distribution. In past projects I've simply downloaded a compiled .js file and included it in my source control, but I'd like to try to avoid that if at all possible!
(Please don't answer with "just use a CDN" - I am working in an environment with specific policy requirements that HTML on the production server may not directly reference any off-site assets or scripts, but it is OK to pull in those libraries and self-host them. Frustrating, yes, but I don't get to make the rules.)
Node/NPM newbie with a front-end dev question. I understand one of the strengths of an NPM-type module is that its dependencies get installed within itself, in node_modules. Modules always have the code that they need, and outside libs don't conflict.
That said, seems like this would result in the client downloading the same lib+ver (say, jquery v.X) multiple times. What's the technique for specifying that a module needs a dependency but that it shouldn't package that code if the dependency is already available on the site/page? Does said technique involve parent modules that make the shared lib+ver available?
Or, should various front-end modules just re-download the same lib+ver that other modules on the page might have already downloaded?
The client will only grab files from that folder that are needed, so if it's linked in HTML once the client will only grab it once. NPM handles dependency duplicates automatically.
Having said that, normally you will want to only serve a static folder to the client without revealing your entire server structure. This can be achieved using:
app.use(express.static('server/public')
where 'server/public' is the directory relative to the server.js file that you want to serve. In this case, 'public' contains all my linked view files, stylesheets, JS files, etc. that are linked from the HTML pages. You don't need to move that module's dependencies there as well.
The downside to this is that you'd have to manually move dependencies into the public folder (I make a 'vendor' directory usually) and link from there. It's more work but it's much more efficient and safer in the long run.
NOTE: when using a static folder to serve files, your HTML links will be served from a relative path to that folder.
I have the same problem that has already been documented on GitHub here. ui-tinymce references a number of dependencies which cannot be reached in my application.
GET http://localhost:8080/jspm_packages/github/tinymce/tinymce-dist#4.3.12/themes/modern/theme.min.js # angular.js:6084
tinymce.js:9426 Failed to load: /jspm_packages/github/tinymce/tinymce-dist#4.3.12/themes/modern/theme.min.js
I am able to use the workaround suggested in the github issue above, which changes the baseURL. This works fine in my development environment. However, when I run jspm bundle-sfx it does not pick up these dependencies and I am left in the same situation without templates or plugins.
What is the best way to address this? Can angular-ui-tinymce be broken down so that the dependent files are available in separate packages? Or should I just use gulp to get around this problem?
I tried using Gulp to concatenate the missing files, however this will not work because by default tinymce still expects the files to be at the relative locations which it uses in its own internal file structure.
I still think it would be helpful for Tinymce to provide separate packages for the most common themes, however I admit that there are a lot of themes and plugins so this would be a fair amount of work.
In the end the simplest thing to was to copy the theme and plugin files into the "correct" relative directories within my own source code. This way I can change the relative baseURL for tinymce and it will be correct when I run it in production as well as development environments.
This way I can run jspm bundle-sfx and it will bundle these files along with everything else. However you may have to import the files explicitly if you do not serve the area statically in your application. For example:
import 'sysadmin/app/tinymce/themes/modern/theme';
Firstly I must confess I am a noob at node. I've been using ASP.NET then PHP then Django before. Regardless, I've found node a breath of fresh air. This problem is also not strictly a node problem, but I need a node specific answer.
I have an express server and angular frontend. The server side templates are in swig and currently only serve for error pages and the index page. Mostly the angular templates will make up most of the front matter.
What I'm struggling with, if only only in deciding how to do it, is getting an efficient work flow for the asset pipeline. Server side templates must be able to inject the vanilla of assets during dev and testing. The same for client side templates during testing. Basically, running with express' static middleware should be an option without any configuration (maybe with some helper in server side assets). Thus git clone -> grunt -> viola.
However, during staging and production, I would like the server side files to stay vanilla. The template helpers may parse a manifest file indicating the cache busted links (CDN path maybe too). How to make the link from logical asset bundle name to production ready asset is a mystery for me, while keeping development transparent.
The client side templates may be minified, concatenated, injected or whatever, as it will be saved to some dist folder for uploading. It is important that the whole dependency tree (images, fonts, css, js) must be "exported" to the dist folder.
To deploy would then be: pushing the server side code to the server and running. And pushing client dist folder to some asset host (CDN, nginx, another node, maybe even connect static)
What my question(s) then actually is(are):
Is this workflow possible with tools such as broccoli/gulp/grunt alone?
I've tried connect-assets but I don't want to conform to some predetermined folder path. Also the cli tool didn't produce the other static assets. Perhaps I don't understand the tool.
Am I following the correct approach?
I've added to a discussion on broccoli concerning the manifest file consumption:
https://github.com/mjackson/broccoli-rev/issues/1#issuecomment-49076249
Edit: I forgot to mention that I use bower, so assets should be pulled from arbitrary (URLs too maybe) locations.
I think angular-fullstack is what you want. Even if you don't use it, it does almost all of what you're looking for.
The only thing that it might be missing for you is deployment. It has built in support for Heroku and OpenShift deployment. You could use something like grunt-ssh or grunt-deploy for other deployment scenarios.
In a large web application, I'm using requirejs amd modules so that the scripts themselves are modular and maintainable. I have the following directory structure
web
|-src
|-main
|-java
|-resources
|-webapp
|-static
|-scripts
|-styles
|-images
|-static-built //output from r.js. not checked into git
|-WEB-INF
During build js and css are optimized using r.js into static-built folder. Gradle is the build tool.
Now the problem: The jsps refer to the scripts in static/scripts folder and this is how i want when working locally. However when building war, I want the static files to be served from static-built folder. The important thing is the source jsp should not have to change to serve the optimized files from static-built folder.
Two options that I have are: a) the gradle build while making war should include static-built instead of static. b)include static-built in addition to static and using tuckey urlrewrite pick the resouce from static-built rather than static.
What best practices are the community following in similar scenarios?
We've setup the server to have a runtime profile (dev, qa, prod, etc) read from a system property which determines some settings based on it. When running in production profile we serve the optimized files from the WAR. In development we serve the non-minified and non-concatenated files directly from the filesystem outside the application context.
Files are structured according to the official multipage example.
Configuring serving files depends on your chosen backend solution. Here's an example for spring.
Alternatively, r.js can generate source maps and those will help with development as well.
Not sure if this question is outdated already, but I had a kind of similar problem.
I had similar project structure, but with the only difference - I've split the project into 2 modules:
one of them (let's call it service) was java-module for back-end
the second one contained only js and other stuff related to front-end (let's call it ui).
Then in Gradle build 'assemble' task of the service depends on 'assemble' task of ui AND another custom task called 'pre-assemble'. This 'pre-assemble' task was copying the optimized js files to place where I wanted them to be.
So, basically, I've just added another task that was responsible for placing all the optimized js files in the proper place.