I've cloned the PerfectTemplate project and am using it to serve up html as follows…
import PerfectHTTP
import PerfectHTTPServer
var routes = Routes()
routes.add(method: .get, uri: "/test") { request, response in
response.addHeader(.contentType, value: "text/html")
response.setBody(string: """
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="Welcome">Hello</div>
</body>
</html>
""")
response.completed()
}
routes.add(method: .get,
uri: "/**",
handler: StaticFileHandler(documentRoot: "./webroot", allowResponseFilters: true).handleRequest)
try HTTPServer.launch(name: "localhost",
port: 8181,
routes: routes,
responseFilters: [(PerfectHTTPServer.HTTPFilter.contentCompression(data: [:]), HTTPFilterPriority.high)])
I'm compiling and running with Xcode, and http://localhost:8181/test is returning the html as expected.
The problem is the location of the external css file. As far as I can tell this should be in a folder called webroot, but where should that folder be when running locally?
For reference, I'm coming at this as an iOS dev, so my knowledge of web development and server config is limited.
Update
Per a suggestion on the Perfect Slack group, I added the css file to the project folder (the same folder as Package.swift), and set the Working Directory of the scheme $(PROJECT_DIR) - but I’m getting a 404 trying to load http://localhost:8181/style.css
With help from the Perfect Slack group, I found a solution. The missing piece for me was the webroot folder. I'd assumed this was some kind of alias, but it turns out that you do need to create an actual folder called webroot. So…
Set the Working Directory of the scheme to $(PROJECT_DIR)
In the project folder, create a folder named webroot and add the css file to that folder. It should look like this…
I'm sure all the seasoned web devs are laughing at me right now!
Related
My project isn't working when I name a folder 'components', if I named any other name('component', 'pasta', 'templates') it works. The route names are fine, this ONLY happens when the folder it's named 'components'.
I'm using lit-element in this project
It works
Doesn't work
Steps to reproduce
npm i lit-element
touch index.html // Create a HTML file in the root folder
mkdir components // Create a folder where JS components will be
touch main.js // Create a component file
cd ..; polymer serve // Go back one directory and run the project
import { LitElement, html } from 'lit-element';
class MyElement extends LitElement {
render() {
return html`<p>template content</p>`;
}
}
customElements.define('my-element', MyElement);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="module" src="./components/main.js"></script>
<title>lit-element code sample</title>
</head>
<body>
<my-element></my-element>
</body>
</html>
NOTE this snippet code doesn't run in StackOverflow, create the project and reproduce it.
Change the name of the 'components' folder to any name you want, then change the route in the index.html file.
As you can see from the log, polymer serve reserves a namespace starting with components/ for serving reusable components (a legacy of Polymer's old bower_components dependency management). This prevents your components folder from being served correctly. The namespace should be configurable through the --component-url option, although it doesn't seem to work.
You can either
use polyserve directly and change the component url:
$ npm i -g polyserve
$ polyserve --component-url mycustomcomponenturl
use another dev server: open-wc's es-dev-server is a great alternative, also cited by the lit-html docs.
I am currently new to Tornado and I am trying to render my HTML page using Tornado. The issue i am having is getting Tornado to allow the css file to be applied on my html page. When i run the html alone without a web server the css file is automatically incorporated and applied. Using Tornado, the html content is fine, but the css simply refuses to apply.
I've tried using the full path of both my files through the href and tornado, also I've tried placing them outside of the .py script running tornado but i get the same errors
Python Tornado code
import tornado.web
import tornado.ioloop
port = 8080
class basicRequestHandler(tornado.web.RequestHandler):
def get(self):
self.write("Hello world!")
class staticRequestHandler(tornado.web.RequestHandler):
def get(self):
self.render("C:/Users/user/Desktop/html/Project 1/index.html")
if __name__ == "__main__":
app = tornado.web.Application([
(r"/", basicRequestHandler),
(r"/site", staticRequestHandler)
])
app.listen(port)
print(f"Listening on {port}")
tornado.ioloop.IOLoop.current().start()
This is the link inside my html code. I've tried full and relative paths(same folder) but none seem to make a difference
<link rel="stylesheet" href="C:\Users\user\Desktop\html\Project
1\styles.css" type="text/css">
<link rel="stylesheet" href="styles.css" type="text/css">
The error that appears on my chrome console is:
(1) Not allowed to load local resource:
file:///C:/Users/user/Desktop/html/Project%201/styles.css
C:\Users\user\Desktop\html\Project 1\styles.css is a file path on your system. This will not work because browsers and servers communicate through HTTP URLS.
To load the CSS file, you'll need to use its URL.
Try <link rel="stylesheet" href="/site/styles.css">. Please read the documentation of using StaticFileHandler to learn more about its usage.
I am trying to deploy a built Vue app on a web server NOT using the root path and my relative links are referencing the root. Has anyone successfully tackled this?
I have tried setting publicPath to "", "./", and "." with no success. My app is being deployed at mydomain.com/dev and my index file links look like <link href="css/my.css"> once built
vue.config.js
module.exports = {
publicPath: "./"
}
index.html
<link href=css/app.f262a66a.css rel=preload as=style>
<link href=css/chunk-vendors.d92c4b75.css rel=preload as=style>
<link href=js/app.384925b6.js rel=preload as=script>
I would expect that these links would try to load files from mydomain.com/dev/css/app.f262a66a.css but they are loading from mydomain.com/css/app.f262a66a.css and therefore I am getting a 404 response.
Any help would be greatly appreciated
Just try to set the publicPath in your vue.config.js like this:
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/dev/'
: '/'
}
See the documentation on that.
I was able to go around this by setting the public path via an environment variable. Doesn't totally solve the relative path issue, but at least it provides the correct functionality and is able to be controlled on an environment basis.
module.exports = {
publicPath: process.env.PUBLIC_PATH
}
This question is old, but there is no accepted answer, so I'll give it a try.
This fixed my issue:
In vue.config.js (at the root of your Vue's project directory):
module.exports = {
publicPath: '././',
}
I am beginner to NodeJS and facing problem in loading the CSS. Here is my code.
I am just creating a server running in 9090 port and loading the default HTML file.
var server = http.createServer(function(request, response) {
var html = fs.readFileSync('./FirstApp/HtmlPages/index.html');
response.writeHead(200,{"Content-Type": "text/html"});
response.write(html);
response.end();
});
server.listen(9090);
On Loading http://localhost:9090/ i am able to see the index.html html page but not able to see the linked css feature.(If i just load my index.html in browser i am able to see css feature but not through the server)
This is my simple HTML.
<html>
<head>
<link type="text/css" rel="stylesheet" href="./css/styles.css">
</head>
<body>
<h2 class="heading"><em>Login Page</em></h2>
</body>
</html>
CSS file
.heading {
text-align: center;
}
I can see below warning in browser console
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:9090/css/styles.css".
any help would be much appreciated
The problem is that you have a created a web server that only serves a single file, the index.html. It does not read any CSS file from the local file system, and it does not serve any CSS files.
You could analyze the incoming request and see if the path of the request‘s URL points to the CSS file. If it does, read the CSS file instead of the HTML file and return it with the response.
Here's a working, modified version of your code (assuming that styles.css is located in a subdirectory of the dir where your index.html is located):
var server = http.createServer(function(request, response) {
if (request.url.match(/^\/css\//)) {
var css = fs.readFileSync('./FirstApp/HtmlPages' + request.url);
response.writeHead(200,{"Content-Type": "text/css"});
response.write(css);
response.end();
return;
}
var html = fs.readFileSync('./FirstApp/HtmlPages/index.html');
response.writeHead(200,{"Content-Type": "text/html"});
response.write(html);
response.end();
});
server.listen(9090);
Please note: I would only do this for learning purposes, not for building an actual production web application. For that, I would use an existing HTTP server solution, for example Express.
I would suggest checking your file path is correct when linking to the css file. Try removing the . and have your path as /css/styles.css (but it comes down to ensuring that you have the correct path.
As a beginner, a common mistake might be that you forgot to save your css file after you made your edits.
Also, you should use the chrome developer tool (right click on page and inspect) to see if your css is already being applied to your html.
If you can show us the index.html code, that might help as well.
I am trying to create a website to upload a file to Google Drive from my website, but I have had a lot of trouble.
I have used this code:
<!DOCTYPE html>
<html>
<head>
<title>Save to Drive Demo: Explicit Render</title>
<link rel="canonical" href="http://samrobbins.125mb.com/googledrive.html">
<script src="https://apis.google.com/js/platform.js">
{parsetags: 'explicit'}
</script>
</head>
<body>
Render the Save to Drive button
<div id="savetodrive-div"></div>
<script>
function renderSaveToDrive() {
gapi.savetodrive.render('savetodrive-div', {
src: 'http://samrobbins.125mb.com/knowledgebase.py',
filename: 'Cat.py',
sitename: 'The electronic cat database'
});
}
document.getElementById('render-link').addEventListener('click', renderSaveToDrive);
</script>
</body>
</html>
But when I load it, it says there is Failed Upload HTTP error (6)
Is there any way to stop this?
http error 6 is could not resolve host name. Your server may be down or the data-src server may be down. Try later.
You are sharing from a google drive. the default visibility of a google drive doc is private. You should change this to public.
Check the box next to a file/folder and click the Share button at the top of your file list