Running complex web apps locally - javascript

I downloaded a chat template online called shout. When I upload the chat template to heroku, it works fine. However, when I simply doubleclick its index.html in my local browser, it doesn't work. The page refreshes every milisecond. Is this an error specific to what I downloaded, or this is a common phenomenon? If so, is there a way around it?

You need to start a local server to do the http requests.
If you are on a PC download mamp:
http://www.mamp.info/en/
If you are on OSx check out tutorials by the coolest guy on the planet blog:
http://coolestguidesontheplanet.com/get-apache-mysql-php-phpmyadmin-working-osx-10-10-yosemite/

Nothing is wrong with your browser or computer. Based on the language of that chat template, you need to run a server on your local machine to test your app in localhost environment. Most of the popular languages like PHP, Java, ASP, etc run fine on XAMP and WAMP. Just google for one of them, install and voila, you have a server running. Then you can open the index.html as usual and get it working like on Heroku.

Related

How To Run a Flutter Web Application Offline?

I got a problematic assignment from my employers.
I was given the task of developing simple software that will run strictly on Google Chrome,
without attempting to connect to the web (Security reasons).
I know flutter development and I feel comfortable with the sdk.
How should I develop a web app that can be deployed using a usb stick?
Looks like PWA can be an option, but the documentation is lacking in detail.
The system does not have the ability to run a local web server.
The Flutter app must be able to work with JS libraries, I intend to use jsQR.
service workers and indexedDB could help you for develop offline route app and offline api.
mdn docs for service workers
I'm not sure that this will fit your particular case: you say that the system can't run a local webserver, but what if you provide the webserver along with your software?
I just discovered get_server: you can find it here. It aims to allow developers to host their own HTTP server by using only flutter, without resorting to external tools or other coding/scripting languages. It allows also (and that's the relevant part) to wrap your flutter web app and make it run on local network.
For now I only tried with a very simple example, but it seems to be working. These are the steps I took:
create a new flutter project: since I needed the webserver to run on Windows, I had to get flutter ready for that (see here for help)
add get_server to the new pubspec.yaml
run flutter build web on your flutter web project, and copy the build/web output
folder in the root folder of the new project (I renamed the folder while copying since flutter might change the content of the web folder)
delete all the content of lib/main.dart
paste this (this the actual content of main.dart)
import 'package:get_server/get_server.dart' as gs;
void main() {
gs.runApp(
gs.GetServerApp(home: gs.FolderWidget('folderName')),
);
}
folderName is the name of the renamed folder containing the flutter web app build.
I ran this on Windows 'device' from AndroidStudio, and my original flutter web app was reachable at localhost:8080 (for now I just used the default options of get_server). I also got the webserver (empty) GUI as a white window: I guess that can be useful for some information regarding the server itself, although, if that windows closes, localhost:8080 becomes unavailable.
But, once released, you should be able to just run the executable from the USB stick, and then connect to it with Chrome.
PS: after some time using GetServer, I had to switch to other packages because of not-so-good docs and support. Now I'm using shelf, but also Alfred is a notable mention.

Play game developed with HTML5, CSS and JavaScript without an internet connection

I have developed a game using the technologies mentioned above, however I would like the game not to need a web server to play it, but to run as if it were a desktop application.
I have read that with node js you can create a local web server and with that to run the game, but I don't know how to achieve it.
The idea is that the game has an icon on the desktop and after executing it, it can be played, that is, everything is integrated and the person who has the game does not need to download external programs such as xampp.
Final note: is this possible for smartphones?
Your best bet is ElectronJS, it is a NodeJS library that lets you package browser code as a desktop app. It works for macOS, Linux, and Windows.
Website: https://electronjs.org
Edit: Also once the app is packaged and in your computer you won’t need an internet connection. Final note, it turns it into an actual app so like app for macOS and exe for windows. So they won’t need a web server on their computer to run it.

GUI does not show up in GAE environment but works fine in my local environment

I'm working on a side project to implement a simple web game and want to host it on Google App Engine(GAE). I've done a version, and tested it my local machine(Ubuntu 14.04) to make sure everything's fine. Then, I deploy to GAE but it just show me a blank page. I use inspect in Chrome browser and found the page was loaded, but it just behave differently with my local environment.
I uploaded my source code to github. Could someone also using GAE could help to check anything weired?
Regards,
Adam

How to use node.js on host server?

I need your help regarding node.js. I just finished a course and I want to run my code on a web hosting.
The problem is, that when I upload it per ftp, I won't see it as website (even though it has html tags in it) but as code. Is it because the web hosting isn't compatible with node.js? Or is there anything I should do beside requiring express?
Is there anything I should install or do?
The code works totally fine if I go through localhost.
Thank you a lot in advance!
TheGabornator
Is it because the web hosting isn't compatible with node.js?
Yes.
Is there anything I should install or do?
If your only access to the host is via FTP or some web based UI, then you almost certainly need to change host. You're unlikely to have a host which lets you run Node.JS applications unless they offer you full shell access.
You need either a host which explicitly supports Node.JS or one which gives you full shell access and allows you to install software (such as a virtual machine or dedicated server).

webcam permission request doesnt work with local files

When experimenting some things with WebRTC. I looked at some examples and downloaded one from github. This wasn't working at all. At the right side of the url, there was an icon that indicated that my webcam was blocked. I clicked on it and said that it could use my webcam. Then chrome said to reload the page so i did that. And everything was the same as in the beginning. But when I loaded the same site through jsfiddle, it asked me with a pop-up for webcam access (the same way as every other application does) and that worked without a flaw. I tested some other browsers and it was all the same. Does anyone have a suggestion how to solve this problem? Thank you!
In order to use the web cam API, the file must be run from a server. When tyou run it from JSFiddle, it runs on a server, and thus works. It wont work if you run it as a file:/// in your browser, you must run a local web server on your computer and open the web app from there as http://
Running a server
Well running a webserver could be very complex, and requires knoweldege in using softwares like apache or ISS. Luckily enough, for develpers just seeking a simple, straight forward webserver for client side development, there are a couple of easy solutions:
Windows: use a software called WAMP - it automaticaly runs apache on your machiene and creates a folder on your computer in which you can put all the website content. http://www.wampserver.com/en/
Mac: simillar to WAMP, mac has a piece of software called XAMP that does pretty much the same thing. http://www.apachefriends.org/en/xampp.html
Both are pretty simple, but I think will be enough for simple front end development.
Chrome blocked my webcam on a site where I denied access multiple times (because I was testing).
You might need to visit chrome://settings/contentExceptions#media-stream and clear your settings.

Categories