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.
Related
I'm making a website that I used to edit directly online on Neocities, but due to some problems, I'm looking to switch my editing to local offline. But I can't make my links point correctly to their targets, such as the favicon or my css files because locally, "/" doesn't point to the root.
Is there any program that allows me to set a folder as the root directory so these links can point properly? I'm currently trying Notepad++ but I haven't found a way to do so.
I know I could put the full path as "C:\folder\folder\file.css" for examle, but that would mean I'd have to edit the html of every single of my many pages and then re-edit them when I upload them online, and that's very undesirable. I need a way to preview the html locally without changing any paths, so my favicon link, for example, which currently is href="/favicon.png" can stay unchanged on all the pages. I could remove the "/" but then it wouldn't work for any pages within subfolders, and there's a lot of those in my project.
It's possible that I'm just missing some simple detail but I'm really just very much a beginner to making websites in general.
You can run a local web server to serve the contents of your root directory at a domain like http://localhost:8080. So rather than opening index.html in the browser you visit that URL instead.
There are a bunch of simple web servers you can use - my favourite for purposes like this is the NPM package http-server. It requires Node to be installed.
Install node
Install http-server by executing npm install -g http-server in your Terminal
Run the http-server by navigate to the website root folder and run http-server in your Terminal
http-server will produce an output that will tell you where to access the site.
Starting up http-server, serving ./
http-server version: 14.1.0
Available on:
http://127.0.0.1:8080
http://localhost:8080
Hit CTRL-C to stop the server
I’m a beginner and I’m using VS Code for coding. I’m learning HTML and CSS. When I debug the code on Chrome I see the following:
This site can’t be reached. localhost refused to connect.
Please, I need help to solve this problem, hope I get the help soon. Thank you!
Try Live Server Extension AND check for Firewall Settings
This problem is either because you didn't run anything to serve up the files or a firewall issue. If it's a firewall problem then check your firewall settings for anything that would block it, but most likely you need something to serve up your files. There are a number of ways you can serve the files
Option 1
Use the Live Server extension. In VS Code you can search for it and install it, then with a click of the "Go Live" button on the toolbar, it will serve your files on localhost and open the browser for you.
Option 2
Use http-server, which will serve up your files with a simple command line command.
Option 3
Use Node.JS to serve up your files. It's a very popular technology, but is more complicated compared to the first 2 options if you just want to fiddle with beginner JavaScript, you may need to add a start script.
-- OR -- just open the file with your web browser. You can double click on file you want to open from File Explorer or right-click >open with browser of your choice, in which case you don't need to run a background software to serve your files and you can use the browser UI and console for testing. In this case you just wouldn't have VS Code available to use with it's debugging tools.
Alternatively, you can try using Python's SimpleHTTPServer if you have Python on your system.
1- from xampp window select httpd.config and search about Listen make it Listen 80 , search about localhost make it ServerName localhost:80
2- from xampp window select httpd-ssl.config search about Listen make it Listen 443 , search about VirtualHost _default .. make it VirtualHost default:443 , i did that and localhost worked normally
I've been searching for-ever!
I`m working on windows and ubuntu, mostly on windows.
I searched the web for lot's of external libraries such as opn, open etc' but none of these could open this URL:
chrome://extensions
I want to put in the the script tag inside package.json
or in my build.js script
so that every time after I run "npm run build"
the chrome://extensions page will reload and also the additional page I`m testing on.
I once was able to do that exactly, but I lost that solution.
part of the problem is that I can't open chrome:
the ':' symbol is not recognized in the OS as valid protocol or something and it is escaped from chrome address bar if executed from command line.
I have tried many solutions.
I am not happy with the different resolutions proposed in the research I've made in Stack.O.
reloader as an extension is out of the question I want a script.
your kind help.
Assaf.
Clerc - for Chrome Live Extension Reloading Client
I built Clerc for exactly this purpose. npm run build won't be enough though. You need to hook up a LiveReload compatible server to watch for file changes, and clerc will listen for the reload messages.
Edit: Oh sorry. I missed the part where you said "reloader is out of the question". I still think this is your best option though.
I want to learn AngularJs from http://www.tutorialspoint.com/angularjs
but an example must be deployed a server. I don't know anything about it.
Please give me some hint about deploy .htm extension file to a server.
Example url is following;
http://www.tutorialspoint.com/angularjs/angularjs_includes.htm
I believe that they just mean placing the files somewhere inside the web root. The web root should be deployed by your local or remote server.
Example:
Download and install MAMP.
Set your root directory as the MAMP root directory in preferences.
Now you can use your own paths -- just follow the example in the link you provided.
https://www.mamp.info/en/
Also, I'm of the opinion that it's good practice to at least use a local web server as opposed to running your website without one.
You don't need a webserver to test the code given in that example. ng-include using relative paths works fine.
However, if you really want to use a webserver for other examples/projects, depending upon your OS, you can use *AMP. where * means
W for windows
L for linux
once you have it installed, place the files in www folder. and access it in browser using http://localhost
Firstly I add my app folder under
D:\tomcat7\apache-tomcat-7.0.67-windows-x64\apache-tomcat-7.0.67\webapps
after I run tomcat server .
And run
http://localhost:8080/an/ht.htm
It is working :) Thanks #ketchupisred #Mridul Kashyap
I was using a Chrome shortcut with allow-file-access-from-files in the target to work on my three.js student project files. But sometime this morning this stopped working and it appeared Chrome had been updated. I redid the shortcut but no joy.
Part of the project I'm doing is building three.js animation that works in a common browser (for which I chose Chrome).
Is there any way to get Chrome to allow file access again?
Thanks.
The answer I came up with was to use Firefox instead of Chrome changing the security policy as detailed in https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally
Not a perfect answer but with a deadline looming it's the best workable answer for me right now as trying different variations of Chrome, trying Wamp and also Mongoose didn't work. If I had more time I would work out how to use Python or probably node.js as I've seen it mentioned a number of times as being the faster option.
What gman stated is true, using the Chrome flag (and changing Firefox's security policy) does create a big security risk. But only if you use that shortcut (and it's tabs etc.) for anything other than accessing your own local files. I've been scrupulous about not using it for the internet but don't use this method if you can't be strict with yourself.
Ideally I'd recommend beginning any project with node.js.
Gman's answer is good. If you're in windows environment, and use npm for package management the easiest is to install http-server globally:
npm install -g http-server
Then simply run http-server in any of your project directories:
Eg. d:\my_project> http-server
Starting up http-server, serving ./
Available on:
http:169.254.116.232:8080
http:192.168.88.1:8080
http:192.168.0.7:8080
http:127.0.0.1:8080
Hit CTRL-C to stop the server
Easy, and no security risk of accidentally leaving your browser open vulnerable.
DON'T USE THAT FLAG! You're opening yourself to having your online accounts being hacked and your local data stolen. Here are 2 proof of concept examples
Run a simple server.
It's super simple.
Here's one
Here's one.
Here's another.
And another.
They won't take more than a couple of minutes to download and require no configuration