I'm using the splitChunks optimization setting and also the chunkFilename property like so chunkFilename: '[id].[chunkhash].js' to give each chunk a hash. Is there a way to reference the chunked file by a common name so that I can dynamically update my pages when the hash changes?
something like:
manifest.json
{
vendorFile: venderFile.1902tjg.js
}
Where I can pull in that file and reference it in my template file
index.pug
<script src=#{manfiest.vendorFile} />
If you have a folder with your webpack build result like:
venderFile.1902tjg.js
some.css
etc.etc
Which is ready before the start of your nodejs + pug templates, you could create your manifest.json with these steps:
Get the unique .js file name in your build folder. If there are several .js files, use a kind of regex
var path = require('path');
var fs = require('fs');
var targetFiles = fs.readdirSync(__dirname).filter(function(file) {
return path.extname(file).toLowerCase() === '.js';
});
create your manifest.json using the unique file found
var fs = require('fs');
var obj = {vendorFile: targetFiles[0]};
fs.writeFileSync('../../manifest.json', JSON.stringify(obj));
You could use the previous snippet as a package.json script
"scripts": {
"manifest": "node update_manifest.json"
}
Or just as a code before the start of your express application.
Related
so i'm writing a test to upload an image with webdriverio javascript
http://webdriver.io/api/utility/chooseFile.html
I'm guessing this is the command I use, can someone provide me with an example on how to do this?
thanks
This is the example in the integration test.
describe('choosing a file in an <input type=file>', function() {
before(h.setup());
var path = require('path');
var toUpload = path.join(__dirname, '..', '..', 'fixtures', 'cat-to-upload.gif');
it('uploads a file and fills the form with it', function() {
return this.client.chooseFile('#upload-test', toUpload).catch(function(err) {
assert.ifError(err);
}).getValue('#upload-test').then(function(val) {
assert.ok(/cat\-to\-upload\.gif$/.test(val));
});
});
it('errors if file does not exists', function() {
return this.client.chooseFile('#upload-test', '$#$#940358435').catch(function(err) {
assert.notEqual(err, null);
});
});
});
client.chooseFile(selector,localPath).then(callback);
The first parameter is the selector (id of your input field), second parameter is path to the file you will upload.
You just need to click submit to upload the file. Note that it probably won't work everywhere. The required file endpoint is not even documented in the Selenium project.
To upload image,
First create a folder named 'resources' in your project directory and save the image in that directory
Use the below code to upload the file . In the third line, you need to replace the selector with the one on your application. Please note that if there is a button like "Upload" or "Add Photo" in the application, you need not perform click on this button before adding the below code.
var path = require("path");
var toUpload = path.join(__dirname, "..", "resources",
"CompanyPic.jpg");
browser.chooseFile('input[type="file"]', toUpload);
The typical way to include the connect assets file is
!= css("main")
That is with .jade though. I am using handlebars and I have no clue how I can add the file?
I am using node-sass as well.
Just guessing, something like this works (see blog post):
var connectAssets = require("connect-assets")();
app.use(connectAssets);
var hbs = require('hbs');
hbs.registerHelper('css', function() {
var css = connectAssets.options.helperContext.css.apply(this, arguments);
return new hbs.SafeString(css);
});
I'm trying to read a json file using node js/ express and deploying it to parseCloud but i keep getting
*Failed to load filters.json with: Could not find file filters.json *
here is my code:
var fs = require('fs');
var obj = JSON.parse(fs.readFileSync('cloud/filters.json', 'utf8'));
or this
var filterJson = require('cloud/filters.json');
thanks
Looks like parse.com doesn't allow .json files. You can save your file as .js and load it as plain text file (doesn't work with require()).
var fs = require('fs');
var parsedObject = JSON.parse(fs.readFileSync('cloud/path/json_file.js'));
It looks ugly, but works for me. :)
Try to add ./
fs.readFileSync('./cloud/filters.json', 'utf8')
Im trying to learn NodeJS and Express. Im using the node-localstorage package to access the localstorage. This works when using the code directly in the function like this
routes/social.js
exports.index = function(req, res)
{
if (typeof localStorage === "undefined" || localStorage === null)
{
var LocalStorage = require('node-localstorage').LocalStorage;
localStorage = new LocalStorage('./scratch');
}
localStorage.setItem('myFirstKey', 'myFirstValue');
console.log(localStorage.getItem('myFirstKey'));
res.render('social/index', {title: "Start"});
}
But I don't want to write this code over and over again in all my other functions when accessing the localstorage. I want to be able to register a helper function that I can access like
var localStorage = helpers.getLocalStorage
or something like that.
How can I do this in NodeJS? I've seen something about app.locals? But how can I access the app object in my routes?
There are many ways to do this, depending on how/where you are planning to use your helper methods. I personally prefer to set my own node_modules folder, called utils, with all the helpers and utility methods I need.
For example, assuming the following project structure:
app.js
db.js
package.json
views/
index.ejs
...
routes/
index.js
...
node_modules/
express/
...
Simply add a utils folder, under node_modules, with a index.js file containing:
function getLocalStorage(firstValue){
if (typeof localStorage === "undefined" || localStorage === null)
{
var LocalStorage = require('node-localstorage').LocalStorage;
localStorage = new LocalStorage('./scratch');
}
localStorage.setItem('myFirstKey', 'myFirstValue');
return localStorage;
}
exports.getLocalStorage = getLocalStorage;
Then, anytime you need this function, simply require the module utils:
var helpers = require('utils');
exports.index = function(req, res){
localStorage = helpers.getLocalStorage('firstValue');
res.render('social/index', {title: "Start"});
}
EDIT
As noted by Sean in the comments, this approach works as long as you name your node_modules folder with a name different from Node's core modules. This is because:
Core modules are always preferentially loaded if their identifier is
passed to require(). For instance, require('http') will always return
the built in HTTP module, even if there is a file by that name.
I see it is possible to get the contents of the js files using onBuildWrite but I am needing a way to inject values into our root html page, is this possible? EG we would like to swap out our less file for a css version.
It's possible with node.js:
var fs = require('fs');
// read html file
var fileContents = fs.readFileSync('index.html', 'utf8');
// replace rel attribute for less file with rel for css
fileContents = fileContents.replace(/stylesheet\/less/gi, 'stylesheet');
// replace file name
fileContents = fileContents.replace(/css\/application.less/gi, 'css/application.css');
// remove less runtime compiler (if needed)
fileContents = fileContents.replace(/<script.*?\bless\b[^"']*?\.js.*?<\/script>/g, '');
// write file back
fs.writeFileSync('index.html', fileContents, 'utf8');
Just add that as a part of your build script, along with calling r.js.