1

Whilst I'm coding I'd like to be able to see the HTML I've created, for example, I have a index.html which refers to a header navigation file.

Using jQuery, I can get this to work on the server side but I want it to work locally as well but I heard current versions of browsers have security which prevents it from working with local files.

Does anyone know of a browser or a setting or an alternative that will allow the reuse of HTML linkages to work locally as well as on the server side?

The code below (obtained from this answer) only works on the server side.

<html>
<head>
  <title></title>
  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
  <script>
    $(function(){
      $("#header").load("header.html"); 
      $("#footer").load("footer.html"); 
    });
  </script>
</head>
<body>
  <div id="header"></div>
  <!-- remaining section -->
  <div id="footer"></div>
</body>
</html>

Surely there's a better way that'll allow me to see my <header /> and <footer /> elements without having to deploy to the server after every update.

Sometimes I just want to test changes in navigation without deploying.

j08691
  • 190,436
  • 28
  • 232
  • 252
newbbbb
  • 21
  • 1

1 Answers1

0

TL;DR: It really depends on the language you want to use.

JavaScript:

The simplest way to create a static HTTP server is by using Express.js:

var express = require("express");
var app = express();
app.use("/", express.static("dist"));
app.listen(3000, function () {
  return console.log("Express: Listening on port 3000.");
});

Save that code in a *.js file, run it using node filename.js and visit localhost:3000 in your web browser.

If you don't have express installed, run the following command in your terminal:

npm install -g express

NOTE: If you don't have node or npm installed you can install them by following the download instructions on the project's official website.

Python(3):

The Python standard library comes a module called http.server which you can use to create a virtual host for your project.

First you'll have to cd into your project directory, like this:

cd ~/path/to/your/project

Then run the following command:

python3 -m http.server

When you're done, open your web browser and visit localhost:8000.

If you'd like to change the port you can use the following command:

python3 -m http.server 7000

Warning: http.server is not recommended for production because it only implements basic security checks.

Python(3) Flask:

If you'd like to go all out and use back-end a web framework, you could create a Flask app by saving the following code in a *.py file:

from flask import Flask, render_template
app = Flask(__name__)

@app.route("/")
def hello_world():
    return render_template("./path/to/your/template.html")

app.run(debug = True, port = 8000)

Then run the script using python3 filename.py and visit localhost:8000 in your web browser.

If you don't have Flask installed you can install it via Pip using:

pip3 install flask

Or you can install it via the apt package manager (if you're on Ubuntu or Debian), like this:

sudo apt install python3 python3-pip

PHP:

If you're using PHP, you'll have to install a lamp server and the simplest way to install this is to use tasksel, like this:

sudo apt update && sudo apt upgrade
sudo apt install tasksel
sudo tasksel install lamp-server

I don't know what language or OS you're using (and to be honest I can't keep guessing) so instead of writing a detailed answer as to how to install a LAMP server, I'll add a link instead, I'll also link a tutorial on how to install a virtual host.

INFO: How do I ask a good question?.

Good luck.

LogicalBranch
  • 3,582
  • 2
  • 16
  • 48