Comments (16)
can you post your code snippet where you require express-cdn and pass app/options to it?
also what version of express-cdn are you using? the latest is 0.0.3
from express-cdn.
Hi - I am using 0.3.3. It works fine for js ...
https://gist.github.com/3081252
from express-cdn.
Same issue when I try to use the CDN helper to replace the img path for:
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/img/apple-touch-icon-144x144.png" />
from express-cdn.
can you share your code snippet for the CSS?
also, we don't have functionality built in for link selectors that are non-CSS
we'd love a pull request though :)
from express-cdn.
Should be in the gist ... Here it is again:
<%- CDN([ '/css/bootstrap.min.css', '/css/app.css' ]) %>
from express-cdn.
the CSS part works by issuing a HTTP request to the host
+ port
options followed by the full path given in the CDN helper (e.g. /css/bootstrap.min.css
). The body of the HTTP GET request is processed etc.
According to your config, try visiting these URL's and seeing if CSS is loading OK.
http://hatchetapp.net:1337/css/bootstrap.min.css
http://hatchetapp.net:1337/css/app.css
I recommend that you change your S3 credentials since you posted them publicly and that is a security risk.
from express-cdn.
Ah - that is what that bit of configuration for ... the hostname and port. And CSS is different to JS because of the less functionality - ok ... I get it. Thank you. On that note - my dev and production have different setups - what is the neatest way for me to set up this functionality for the different environments. (sorry - still very new to node).
And yeah - thanks for the security risk notice - it's still dark here early morning and am about to have my first cup of coffee.
from express-cdn.
I utilize a config.json
file, here is an example of its contents:
{
"development": {
"port": 1337,
"hostname": "localhost"
},
"production": {
"port": 80,
"hostname": "mysite.com"
}
}
Then when your server starts, you simply require it and pass an environment variable (example given below):
var env = process.env.NODE_ENV || 'development';
var port = process.env.PORT || config[env].port;
var config = require('./config')[env];
// you can then configure your app like this, and add all your credentials in the config file
var options = {
publicDir : path.join(__dirname, 'app')
, viewsDir : path.join(__dirname, 'app')
, domain : config.domain
, bucket : config.bucket
, key : config.S3.key
, secret : config.S3.secret
, hostname : config.hostname
, port : config.port
, ssl : config.ssl
, production : (env === 'production') ? true : false
};
// Initialize the CDN magic
var CDN = require('express-cdn')(app, options);
// more stuff ...
app.listen(port);
Also, instead of using a JSON file and adhering to the quoted format etc., you could create a file called config.js
and utilize it (e.g. var config = require('./config')[env]
):
module.exports = {
// configuration here without worrying about the quotes
development: {
// ...
},
production: {
// ...
}
};
from express-cdn.
Cool - thanks for that!
from express-cdn.
One issue that still remains ... when I push the CSS to the CDN - and access it say using assets.myapp.com ... the images I refer to inside the CSS refer to /img/myimage.png ... which translates to assets.myapp.com/img/myimage.png - so they refer to the assets hostname - which is my CDN - but not where my CSS images are ... How do I resolve this? Is there something built into this that can handle this situation?
from express-cdn.
Yes we have not yet built in the CSS parser yet for images (e.g. background-image: url(/some/image.png)
) -- however, this feature is planned!
from express-cdn.
- this project is amazing.. thank you for making it
- does this mean it's useless if you're using background-image in css? do you need to specify them in css that does not get passed into express-cdn? am I missing something painfully obvious? simply make sure to put the images into the CDN?
from express-cdn.
RE @jmonster:
- Thank you!
- Currently only
tags utilize express-cdn, however we anticipate someone will soon integrate filters to CSS/LESS/Sass/Stylus that will parse stylesheets and convert instances of background-image: != CDN('/some/image.png') to the appropriate S3 URL or local value. Currently you should not be using != CDN(...) in any of your stylesheets. You can however use it in place of
tags, e.g.
!= CDN('/some/image.png')
will render<img src="/some/image.png?v=1234567890" />
(w/dynamic timestamp in development mode) and in production mode<img src="http://cdn.your-domain.com/some/image.png" />
-- see Readme for accurate examples
from express-cdn.
I'm going to add in a lazyweb request for this stuff.
from express-cdn.
Here's an example if anyone can build out this lazyweb request feature:
https://github.com/niftylettuce/express-cdn/tree/eeccfaf2efc643240df92d86e28c8b9c10fd6f19#requests
from express-cdn.
See pull request here: #18
from express-cdn.
Related Issues (20)
- Express CDN doesn't support video/mp4
- Error when installing express-cdn HOT 2
- Error during install on node 6 due to outdated optipng-bin and jpegtran-bin dependencies HOT 2
- Files do not upload to s3 HOT 2
- BUG : removing the first character of file path HOT 1
- production true is giving errors
- Action required: Greenkeeper could not be activated 🚨
- When Uglify fails, it doesn't tell which file is failing it. HOT 1
- Older version of clean-css leaving truncated files HOT 1
- Error: TypeError: assets.substr is not a function
- Getting error after latest update HOT 2
- File file.js comes to S3 without content. HOT 2
- 0.31 and 0.32 releases are broken by UglifyJS 3.X HOT 2
- In package.json update dependency on 'request' module to 2.88.0
- BUG: timestamp cache not set properly
- Concatenating files doesn't produce a URL-encoded CDN address HOT 2
- Working with vars
- Explicitly define list of assets HOT 1
- Private bucket support
- Asset versioning in production HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from express-cdn.