I am using the production version of Shopware 6.4.7 with my own custom theme installed and activated. When I start the watcher via bin/watch-storefront.sh the live reload server seems to start normally and compiles my files. When I go to the live reload URL with the supplied port (http://shopware1.local:8889) I can see my website and previous SCSS changes are compiled.
What does not happen is the following:
JS changes are not compiled
I do not see any logging I would expect when running HMR
SCSS changes are not reloaded, even though my terminal output states they are recompiled
JS changes are not reloaded, even though my terminal output states they are recompiled
When I run a full build using bin/build-storefront.sh all assets are compiled as expected. What could be the issue here?
For anyone who also ran into this: After re-installing my setup I figured it out; you should set up the site in dev mode in order for livereload to work. Contrary to what the SW6 training video's specify.
Related
I linked external stylesheet to my html page.....it is working in my PC but when I copied whole folder containing both HTML & CSS files in my phone , CSS is not applying to my html page in Google Chrome......
It may not necessarily be the problem of phone. To make sure first try it on other phone. If It works it means the problem is with caching in browser. To solve it, open the inspect element with Ctrl + Shift + I, now long press the reload button and choose hard reload. I hope it helps you. It would give me great satisfaction if you just write that it solved your problem.
RECOMMENDED
If you want to test how your website looks in a real phone without publishing it you don't need to copy the assets, you can use parcel bundler, webpack, rollup or any other bundler to mount a local server that serves this front-end webpage.
Then if your smartphone is connected to the same network than your PC you can see it in real time simply entering the IP of your PC and the port that you've set to the bundler (or the default it uses).
So if you use Parcel you may see your app in you PC consuming http://localhost:1234
and in your phone navigating to (i.e.): 192.168.0.112:1234
you can check your PC's IP with ipconfig (on windows) or ifconfig (on linux).
!! if this does not work just make sure your Wi-Fi is not isolated from the wired network (Wireless Isolation, sometimes called Client or AP Isolation in your router advanced config) unless both devices are on Wi-Fi.
basic instructions:
run npm init -y (if you don't have a package.json)
run npm i --save-dev parcel-bundler
finally run parcel index.html
npm init -y
npm i --save-dev parcel-bundler
parcel index.html
The first time it will autodetect if you are using JS, SCSS, and so on and will add the required libs to node_modules so it will be slower (some seconds), the next time you run the parcel index.html command it will be faster. I recommend Parcel as it handles almost all out of the box.
As OPTION B
you can also share a folder with the network from your PC so it will be available from your smartphone using any App that allows that such Solid Explorer.
If you still want to move your web to your phone, make sure the permissions of the files are ok and that the paths you've set are relative and valid.
I'm trying to enable vue-devtools in Google Chrome. But I cannot enable it. I'm using vue.js inside the Laravel application.
My server runs using php artisan serve command.
I was seeing the error message in this question's title and this solution worked for me:
Add Vue.config.devtools = true to the file where you create the Vue instance (main.js for me).
Note that, as mentioned in this answer, you need to put the Vue.config.devtools = true line before you create your store in order for the Vuex part of the devtools to work. If you're creating your Vuex store in a separate file (e.g. store.js), you may need to have the Vue.config.devtools = true line in both your main.js file as well as the store.js file.
Below is what the changes looked like in my project:
If the page uses a production/minified build of Vue.js, devtools
inspection is disabled by default so the Vue pane won't show up.
To make it work for pages opened via file:// protocol, you need to
check "Allow access to file URLs" for this extension in Chrome's
extension management panel.
I had to restart the chrome, and it worked :-)
If your using CDN; make sure your not using a production (minified) build of the library.
Use: https://unpkg.com/vue#2.4.4/dist/vue.js
Instead of: https://unpkg.com/vue#2.4.4/dist/vue.min.js
You might need to do Ctrl+Alt+I for it to show up the first time. (Source)
Updated Aug 2022
So apparently as #kissu said, the answer below causes the released code to be an unoptimized one. This might be different than what you want if you want to check production code while being able to check Vue Dev Tools.
Just be aware of it. Unless you don't mind checking the released code in an unoptimized bundle, then the following script is fine. If you don't like the Vue.config.devtools value being static, it might be time to consider env variables or something similar.
Here's how to setup Environtment Variables in Vue
Alternative answer for Vue CLI 3.x
Besides what #NathanWailes has said, this is an alternative which allows the Dev Tools to be available through scripts instead of writing it in your main Vue entry (which is usually main.js or index.js).
You can do this by simply adding this script to package.json
scripts: {
"start:dev": "vue-cli-service build --mode=development"
}
Explanation
This was because Vue.config.devtools are set to false by default in production mode as said by this GitHub Issue. But this has a work around, simply by using --mode=development flag provided in the documentation.
Then you can run using npm run start:dev and check the file in your dist/ folder! ;)
You may use the dev version of vue.js. For example get it here: https://unpkg.com/vue#2.3.2
When using Laravel just make sure you run the proper webpack for your environment for development . Running
npm run watch
should build Vue with debug mode on. Using
npm run production
minifies Vue for production. This will save you having to remember to toggle the debug mode when building for production.
For me Installing latest Vue dev tools - link and enabling 'Allow access to file URLs' in extension settings resolved the issue.
make sure you're running a non-production build of Vue.js. https://github.com/vuejs/vue-devtools/issues/62
Just add into vue.config.js:
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
delete package-lock.json, node_modules, run npm i and VueJS Devtool will be working
you could try to set environment variable NODE_ENV to 'development'
(e.g. set NODE_ENV=development on Windows or export NODE_ENV="development" under Linux)
before launching Vue dev server.
In my case for Laravel 9 fresh installation, I forgot to run sail npm run dev.
If you're using Vite you can configure your environment directory via shared options. If you change that and have NODE_ENV set to production you'll receive this message when trying to inspect your app.
I tried deploying Libgdx to html using gradle. I copied the content
html/build/dist
and all I see in the browser is the badlogic image with a red background (what you would see if you just created a project) Why is that?
Using the superdev I can open it in the browser, i see where it says drag this button but can't play it. there's nothing
The code server is ready at http://127.0.0.1:9876/
GET /clean/html
Cleaning disk caches.
Cleaned in 29ms.
GET /superdev.html
[WARN] ignored get request: /superdev.html
[WARN] not handled: /superdev.html
> Building 91% > :html:superDev^C%
turning the dev mod on I see Can't find any GWT Modules on this page.
If I build it normally, I see some warnings about depreciated methods, it builds successfully.
Assets aren't being loaded by html
I've few links that may be help you :
How to start
Super Dev mode in GWT
Also check this thread
https://stackoverflow.com/a/24265470/3445320
EDIT
I've tested on Android Studio with MacOS
Steps :
Run ./gradlew html:clean to clean your html module
On Android Studio Terminal I run ./gradlew html:superDev command
I got The code server is ready at http://127.0.0.1:9876/ on terminal
Then I open Google Chrome, View -> Always Show Bookmarks Bar
I typed http://127.0.0.1:9876/ in adress field -> enter
I got a page having Dev Mode On and Dev Mode Off, two buttons
Drag Dev Mode On to bookmarks bar, that is below my Address bar
Done! now I search http://localhost:8080/html/ , I got my game in browser
Press Dev Mode On button that is in bookmarks bar, I got option for compile
Now I need to deploy my html project
I run ./gradlew html:dist in Android Studio Terminal
I got BUILD SUCCESSFUL in Terminal then I find dist folder inside my html module.
dist folder is inside html module -> build -> dist
I copied dist folder and deployed to my server.
EDIT 2
Make sure badlogic.jpg is in your assets folder of android module
Check entry in assets.txt file and find badlogic.jpg inside html module->war->assets folder. If file or entry not exist.
Somehow program not able to write in assets folder
Check what programs have the file/s open
Check permissions and administrative rights
Delete the cache files, run "gradlew html:clean html:superDev" for every new run of superDev.
Check any anti-virus software, they can flag some of GWT's behaviour as suspicious
I've been working on an Aurelia app without gulp and it has gone well. Now I want to use gulp b/c the page loads are terrible with 100+ separate files being requested. I install aurelia-bundler from the skeleton and can get it working using gulp. But there are two problems:
1. I have to gulp bundle after EVERY change to refresh the page
2. The error messages make no sense b/c everything is minified now.
I can deal with #1 b/c of gulp-watch (even though that still takes time), but I can't handle the minified files and not being able to debug my code.
So, is there and easy way to switch back to the non-bundled files for development on my machine and only use the bundled files when I deploy to Heroku server? It seems like aurelia-bundle now points to the dist folder by default.
Oh yeah, I tried modifying config.js to point to "src" instead of "dist" but it still looks for the aurelia-xxx.js file instead of the non-bundled files.
Thanks.
If you are using the latest build files you can gulp watch in dev which should use the src files without bundling - of course, this is slower, but in conjunction with browser-sync you shouldn't have to do loads of refreshes.
Check your paths.js and other config files against the skeleton if gulp watch is also bundling.
I have the windows application installed, Live Reload extension for chrome and i'm using Sublime Text with Live Refresh and Live Reload plugins. For some reason any HTML doc i edit on sublime text is not auto updating on chrome. The extension is stuck on "Live Reload is connecting" when i enable it. What exactly am i missing, do i need to setup a local web server or something like that?
I think your issue may be that you did not add the folder that contains your HTML document to the LiveReload windows application so that it can monitor for changes to the file.
If you open up the LiveReload app, it should have a list of site folders. Try adding your test project's folder to the list.
If you load from local file it does work you must runt the local file through a web server e.g python -m http.server in the folder your .html exists otherwise the option match to local file never appears and then you can have the save and reload functionality.
I mention it because I hadn't found the problem through reading the post