I got my less files compiled in css perfectly by grunt and I see result in .tmp/public/styles
So now livereload with grunt-contrib-watch should be made naturally in sails generated project ?
Or do I have to make a special configuration ?
I found that in tasks/pipeline.js file but not sure of what to do.
// CSS files to inject in order
//
// (if you're using LESS with the built-in default config, you'll want
// to change `assets/styles/importer.less` instead.)
var cssFilesToInject = [
'styles/**/*.css'
];
I saw in the file tasks/README.md :
###### `sails lift`
Runs the `default` task (`tasks/register/default.js`).
And in the file default.js we got :
module.exports = function (grunt) {
grunt.registerTask('default', ['compileAssets', 'linkAssets', 'watch']);
};
But watch.js file is missing in the folder...
What should it be ?
Watch does only looking for files that have changed and execute less, sass, injection and so on - but it doesn't make a reload.
You can add this in task/config/watch.js
Related
My main goal is to inject a tag into my index.html only in production (it's a New Relic monitoring code snippet).
My Vue.js is built and served as a static resource, so using {% %} tags to surround the script block with a condition doesn't seem to work in this use case.
So I tried to add the New Relic code snippet on my Vue.js app using html-webpack-plugin, since I found a simple Webpack plugin using on html-webpack-plugin. It's a pretty simple plugin, it just create the node and pushes it in the page body : https://github.com/robrap/html-webpack-new-relic-plugin/blob/master/src/index.js#L25
I register the plugin by setting my vue.config.js this way (I first tried to add the script no matter the environment) :
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackNewRelicPlugin = require('#yodatech/html-webpack-new-relic-plugin');
module.exports = {
configureWebpack: {
plugins: [
new HtmlWebpackPlugin(),
new HtmlWebpackNewRelicPlugin({the plugin options})
]
}
}
The plugin actually does its job well (the code snippet is injected), but its execution messes up with Vue CLI default configuration.
Some stylesheets and scripts aren't referenced anymore in the final index.html file, the <div id=app></div> is not there anymore, the app is broken.
I don't know if using HtmlWebpackPlugin is a dead end, but I currently don't know any other way to reach my goal.
Has anyone an idea on how I could make this work ?
Thanks a lot to anyone passing by.
EDIT : The plugin I was trying to use seemed to be flawed, I had to modify it to make it work with Vue CLI. My main problem has been solved by the selected answer.
vue.config.js option configureWebpack just merges the options you provide to a webpack config provided by Vue CLI. So by using your code, you are running 2 distinct HtmlWebpackPlugins (one from your config and one default from Vue CLI)
Try this instead:
var HtmlWebpackNewRelicPlugin = require('#yodatech/html-webpack-new-relic-plugin');
module.exports = {
configureWebpack: {
plugins: [
new HtmlWebpackNewRelicPlugin({the plugin options})
]
}
}
I have defined wdio.conf.js file (main file) and environment specific dev-chrome.conf.js file.
I can't get get cucumber to recognize my step definitions folder.
This is my structure:
And this is what I have in dev-chrome.config.js file:
const wdioConfig = require('../../../../../wdio.conf.js');
const commands = require('../../../../../src/commands/commands');
wdioConfig.config.cucumberOpts = [{
// other stuff here
require:
[
'./src/step_definitions/**/*.js',
// Or search a (sub)folder for JS files with a wildcard
// works since version 1.1 of the wdio-cucumber-framework
//'./src/**/*.js',
],
// other stuff here
}];
exports.config = wdioConfig.config;
I am getting an error:
"Step "When I add the product to a cart" is not defined. You can ignore this error by setting cucumberOpts.ignoreUndefinedDefinitions as true."
When I have same path for step definitions defined on main wdio.conf.js file then it works.
My main wdio.conf.js file is located in the root folder of the project.
Do you know how could I make it work in the environment specific conf.js file?
I am using #wdio/cucumber-framework": "^5.13.2"
As per the below example config, the cucumberopts should be an object and I think you are trying to set it as an array.
https://github.com/amiya-pattnaik/webdriverIO-with-cucumberBDD/blob/master/test/config/suite.cucumber.conf.js#L156
Maybe you should follow this example which will help to understand config setup.
Cheers!
I created an app with vue-cli and then I build the dist folder for production.
The app is deployed on IIS with flask backend and works fine.
The problem occurs when I have to make some changes and I have to redo the deployment. After this, users call me because app doesn't work but if I clear the chrome cache, the app works fine again.
How can I fix this problem? Is there a method to clear chrome cache automatically when I release a new application version?
Thanks
my dist folder
deployment: copy and paste folder dist on IIS
if files in dist folder are correct, maybe the problem is in axios cache? i have make some changes also to rest apis
I had the same problem and changing (incrementing) the version number in package.json before running the build command fixed it.
For example by default the version number is set to "0.1.0"
package.json file:
{
"name": "project-name",
"version": "0.1.1",
"private": true,
...
}
If you use vue-cli, then it has built-in webpack configs for building dist. And in fact it adds hash-names to output files.
But if it was removed somehow, you can add it back to webpack config like
output: {
filename: '[name].[hash].bundle.js'
}
And your app will looks like this:
And even more, you do not need to handle how all this stuff will be added to html, coz webpack will figure it out for you.
You need to add a version query to your js file. This is how a browser can know if the file has changed and needs to download the new version.
So something like:
<script src="main.js?v=1.1"></script>
<script src="main.js?v=1.2"></script>
etc...
Assuming this is nothing to do with service worker/PWA, the solution could be implemented by returning the front-end version.
axiosConfig.js
axios.interceptors.response.use(
(resp) => {
let fe_version = resp.headers['fe-version'] || 'default'
if(fe_version !== localStorage.getItem('fe-version') && resp.config.method == 'get'){
localStorage.setItem('fe-version', fe_version)
window.location.reload() // For new version, simply reload on any get
}
return Promise.resolve(resp)
},
)
You can also ensure the fe-version is returned based on any sort of uniqueness, here I have used the commit SHA.
Full Article here: https://blog.francium.tech/vue-js-cache-not-getting-cleared-in-production-on-deploy-656fcc5a85fe
You can't access the browser's cache, that would be huge a security flaw.
To fix it, you must send some headers with your flask responses telling the browser not to cache you app.
This is an example for express.js for you to get the idea:
setHeaders: function (res, path, stat) {
res.set('Cache-Control', 'no-cache, no-store, must-revalidate') // HTTP 1.1
res.set('Pragma', 'no-cache') // HTTP 1.0
res.set('Expires', '0') // Proxies
}
You can read a lot more about caching in here.
This is an older post, but since I could not find the solution for this problem online, ill just post this here in case someone else might find it usefull.
I added the hash to the appllication chunk files via the webpack.mix.js file by adding:
mix.webpackConfig({
output: {
chunkFilename: 'js/[name].js?id=[chunkhash]',
},
})
This adds a fingerprint to the actual chunks and not just the app.js file. You can add a version name to the app.js file aswell by adding version(['public/js/app.js']); at the end of the file, or add filename: '[name].js?[hash]' to the output block.
My complete webpack.mix.js:
const mix = require('laravel-mix');
mix.webpackConfig({
output: {
chunkFilename: 'js/main/[name].js?id=[chunkhash]',
}
}).js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
//
]).version(['public/js/app.js']);
In my laravel blade file I used
<script src="{{ mix('js/app.js') }}"></script>
to load the app.js file with the correct version fingerprint.
The answer for me was caching at my DNS provider level.
Basically, I'm using Cloudflare DNS proxy and they are caching the website so in development mode I was not getting the code updates.
I had to clear the cache many times to get anything to change. I had to wait a significant period of time before anything update.
Turned it off and it stopped doing that.
the method I want to suggest
<script src="{{ asset('js/app.js?time=') }}{{ time() }}" defer></script>
add below script in publc/index.html
<head>
...
<script type="text/javascript" language="javascript">
var timestamp = (new Date()).getTime();
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "<%= BASE_URL %>sample.js?t=" + timestamp;
document.head.appendChild(script);
</script>
...
</head>
could you try ?
vm.$forceUpdate();
Also it's possible that the component it self needs a unique key :
<my-component :key="unique" />
I've been struggling with this for a few hours now. I have the following in my gulpfile:
gulp.task('styles', function() {
gulp.src('C:\\TeamCity\\buildAgent\\work\\5003e8de5901599\\dev\\Content\\css\\less\\dealer-landing.less')
.pipe(less())
.pipe(gulp.dest('C:\\TeamCity\\buildAgent\\work\\5003e8de5901599\\dev\\Content\\css'));
});
I run 'gulp styles' which completes with no errors, but the .css is never created. I tried simply commenting out the middle line as seen below and that works as expected; the less file gets copied to the dest directory:
gulp.task('styles', function() {
gulp.src('C:\\TeamCity\\buildAgent\\work\\5003e8de5901599\\dev\\Content\\css\\less\\dealer-landing.less')
//.pipe(less())
.pipe(gulp.dest('C:\\TeamCity\\buildAgent\\work\\5003e8de5901599\\dev\\Content\\css'));
});
Any idea why gulp-less doesn't generate the css? If I use just less, the file is generated correctly.
I experienced this due to an undefined class in my less file.
I discovered the undefined class through logging.
Gulp may not throw errors unless you explicitly log them. To log, require gulp-util in your gulpfile:
var util = require('gulp-util');
And then add logging:
.pipe(less().on('error', util.log)),
Run gulp style to see the error (possibly an undefined class).
Fix it and your style task should generate the css.
In app.coffee I have
stylus = require("stylus")
...
app.use stylus.middleware
debug: true
src: __dirname + "/stylus"
dest: __dirname + "/public/css"
compile: (src) ->
console.log(stylus(src))
return stylus(src)
I included the styles in layout.jade like:
link(rel="stylesheet", href="/css/styles.css")
But in Chrome network tab, I see canceled for styles.css why is that?
When I point the browser directly to /css/styles.css, I get
Cannot GET /css/styles.css
Whats wrong? How do I fix this?
Do you have the static middleware properly configured and working and positioned AFTER the stylus middleware in your middleware stack? The stylus middleware is just going to read the .styl file and write the corresponding .css file but it expects the static middleware to then find the .css file and serve it.
Also note that your src and dest file hierarchies should correspond directly. By that I mean even counting all intermediate directories if you list the recursive contents of one directory (ls -R or similar) then the ONLY difference should be src contains .styl files and dest contains exactly corresponding .css files. Don't tack a /css prefix onto one but not the other, for example.
Recently I run into the same issue and as long as #PeterLyons answer is correct I found that adding the extra slash after css directory name also seems to fix the problem.
(without coffee)
var stylus = require('stylus');
app.configure(function() {
app.use(stylus.middleware({
src: __dirname + '/stylus',
dest: __dirname + '/public/css/' // <-- additional slash after "css"
}));
app.use(express.static(__dirname + '/public'));
});
Not sure if this is stylus version-related issue and wasn't/was present before but still it's quite confusing to me.
This has been driving me crazy for a few hours so I thought I'd share :)
I serve my external files from /public
So my stylesheets are in /public/styles. All I had to do was put my .styl files in a folder called /styles in the root of my project.
modules.app.use(modules.stylus.middleware({
debug: true,
src: __dirname + '/',
dest: __dirname + '/public/',
compile: compile
}));
I got around the whacky path requirements as I'm always going to ask for styles in /styles
GET /styles/website.css serves /styles/website.styl from the root / directory of the project
this worked for my
app.use(express.static('public'));
//stylus
function compile(str, path) {
return stylus(str)
.set('filename', path)
}
app.use(stylus.middleware(
{ src:'/public/css'
, compile: compile
}
));
put your file.styl in public.css it will be compiled there too!
the problem must be the src directory, it seems you are pointed to modules/stylus, anywhere I am not an exprert but this way works