How to run premade javascript files in a website? - javascript

I do have simple coding skills. I don't know too much about web development, only the very basics. I usually code in python and never have to use JavaScript or HTML.
So I made a game using Godot. And I exported my game with the html5 export.
It gave me
index.html
index.js
index.pck
index.wasm
favicon and PNG
I uploaded my game on itch.io, and they just needed a zip file of the above, but now I want to host the game on my own website.
I want to know the both methods of running the code in a small box on the website kind of like how it plays on itch and a way of playing just the app on the whole web page.
Likewise, I did try to research this online, but currently what I lack is how to describe this issue? Because all I search is how to run index.html file or how to implement that HTML in another HTML.
Which as you can guess gave me varied results from which none of them solved the issue and I realized that describing my issue here would be the best thing to do.
Oh, and I'm not going to make only games, so please don't give an answer that works specifically for games.

As you code in python you should know that you can start a local web server in python for testing purposes.
You can start a server by running the command in the directory where all the files for game are located
python -m http.server 80
Where 80 is the port
And navigate to localhost:[port] in your browser
And to stop the server just press ctrl + c in terminal

Related

Would like to write a javascript that helps me to find documents in a folder

I would like to write a js for an offline website (located on a local Windows server or any other server). It's supposed to look for files like PDFs in several directories and display them as search result on the "website", which isn't a real website, since it's on a local server and not in the web. The PDF is supposed to open in the browser after clicking it. I already have this kind of search engine as a php file, which I wrote with some help from friends. I also want to share this site with other friends. Basically I'll send them the whole folder with the html - document (or the .php site), so they can use it to search for certain pdfs in the folder. Its like a offline wiki for medical research documents. But I don't want them to always install php on their local servers, so they can run my php-searchmachine, thus I need to write it new as a javascript. By google and stack overflow I came across this solution https://www.codegrepper.com/code-examples/javascript/find+file+in+directory+javascript but it seems like that this needs node.js, so all have to install node.js, which is similar to installing php, I guess (im not familiar with node.js). Also I'm not sure if node.js is running on a normal client or server, which is not a webserver.
How can I start with such a project? Is javascript the correct attempt to solve this?
Windows Search has the ability to search PDF contents when boosted by a PDF (index) iFilter, this means the user can search and find instantly a new search word or a saved search it took only a second to hand enter this search (actually took longer to save for double click next time) just for illustration I chose a word I knew was in one file and actually found it is also in two other PDFs.
The problem for your JS coding is how to use JavaScript to interface with Windows Search since using explorer I could not run that search on a remote server shared library drive (I could see their contents as per second screen but for search, had to pull a local library copy down to my documents) and that is where your JS skills come into play. Personally I would avoid JS and use a VLC method to share view via a remote Lan server or simpler invoke a plain text indexed local copy of remote files for download as and when required.

Looking for a technology/code in java or other maybe to sync files from browser or https

https://github.com/deanhiller/webpieces is a platform that you can write code in java without rebooting the server via it's DevelopmentServer.
Now, to avoid the cycle of fix code, deploy to cloud, test, fix more code, deploy to cloud to test, I would like to just sync changed files to the cloud container so that the cycle becomes
change code
test
no more deploying and since you are just uploading human changes, it's FAST. Now, webpieces is a webserver that hosts a website or json api or whatever. I am thinking of 2 ways of doing this but not sure the technology is there?
Go to webpage on the cloud server and input local source directories to monitor
Locally, just run a program webpiecesSync configuring source directories and the json api to hit on the cloud instance
Number 2 has an extreme advantage over #1 in that I can register for async file notification of changes so as you change a file, the sync uploads it to the cloud and webpieces DevelopmentServer just saves the file to the needed location and when you hit the webpage with the change, the DevelopmentServer does the work of recompiling when needed.
I am not sure #1 can even come close to #2, but if anyone knows of a technology there, javascript or whatever that could maybe do this, I am wondering if I could make a wizard in the DevelopmentServer sync plugin (if I had one) that would then just keep up to date with changes of the directories and grab those files(assuming the user gives it permission somehow). I am very lost if #1 is even feasible?
Any ideas/guesses greatly appreciated.
thanks,
Dean

RequireJS - Module name "wget" has not been loaded yet for context

I'm trying to run an HTML file with JavaScript inside of it. In the JavaScript I'm trying to run is a program called wget. It downloads information from a website. I used it on CMD and in a batch file to get data from an xml that is hosted locally on my computer. Now I am trying to run wget so it runs from an HTML file. (the panel.html for the twitch panel extension), however I have been having a time just making the thing run.
I have been fiddling around, and the issue I now face is when I try to run the HTML in Chrome web browser the inspector says, Module name "wget" has not been loaded yet for context.
Screenshots:
HTML:
Error from Chrome:
(Click image to enlarge)
Installed wget from cmd:
I tried to read this for hours, and I don't understand it at all. In fact I don't think the issue in the link is the same issue as mine, but this is what every search keeps coming up with. I don't understand the whole dynamic thing or why they are even using the word "dynamic" for. It just seems like they can't use require because it doesn't work against paths, however I am not trying to define a path. I just want wget to work from this HTML file. I'm annoyed that I can't find anything on this exact problem. Every problem I have seen like this doesn't have a basic example of var wget = require('wget');
I just need what's in my JavaScript or HTML script tag to work.
I downloaded the require.js file and put it into the HTML as a script tag. From here it should just work. I already downloaded wget from cmd so it's on the computer somewhere. I also put the .exe in the same folder as the .html and the require.js.
Also I read somewhere that another reason this doesn't work is because wget is "loaded" or something like that. In that case can someone tell me how to "load" wget into the HTML or JavaScript first so that this error goes away? The basic wget example I found online is:
Here is the HTML file:
I'm not using a path, I just want wget to work from JavaScript. The wget example shows that it uses require. If I don't need require then please provide an example of how I can use wget in JavaScript without require or how to make this error go away.
I've been trying to figure out the best way to get the status information from my VLC player and put it into an HTML file so I can use that as a Twitch extension on my Twitch channel. VLC media player has a status.xml when you run it as a http server. I can only access the localhost:8080/requests/status.xml from a browser because it has basic authentication where I have to put in my user name, so I use wget to put in my password and download the status.xml back to my computer as another copy that isn't setup with authenitcation. Then I can use that download status.xml's information to post what music is playing on my VLC player. The problem is I need wget to pull the information from the localhost:8080/requests/status.xml file from the html file so that whenever its ran, the status.xml gets update with the new information and this the html will post the most current thing playing on my VLC player.

How to load common javascript files in development and on web server not using relative path?

I am a newbie, but I have spend the last 2 days reading so may things on this, and the more I read, the more confusing it gets. Not able to find one simple instruction or example to follow, or a simple and complete answer of this very important problem.
I simply want to include a common javascript file using src=. Then when I copy this tree to the server, I do not want to change anything in the code. I do not want to use relative path, since I do not want to edit the HTML file each time I change the tree layout. I want one solution that works when the tree is on the server, and also when it is locally on my PC during development.
I am not looking for something advanced or fancy. But a very simple solution. All what I want is to be able to use a common javascript file between all the HTML files I have in my tree.
The problem is that I do how to load it, since I can't use something like $HOME or ~ or an environment variable and so on, so that the same code works on my home PC, and also when I upload it to my personal web site.
To make it simple to answer this, I show the layout at my PC:
C:/public_html/common_files/common.js
C:/public_html/report/index.htm
On the server, say my site is called www.ABC.com, and I see, when I ftp to it, that there the public_html/ folder where I am supposed to put everything. So on the server, I created the same setup as above
/public_html/common_files/common.js
/public_html/report/index.htm
So far so good. Now the hard part.
How do I load common.js from index.htm file? I do not want to use src=../../common_files/common.js, why? Because I might want to change the layout of the tree, and if I move my report to another level, I do not want to edit it and keep changing the path and counting "../../../../.." etc..
I looked at many things, like ResolverURL but could not figure how to use it.
I tried
<script src="<%=Page.ResolveUrl("~/")%>public_html/common_files/common.js"></script>
But did not work. Remember, this has to work on the PC and on the server.
Here is my current index.htm.
<!DOCTYPE HTML>
<html>
<head>
<script src="../common_files/common.js"></script>
</head>
<body>
my site
</body>
</html>
To explain what I am looking for, assume for the moment that $HOME works in this env., which it does not offcourse, then I could have written
<!DOCTYPE HTML>
<html>
<head>
<script src="{$HOME}/common_files/common.js"></script>
</head>
<body>
my site
</body>
</html>
and this would have worked on the PC and on the server (well, at least it would work on a PC using linux). But the above is just an example of what I am looking for, on windows, I am not sure where $HOME is or how it is used if it is.
question: How to change the above src to load the common.js so that it works both on the PC and on the server but without using relative path?
Please do not give my more links to see, or partial answers, or ask me to download some commercial software to do this or complicated very advanced commands. This problem is so basic and the solution should be simple to follow.
By the looks of it, you seem to run your files locally on your PC. Try installing a server on your PC instead, to replicate the structure of your server. Something like XAMPP would do. On your server, the root of your domain would be the public_html. On a XAMPP setup, that would be the htdocs folder.
If you move files that much, then consider a location from the root of the domain, like a "styles" and "scripts" folder.
public_html/
'-- scripts/
'-- styles/
'-- everything else
Then load them with a leading /. The leading / means from the root of your domain.
<link href="/styles/your.css" type="text/css">
<script src="/scripts/your.js"></script>
<!-- similar to: -->
<link href="http://yourdomain.com/styles/your.css" type="text/css">
<script src="http://yourdomain.com/scripts/your.js"></script>
To prevent the comments turning into a very long conversation, I'll try to answer with some extra information.
Firstly, the term "absolute path" refers to the complete path of the file, as compared with the web root.
When you open files without an independant web server, the web root is the root of the drive you opened it from (in Windows this will usually start with the drive letter, but it can also just start with a slash).
This means, that unless you duplicate your entire drive to the hosting company (bad idea) you will usually need to run a web server to provide a web root that isn't the root of the file-system.
I understand that solutions such as XAMPP (which is awesome) are probably overkill if you only want to serve static pages (html, js, css, images etc.) that don't require any server-side processing, especially if you're running it on an aging laptop!
I've written (in Go) a very simple web server consisting of a single executable, around 3 or 4 MB in size, which will serve everything out of a folder named www on http://localhost by default. It also has command line switches to change the port from the default of 80, and to listen on more than just localhost. See http://github.com/Intermernet/ssws for details.
You can download the 64bit Windows version directly from https://github.com/Intermernet/ssws/blob/master/bin/windows_amd64/ssws_windows_amd64.zip?raw=true . If you require a 32bit version, tell me and I'll compile one for you, upload it and send you the link.
This should be saved somewhere on your local computer (Documents\WebDev or wherever) and then you just need to make a www folder in the same folder, and copy your website files into the www folder.
When you start (double-click) the exe file it will start serving your site files on localhost by default. If you don't want to start the server manually, put it in your Startup folder.
This will allow you to edit the files under the www folder and just refresh the browser to see the changes immediately.
Doing local web development without a local web server is possible, but has, as you've discovered, many pit-falls.
I hope you do manage to get this happening as I'd hate to see you lose faith or confidence in web development. These "sys-admin" tasks aren't really what programmers want to deal with, but sometimes they have to!
Also, when you get to the stage of trying to write dynamic server based code (PHP, Ruby, Python, Node.js etc.), you'll almost certainly need to ditch my simple server, and go with something like XAMPP.
Good luck!

making exe form HTML and Javascript

I was wondering I have PHP based server side stuff that accepts ajax requests and sends back JSON for JS. And I have HTML and JS based "client" now I would like to create exe(windows aplication) that would look the same as the "client" in browser but without browser. Preferably somehow grab that HTML and JS and "compile it" to regural client that would still send out AJAX calls and procesing JSON data.
Edit:
To clarify things:
Server(on webserver) is PHP procesing incoming AJAX calls and diplaing JSON as result.
Client(what I want to convertt to exe) is HTML and JS(Jquery) page(application).
I want for user to have option two to dowload client for windows so he/she dont have to use browser.
With https://electron.atom.io/ from Github you can develop Windows, Mac and Linux applications with Javascript, Html and CSS. You can also build mobile application with your web development skills. https://cordova.apache.org/.
You can use Electron, but if you just want something quick and easy to use, try Scriptonit. It's exactly for this kind of use. (Check out the documentation and the examples to see if this is the one for you.)
It's basically one exe plus a few sidecar files in a folder called app/, then it just works like a local browser without the frames & head. Also, it can access local files and run OS commands, even capture their output.
Side note 1: Yes it's mine, as you can see on the link - but no, that's not why I'm recommending it
Side note 2: It's 0.9 so it's not perfect, let me know if it misbehaves.
I don't think you can make a desktop application with markup languages. but then am also a newbie in this stuff but what I think you need is to develop a GUI in a programming language like java for example Swing docs.oracle.com/javase/tutorial/uiswing/ to mimic the apearance of your webpage. Then connect to your server by socket programming.

Categories

Resources