I'm not very familiar with node.js, but I've created a website to learn about CSS, HTML, and JS and am now having trouble hosting it. I can run the command npm start just fine and then I see my site and all its pages at localhost:3000. However, when I try to upload the site using Github pages or Netlify I always get 404 errors. I think it's because my index.html file is in my views folder so it doesn't know where to look for the first page. I've tried moving everything out of views but this doesn't work, and I've tried making a "dummy" index.html with the following:
<meta http-equiv="refresh" content="0; url=/views/index.html">
which also doesn't work. I'm at a loss for what to do as I'm super inexperienced with this kind of stuff. How can I get my site hosted?
"npm start" only works locally in your machine because you have NodeJS installed. The browser doesn't know anything about npm, it only interprets JavaScript, HTML, and CSS. If you put your "index.html" in the root of your host, it will be found. I suggest you create a structure like a bellow.
github pages
|
|_ index.html
|_ css/
| |_ styles.css
|_ js/
| |_ scripts.js
Commit your changes to github and access your page in /github.io
Summary:
I have an html page that looks fine locally but when I deploy it to heroku a background image is missing.
What I've tried:
I'm currently using the property background-image: url(bg.jpg);
I've also tried image-url(bg.jpg) and asset-url(bg.jpg) (neither of these work locally).
What I've read:
From what I've read there are a few possibilities
set config.serve_static_assets = true
set config.assets.compile = true
I don't really understand how to set these? I keep seeing "production.rb file" referenced but I have no idea what this is? Can I set these properties from within heroku dashboard?
Currently I just push my code to GitHub and deploy from there. I'm new to Heroku and deployment in general, any help on this topic would be appreciated.
procfile
web: gunicorn app:app
file-structure
procfile
requirements.txt
app.py
templates
|- index.html
|- positive.html
|- negative.html
|- bg.jpg
I've resolved this question. I realize now that because this is a Flask app that it needs to be handled differently.
The following change will correct the error: change the file structure to put the image in a static folder (Flask knows to look for this) and then change the url call.
file-structure
procfile
requirements.txt
app.py
static
|- img
|- bg.jpg
templates
|- index.html
|- positive.html
|- negative.html
|- bg.jpg
and
background-image: url('/static/img/bg.jpg');
I'm not sure why this resolves the problem but it works!
I have a webpage running on a server. It loads some resources which are included with paths relative to the current root (e.g. /folder1/partial.html).
When trying to open the webpage locally for testing, I run into problems because my Windows C: drive is now considered the current root. How can I work around this without having to change all the include paths?
You can't.
However, you can change your paths to be relative to the file rather than the root. This way it won't matter if you open your page locally or on the server. For instance:
root
|
+-- partial.html
|
+-- some_folder
| |
| +-- another_folder
| |
| +-- some_file.html
If you wanted to reference partial.html inside some_file.html then it's relative path would be ../../partial.html.
In English, this is saying go up two folders and then look for the named file.
Using a simple web server such as python SimpleHTTPServer solves the problem.
I am using Yeoman to create a static website, which created a file structure like:
-app
index.html
-css
style.css
-js
script.js
Gruntfile.js
README.md
bower.json
package.json
I used filezilla to send this to my server (using bluehost) but nothing seems to be displaying? when I try to hit the website. (ex. whatever.com)
Is it because my 'index.html' lives inside the app directory? Should I only host my app diretory so 'index.html' is in the root directory?
I think you are on the right track with location of index.html but not quite. Your file structure should look like:
[document root]
index.html
- css (a directory of the root)
style.css
- js (also a directory of the root same as css)
script.js
Gruntfile.js
README.md
bower.json
package.json
Note in the above structure, there is no -app folder. You can test the above by using your web browser and pointing to http://yoursite.domain/app and see if that displays.
If that does not solve the issue, then you may be uploading to somewhere outside of the document root for your web server in which case you should find out where that is. Best place to ask about that would be on either https://serverfault.com/ or on https://superuser.com/. Good luck.
I am just getting started on developing a website. All I have at the moment is a HTML page supported by a couple of CSS stylesheets.
Can I create a WAR file from the HTML and CSS pages? How do I deploy them on to a Tomcat server?
Thanks.
There is no real need to create a war to run it from Tomcat. You can follow these steps
Create a folder in webapps folder e.g. MyApp
Put your html and css in that folder and name the html file, which you want to be the starting page for your application, index.html
Start tomcat and point your browser to url "http://localhost:8080/MyApp". Your index.html page will pop up in the browser
Here's my setup: I am on Ubuntu 9.10.
Now, Here's what I did.
Create a folder named "tomcat6-myapp" in /usr/share.
Create a folder "myapp" under /usr/share/tomcat6-myapp.
Copy the HTML file (that I need to deploy) to /usr/share/tomcat6-myapp/myapp. It must be named index.html.
Go to /etc/tomcat6/Catalina/localhost.
Create an xml file "myapp.xml" (i guess it must have the same name as the name of the folder in step 2) inside /etc/tomcat6/Catalina/localhost with the following contents.
< Context path="/myapp" docBase="/usr/share/tomcat6-myapp/myapp" />
This xml is called the 'Deployment Descriptor' which Tomcat reads and automatically deploys your app named "myapp".
Now go to http://localhost:8080/myapp in your browser - the index.html gets picked up by tomcat and is shown.
I hope this helps!
Here's my step in Ubuntu 16.04 and Tomcat 8.
Copy folder /var/lib/tomcat8/webapps/ROOT to your folder.
cp -r /var/lib/tomcat8/webapps/ROOT /var/lib/tomcat8/webapps/{yourfolder}
Add your html, css, js, to your folder.
Open "http://localhost:8080/{yourfolder}" in browser
Notes:
If you using chrome web browser and did wrong folder before, then clean web browser's cache(or change another name) otherwise (sometimes) it always 404.
The folder META-INF with context.xml is needed.
If you want to create a .war file you can deploy to a Tomcat instance using the Manager app, create a folder, put all your files in that folder (including an index.html file) move your terminal window into that folder, and execute the following command:
zip -r <AppName>.war *
I've tested it with Tomcat 8 on the Mac, but it should work anywhere
(Answers are pretty old, so here's what worked for me on Ubuntu 20.04 Tomcat9)
As root
cd /var/lib/tomcat9/webapps
mkdir -p myapp
cd myapp
cat >>index.html
<html><body>MY SIMPLE PAGE </body></html>
control-D # Press CONTROL+D to exit 'cat', create the file 'index.html'
systemctl restart tomcat9
In browser, use URL: http://127.0.0.1/myapp
(Of course, you can make page fancier, add CSS, etc., etc.)
I struggled a bit with older version of Apache Tomcat (7.0.68) running on Windows Server 2012, but this worked for me after a little bit of experimenting:
Create app folder with your static files (HTML, JS, CSS, assets, etc.).
Inside the folder create META-INF folder and add empty MANIFEST.MF.
Optionally zip the app folder and change the extension to .war.
Upload your app to Tomcat's webapps folder, either as a .war or just folder with your files.
Turned out, that META-INF with empty MANIFEST.MF file is enough for Tomcat to serve the app. No need to add WEB-INF or anything else (at least for my version of Tomcat).
Folder structure:
MyApp (folder)
|--index.html
|--app.js
|--app.css
|--assets (folder)
|--logo.png
|--...
|--META-INF (folder)
|--MANIFEST.MF (empty file)