I don't know if this is good place to ask this question but i just started studying reactjs and stuck in the beginning, here is the question.
I have installed node and Installed http-server from the npm command on the command prompt npm install -g http-server and went to the directory where is my static files and run command http-server and then to the browser hit localhost:8081.
Nothing happens/shows on browser but on command prompt it shows that its running and working properly, everytime i refresh browser then it shows on command prompt working. So why nothing happens on browser ?
here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
<title>Demo</title>
<script src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="example">
</div>
<script type="text/babel">
ReactDOM.render(
<h1>Something</h1>, document.getElementById('example'));
</script>
</body>
</html>
If you are looking for an alternative/easy way to set up a react application without having to worry about the messy configuration settings from the beginning, then I recommend using facebooks create-react-app starter code.
I realize this does not help you if you wished to learn the setup process, but for jumping right into react routing and learning that it is a great resource! I start most of my web-applications using this. It can also be easily modified to implement express for when you delve even further into the world of web-dev. I believe the starter code is also set up with web-pack and supports hot-loading, so any changes you make will automatically be refreshed/reflected after hitting save and you do not need to restart/republish to the server!
On top of that, this book is also a great resource for learning react, the DOM, JS, Express, and the like. I read and worked through the last edition (published 2017?) and found it super useful, hopefully this newer edition holds the same reputation.
Web-pack in itself is another large topic, and I endorse you to read up on it's capabilities, functions, high level design/implementation and the like as it is really interesting! Happy transpiling!
It looks like there is an ongoing issue with http-server. However, we can fix this using this tweak.
Try accessing your file in localhost with the filename after running http-server command.
For example, if your file name is somefile.html, try accessing this file like http://localhost:8081/somefile.html
Related
I'm building my first website and the structure is as follows:
a folder named website containing two subfolders named html and css. The html folder contains one file named home.htm and the css folder contains two files named general_style.css and home_style.css.
In home.htm i have put the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My title</title>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet"
href="../css/general_style.css"
type="text/css">
<link rel="stylesheet"
href="../css/home_style.css"
type="text/css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- code goes here -->
</body>
</html>
This works fine in Firefox on my desktop, but not in Chrome on my smartphone. On the smartphone only the html is shown and the icons from https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css.
All the code from my own css files is not shown neither are the icons from https://kit.fontawesome.com/a076d05399.js.
Can somebody help me out here?
PS: both html and css files are validated with no errors or warnings.
I can't say why it is not working. But I can tell you that if you're planning on building websites and testing them on various devices, you might want to run a local web server. This way, all your files can be hosted in your computer and you can access your site from any device connected to your network, using the local IP address of the computer that hosts the files. (ex: 192.168.0.x/home.html would show you your site if you open it in your mobile browser, without having to manually transfer any files.)
This is also the preferred method since it is closer to how users will access your website in the future.
You might want to look up "how to run a local web server" to find some guide that suits you. There are many methods and software tools to choose from.
If you are on a Mac, here's a quick and easy way to run one:
Go to /Library/Web Server/Documents and paste a folder with all your code and assets. Name it something simple, with no spaces
Open the terminal and type sudo apachectl start. It will prompt you for your password. Type it and press enter. (it might seem like its not typing because it wont show you anything, but it is working.)
Open your browser and type localhost in the address bar. You should see some big serif bold letters that read "It works!".
You're all set! Now just visit localhost/folder-name/home.html and it should show you your site! (hint: you might want to rename your home.html to index.html. If you do so, you will be able to visit localhost/folder-name/ and the server will automatically load index.html
Remember that if you are going to access this from your mobile phone or any other device, you must be connected to the same network. Also, entering localhost will not work. From other devices you must provide the local IP address of the computer running the server. Something like this: 192.168.0.5/folder-name/home.html/. You can find the computer's local IP in your Network Preferences.
(This works because macOS comes with the Apache webserver software preinstalled, and has set the /Library/Web Server/Documents/ folder to be hosted by apache. What we do in the terminal is just turn apache on. You can turn it off by typing "sudo apachectl stop" in the terminal).
You are trying to run your code on mobile browser?
Since it works on your computer Firefox browser smoothly but it wont work on mobile phone, this might be because you dont have the CSS files on your mobile device and have them on your desktop. I think that is a issue.
I am having a weird problem.
I am trying to build my github page site. So I am writing my html locally and then push it online to see it.
The problem is that Chrome doesn't recognize my css file when I am opening it locally. When I push the changers online or I am using another browser it work just fine
Here is how I import it on my index.html file:
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
And when I go to the chrome dev tools
css have turned to chinese
Microsoft edge load the css file normally.
I have tried a couple of different things like:
Using another editor
Creating the file in different directory
trying different filenames
Clearing Chromes Cache
Nothing seems to work
I have loaded again a local a site like this and it worked fine.
Any ideas?
Make sure the file encoding is UTF-8. You can use iconv or just in your text editor > save as.
So I've been working on a website for college and I'm starting to learn PHP but for that I installed xampp and tried to access the website from localhost.
By my understanding, the HTML file and images, even (some) images defined in CSS are loading but the entire CSS file is not, like float and flexbox and some padding, borders, and different types of positioning isn't working as intended. It's definitely finding the CSS file so I don't think there's a problem in my <link> tag in the <header>.
HTML header:
<head>
<meta charset="utf-8">
<title>Home - akiro</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
As Doc-Han Stated this is most likely caching, and its an issue I think most of us have run into during the UI development process.
One thing you can do to get around this, is to open and do your debugging in an incognito window which wont cache files and can be reopened to load new sets if session caching does occur.
Alternatively some code editors have an in-built web server instead for this reason. I've been using Adobe brackets for a couple years now and love it. It serves the pages using an internal Node server and as a result, they have it set up for real time code updates. Changes to the code are reflected in real time which i find helps a lot in dealing with UI development flow for me avoiding issues like this and just the saved 3-5 seconds of refreshing each time i make a change (which adds up when your making 5000 changes Im certain other editors offer something like this as well.
This is just because with Xampp the browser caches your CSS files. This means that if making changes to the file, the browser will still access the cached file rather than the new one. A simple trick is to open the CSS from the local server and refresh the page so that the new CSS will be used.
example open localhost:8080/project/css/style.css and refresh that page
Quite some possibilities why it's not working as expected:
As Doc-Han stated; an old version of the css my have been cached.
You're loading the css from a relative path: style.css. This means the css should be in the same folder as the html file. Maybe the css should be loaded from '/style.css' or '/resources/style.css' or another location
Maybe the css contains some simple typo's so you're applying 'flaot' instead of 'float'
Inspect your page through your browsers developer tools. Open the console. Check if there are there any errors. Check if the css did load, also check if the right version was loaded. Check if the styling rules are applied to the right html elements or are applied at all.
If it is a caching problem in Chrome you can open the dev tools, open the Application tab, click the 'clear storage' menu item and clear site data. Now reload the page. In the network tab you can also click 'disable cache' and reload the page.
Just clear your browser's caches and done!
I just had the same problem but opposite and troubleshooting with Google brought me here.
My server was working perfectly in localhost but when I tried visiting it live via Ngrok or port forwarding, I got broken pages without CSS. I read a comment in this post about visiting the CSS file directly and then refreshing and in doing so realized I couldn't visit a lot of my CSS files, and then realized I set rules in my .htaccess for rewriting. Only leaving this comment so if anyone makes my mistake and finds themselves here like I found myself here, check your .htaccess.
I am creating a website. I have tried to add a favicon. I have created a folder in Visual Studio in the Solutions Explorer named images and placed my image named "KS-final.png" in it. It did not work so I added another folder in the Project folder in which my solution is saved, named it images. The file path is \Mac\Home\Documents\Visual Studio 2015\Projects\WebSite1 and I have tried that as well. Should I even make a website on a Macbook using Parallels at this point? Seems a bit complicated, rather just go the full PC route. Thank you!
<!DOCTYPE html>
<html>
<head>
<title>My Portfolio</title>
<link rel="shortcut icon" type="image/png" href="imaages/KS-final.png">
<meta charset="utf-8" />
</head>
<body>
This is the content of the document
</body>
</html>
This answer is based on my comment, which helped resolve the issue.
There is a typo in href="imaages/KS-final.png", but that may not be the only thing causing the issue.
Visual Studio in a virtual machine is a relatively complex environment. That makes it hard to understand what's going wrong as a beginner. Try using a plain text editor (Visual Studio Code, Sublime, Atom etc.) on Mac OS directly. That's all you need to make a static HTML/CSS/JS website.
I'm trying to use Font-Awesome icon fonts via the BootstrapCDN link which I'm pretty sure I have the latest version of:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
I've put this link in the <head> part of my html file and I am trying to get it to work with this simple html code of:
<!DOCTYPE html>
<html>
<head>
<title>Font-Awesome Icons</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<p><i class="fa fa-camera-retro"></i> Camera Icon<i class="fa fa-facebook"></i> Facebook Icon</p>
</body>
</html>
However it's not rendering. I've tried this code in the latest versions of FireFox (27), Safari(7) and Chrome(33). I've checked that the fa class is on each of the icons I'm trying to call up and also that the fa- prefix is being used as opposed to the old icon- prefix. I've checked my implementation of the code with this video http://headwaythemes.com/using-font-awesome-with-headway/ (although meant for a WordPress theme, in principal the code should work the same) and looked around on stack overflow but previous questions like Fontawesome not loading haven't yielded me any help in solving my issue.
I don't have the fontawesome.otf installed but surely it isn't that if I can see the glyphs when visiting http://fortawesome.github.io.
Should I just download and host the font-awesome files along with my entire future website so I don't have to worry about updating the BoostrapCDN link as well? - Even though I only plan to use a few icons?
The reason it is not loading is because the URI is starting with "//". That signifies that it is a protocol relative path, meaning it will use whatever protocol that page is using. If you open your html locally, then your browser will use file as the protocol, thus trying to access the font-awesome css with "file://". If you access your html using a local or remote http web server, then you would access the page using the http protocol, thus accessing the css with "http://".
Solution:
Change the path of the css or mimic it on your local machine.
Run a local or remote http server and access the page.
For more info:
URI starting with two slashes ... how do they behave?
Such an easier way to deal with this - just add 'http:' in front for the cdn line, and it will work on your local machine, i.e. like this:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
Ta-daa!
What Pulkit answered is absolutely correct. Just to add, if you want to create a quick local server, just go to the directory of the html and css pages, and then go to the terminal and type -
$python -m SimpleHTTPServer
Then, go to your browser and go to 127.0.0.1:8000
If it doesn't show up, try changing the homepage of your website to index.html