How to run html file on localhost?
You can use python -m http.server
. By default the local server will run on port 8000. If you would like to change this, simply add the port number python -m http.server 1234
If you are using python 2 (instead of 3), the equivalent command is python -m SimpleHTTPServer
How to run a html file on localhost (any port)
IIRC macOS comes with PHP preinstalled, and PHP has built-in web-server which should be enough for serving static content.
So, open Terminal.app and then:
cd your/project/dir
php -S localhost:8080
After than you can navigate to http://localhost:8080/ and see your site in the browser (given you have index.html
in your project, otherwise there will be "Not Found" message).
There are more advanced and/or less terminal-oriented ways, of course, but since you already tinkering with python and node, another terminal command should not be a problem.
BTW, you might want to look at that terminal window from time to time, as it outputs nice log of what things were requested from server. Good if you want to check for invalid references, 404 errors, etc. Here is a sample output:
$ php -S localhost:8080
PHP 7.3.6 Development Server started at Sat Jun 22 20:00:28 2019
Listening on http://localhost:8080
Document root is /private/tmp/test
Press Ctrl-C to quit.
[Sat Jun 22 20:00:32 2019] [::1]:51640 [200]: /
[Sat Jun 22 20:00:32 2019] [::1]:51641 [200]: /style.css
[Sat Jun 22 20:02:35 2019] [::1]:51670 [404]: /oops.html - No such file or directory
As you can see, root folder (/
, which was translated to index.html
in my case) and a stylesheet (style.css
) were requested and successfully delivered (code is 200
). But non-existent file oops.html
resulted in error (code is 404
).
Running HTML file in localhost:8080
You need to add an option that'll put your website on port 8080
because the http.server
command defaults to port 8000
.
You can do this using:
python3 -m http.server 8080
Then when you go to 0.0.0.0:8080
it should show you your webpage instead of a download prompt.
Also, you might have another instance of http.server
running on port 8080
.
You can find the PID of this task using:
ps -A | grep "python3"
Which should show something that looks like this:
Then you could kill it using:
kill <PID-FOR-PYTHON3-INSTANCE>
Or in my case the task that's running on port 8080 is:
kill 6856
Or, if you don't mind, just kill all Python3 tasks using:
killall python3
Which in my case would kill both Python3 tasks.
WARNING: be very, VERY careful before running the killall
command, because this command will NOT save your work.
UPDATE: that blurry section in the picture is my username, I wasn't sure if it would be against the rules to include it.
Good luck.
How to host a local html file in localhost using python alone
if you are using python3, go to working directory where the files are located.
Then run the following from terminal
python3 -m http.server
now open a browser and navigate to localhost:8000
in the case of python2:
python -m SimpleHTTPServer 8000
How to display HTML using Python Alone in localhost
There's way to do so using the python web frameworks like Flask
or Django
. In a typical flask scenario your code would look like this:-
1) Install flask:-
pip install flask
2) Write your code.py
like this:-
from flask import Flask, url_for
from flask import render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('hello.html')
3) Next create a templates folder
inside which put your html file which I have named it to be hello.html
templates > hello.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<img class="resize" src="./pictures/logo.png" alt="logo">
<nav>
<ul class="nav-links">
<li class="active"><a href="./index.html">Home</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javascript">
$(document).on('click', 'ul li', function(){
$(this).addClass('active').siblings().removeClass('active')
})
</script>
</nav>
</header>
</body>
</html>
4) Your directory structure would look like this:-
/code.py
/templates
/hello.html
5) Run python code.py
and you can see your page on localhost:5000
.
Difference between Localhost and opening html file
Fundamentally, assuming at some point you're going to host the result on an actual web server, the former matches the target environment while the latter doesn't. Browsers treat local files and files served from web servers (even localhost
web servers) differently, although very similarly. One aspect of this is the encoding: When you retrieve a file from a web server, the process of determine what encoding the data is in is different from opening a local file.
How does this also affect interactions with other server ie. ajax requests?
This is one of the primary ways in which they're handled differently, and it even varies from browser to browser. A page loaded from a file://
URL has origin null
from a Same Origin Policy standpoint. Some browsers (like Chrome) disallow Cross-Origin Resource Sharing entirely for origin null
, even when the server you're trying to talk to has a wide-open CORS policy (*
). Others (like Firefox) allow origin null
to match the wildcard.
In general, for best results, ensure that your development environment matches your deployment environment in the important ways. That means doing your development using a web server process rather than local files. Most IDEs will happily provide that process for you; if not, Apache or Nginx aren't hard to install.
Related Topics
Close Window Automatically After Printing Dialog Closes
Get a Value from a Observable<Value> Object
How to Hide the Address Bar on Iphone
How Exactly Use and Update the Global Variables in React-Native
Reload Content in Modal (Twitter Bootstrap)
Efficiently Replace All Accented Characters in a String
Discord.Js Deletemessage() Doesn't Work
Convert 12-Hour Hh:Mm Am/Pm to 24-Hour Hh:Mm
Fetch - Missing Boundary in Multipart/Form-Data Post
Determine If String Is in Base64 Using JavaScript
How to Access External Json File Objects in Vue.Js App
How to Prevent User to Enter Specific Key Using JavaScript
How to Convert All Elements in an Array to Integer in JavaScript
Converting Byte Array to String in JavaScript
Append Data to Json Array Issue