How can I serve only statics files on Google App Engine? - html

I wrote a game with HTML5. Locally, it only works if I run:
python -m SimpleHTTPServer
And then I open localhost:8000. So, just a bunch of .html and .js files won't work. I want to put my game online and because of this Github (Pages) is out of question, because it won't work.
This is the part of the code I need a server for (I do realize that localhost:8000/res/ won't work on App Engine, I'll need to change the address):
var mapFile = new XMLHttpRequest();
var self = this;
mapFile.open("GET", "http://localhost:8000/res/map" + mapNumber.toString() + ".txt", true);
mapFile.onreadystatechange = function() {
if (mapFile.readyState === 4) {
if (mapFile.status === 200) {
self.lines = mapFile.responseText.split("\n");
self.loadTilesFromLines();
}
}
};
mapFile.send(null);
So, I heard that Google App Engine would work, it supports Python and is very popular. Now, I don't need anything like what they have in their documentation (which is pretty well-written):
import webapp2
class MainPage(webapp2.RequestHandler):
def get(self):
self.response.headers['Content-Type'] = 'text/plain'
self.response.write('Hello, webapp2 World!')
app = webapp2.WSGIApplication([('/', MainPage)],
debug=True)
All I need is a SimpleHTTPServer that allows me to open my index.html on my-app.appspot.com.
I did try the example and got it up and running, but I can't force my browser to open index.html or src/ or even res/.
So, I am not even sure if Google App Engine supports what I'm trying to achieve here. The documentation just focus on building applications that use Python and all I needed with Python was a SimpleHTTPServer, which I don't think I need with App Engine.

Yes it is very doable on what you're trying to achieve here. Since you just want to serve static files it is very simple and you don't need to include any Python code.
Let's assume that you have this following structure:
└── my-game
├── app.yaml
└── static
├── index.html
├── js
│   └── script.js
└── res
└── map.txt
This app.yaml should look like this:
application: my-app
version: 1
runtime: python27
api_version: 1
threadsafe: yes
handlers:
- url: /
static_files: static/index.html
upload: static/index.html
- url: /
static_dir: static/
After you're going to install the Google App Engine SDK (if you didn't do that already), you will be able to run the dev_appserver.py command from your terminal. If you have the above structure try to run it using the following:
$ dev_appserver.py /path/to/my-game
If everything went smoothly you'll be able to see your index.html on http://localhost:8080, the map.txt on http://localhost:8080/res/map.txt and you should be able to figure out the rest.
Note that you could still run your application using the python -m SimpleHTTPServer from within the static directory and test it on localhost:8000.

Related

How to link index.html (gcloud app deploy)?

How would I link the index.html? I am deploying in Google Cloud Platform (using gcloud app deploy). This is so I can make the website with the html. I need a example with a html provided here (any of three html is fine). The index.html is where someone navigates to the root page of your website, what the person sees when clicking or going to the link of the site. My html specifically is just a "hello world" type website. And my files are located in my project (website-deploying-gc). This is the final step to create the site. Here is where the html is located (after getting into the files):
jinthemix#cloudshell:~ (website-deploying-gc)$ ls
app.yaml IMD233 Files README-cloudshell.txt README.md www
jinthemix#cloudshell:~ (website-deploying-gc)$ cd www
jinthemix#cloudshell:~/www (website-deploying-gc)$ ls
Mixs
jinthemix#cloudshell:~/www (website-deploying-gc)$ cd Mixs
jinthemix#cloudshell:~/www/Mixs (website-deploying-gc)$ ls
'Mix 1 (1)' 'Mix 2 (2)' 'Mix 3 (3)' 'Mix 4 (4)'
jinthemix#cloudshell:~/www/Mixs (website-deploying-gc)$ cd 'Mix (1)'
jinthemix#cloudshell:~/www/Mixs/Mix 1 (1) (website-deploying-gc)$ ls
'hello.html (B) (L2).html' 'hello.html (T) (L3).html' 'hello (L1).html'
jinthemix#cloudshell:~/www/Mixs/Mix 1 (1) (website-deploying-gc)$ cd
jinthemix#cloudshell:~ (website-deploying-gc)$ cd
Here is a reference link as well, that may provide more information. The site also talks about the index.html. The index.html is basically shows "hello world" to anyone viewing the website: https://cloud.google.com/appengine/docs/standard/python/getting-started/hosting-a-static-website
Any help is appreciated, thanks
I see the link you are using points to deploying a Python 2 application in App Engine. Take into consideration that the programming language itself (Python 2) is no longer supported by the community since at least January 1st 2020 so I'd strongly suggest you to use a similar tutorial for Python 3 (find the link here).
In order to serve static files (e.g. an index.html file that you are referring to) App Engine can handle URLs by executing application code (in the specific tutorial you are following this will consist on modifying your Flask application to serve a static file, as e.g. is described here), or by serving static files uploaded with the code and taking advantage of the handler element defined in your app.yaml file.
The comments within the app.yaml file on the tutorial I linked for Python 3 explain this in a very understandable way:
runtime: python39
handlers:
# This configures Google App Engine to serve the files in the app's static
# directory.
- url: /static
static_dir: static
# This handler routes all requests not caught above to your main app. It is
# required when static routes are defined, but can be omitted (along with
# the entire handlers section) when there are no static files defined.
- url: /.*
script: auto
Notice that you basically define a URL and use an element such as static_dir or static_files to serve that file when a customer lands that specific URL in your application.

gh-pages with static html can't access file when it exists

The index.html home page displays fine, however any any link will throw a 404.
The static website has folder with html in it, index link to these html with the correct path, but displays a 404.
When clicking on this link, I got a 404.
however the file is present as you can see here .
I am really banging my head on a simple html pb, which is frustrating.
I ran into this problem myself and finally discovered a simpler solution. The problem is that Jekyll ignores all files that start with _. The simple solution is to add a .nojekyll file to your docs dir.
My docs script looks like this:
"rimraf ./docs && typedoc src/ --out docs --mode modules --module commonjs --target es6 --excludePrivate && touch ./docs/.nojekyll && gh-pages -d docs -t"
touch is an npm module that creates the file and the -t flag on gh-pages is necessary to have that dot file uploaded.
Alright I though I might just answer my own question here.
Github Page doesn't allow several static HTML files.
This is not very clear to be honest on their docs, but the solution is quite simple :
Assuming your local static docs works correctly, just follow these steps :
install jekyll
gem install jekyll bundler
add a file _config.yml
in your docs or on the root of your gh-pages branch with this content:
auto: true
execute jekyll serve
And test if this works ok on the url outputed in your console
add _site in your .gitignore
push and bingo!
If you are like me using typedoc to compile typescript into nice documentation, you will run into trouble.
Because Jekyll automatically exclude from the build any files starting with _, and typedoc generates ONLY that, I wrote a simple yeoman generator that does all the replacement for you.

Deploying app based on Polymer starter kit

Prior to Polymer 1.0, I was using python simple http server and/or apache. When I came across the starter kit app, I started using the built in browsersync, through gulp serve.
Is that appropriate for hosting on Heroku?
I added:
"scripts": {
"start": "gulp serve:dist"
},
to my package.json, and it attempts to run. When I try to load the page, I get:
heroku[router]: at=error code=H10 desc="App crashed" method=GET
Heroku's guides are based on traditional node apps, and the Procfile or "script" in package.json, is typically just node app.js.
I feel like I'm missing something trivial. Any help would be greatly appreciated!
I revisited this recently. I found a pretty simple solution.
I added a "serve.js" (name not important)
Contents:
var express = require('express');
var app = express();
app.use(express.static("" + __dirname + "/dist"));
app.listen(process.env.PORT || 5000);
Then, within my package.json file I added:
"scripts": {
"start": "node serve.js",
"postinstall": "bower install && gulp"
},
The node serve.js could also be in the Procfile. Heroku should recognize and use it either way. postinstall is used to get bower components, and run the default gulp build task.
https://devcenter.heroku.com/articles/nodejs-support
if you are running gulp.vulcanize like in the 'serve:dist' task in your sample app, and also are looking to host the ./dist folder then heroku is NOT a good idea. H has no buildpack to accept a flat folder like the vulcainzed ./dist and to simply host it with nginx / apache.
buildpack list has nothing 4 polymer, although using a node wrapper appears to be an option with Heroku/polymer. IMO this is not the best because the node layer is extra cruft when trying to simply push that ./dist folder to the web.
There are hacks to make it work on H (links below) or by using the Heroku API to simply push a folder, but IMO you could do alot better.
I would look hard at alts like AWS or to github pages B4 heroku.
Note that i quickly tried github pages using the ./dist folder and using
var ghpages = require('gh-pages');
...
gulp.task('deploy', ['default'], function(cb) {
ghpages.publish(path.join(process.cwd(), 'dist'), cb);
});
on github and it FAILED due to some router issues with #! links. So i decided to just push an unvulcanized version to the web. ( not the best )
Be certain that you can host ./dist locally WITHOUT using the 'gulp.serve' task before deciding to push the ./dist folder somewhere on the web. You may see options for pushing 'gulp.serve' and npm with your project but it makes NO sense to me to include all that extra cruft when vulcanize is trying so hard to just produce that ./dist folder!
Be certain in stdout that the vulcanize task is actually finishing....
[15:59:59] Starting 'vulcanize'...
[16:00:00] 'vulcanize' all files 436.07 kB
[16:00:00] Finished 'vulcanize' after 1.14 s
Depending on how you extend the starter kit, 'vulcanize' can fail pretty silently so that you go on to other matters with hosting the ./dist folder without realizing that 'vulcanize' failed.
Is it possible to upload a simple html and javascript file structure to heroku?
https://www.npmjs.com/package/gulp-gh-pages
How to deploy node app that uses grunt to heroku
http://www.sitepoint.com/deploying-heroku-using-gulp-node-git/

How can I set up Fabric.js?

I just started looking into using fabric.js, and I'm finding very little resources on how to install it in my site. All I can find is a single stack overflow question that references the file "all.min.js", which upon a quick search of the unzipped file no longer exists.
I've scoured the internet for the past few hours, and it's looking like it is supposed to be common knowledge! I'm still stuck though.
Which file should I link to in my HTML?
Edit: Just to clarify, I downloaded a large ZIP file off fabric.js's github. I was confused as to which file I should link to to include the library.
A more modern fabric.js hello-world using webpack (state of 2018)
Advantages of this method
fabric.js does not need to be committed to version control
Given that all dependencies are in package.json only two commands are required to get up and running from scratch with your project: git clone <url> and npm install
Updating to the latest fabric version is as easy as running npm update
Not only the fabricjs code, but also your own code will be minified.
and it gives you all other goodies provided by webpack
Assumptions
This assumes...
... that you have the NPM >= 5.2 (if I recall correctly, this is needed by webpack).
... that you have access to a CLI shell to run the npm and webpack commands.
... that the npm binaries are on your path. By default: $HOME/.local/bin on *nix systems
NOTE: You will not need superuser/root access to the system if you already have npm available.
Preparations
First, initialise a new npm project:
mkdir my-fabric-project
cd my-fabric-project
npm init -y
Then install webpack into that folder (we will need this for later):
npm install webpack webpack-cli --save-dev
Also, install fabricjs as this is our dependency for our project:
npm install --save fabric
The two npm install commands above will populate our package.json file containing production (fabricjs) and development (webpack & webpack-cli) dependencies.
NOTE: When installing webpack, I got errors regarding cairo at the time of this writing. But it seems they are harmless. cairo is a graphics library and I assume this is only needed if you want to run fabricjs in a nodejs process. Browsers are already capable of rendering graphics so when running fabricjs in client-side code this is a non-issue. Otherwise you may need to install required headers. I assume (not tested) that this error can be solved by installing the package libcairo-dev on debian-based systems.
The Code
Now we have everything ready to get coding.
Create two folders src and dist, so our source tree becomes:
.
├── node_modules
| ├...
| └── ...
├── dist
├── package-lock.json
├── package.json
└── src
2 directories, 2 files
Create a HTML file index.html inside the dist folder with the following contents:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World FabricJS</title>
</head>
<body>
<canvas
id="myCanvas"
width="400"
height="400"
style="border:1px solid #000000;">
</canvas>
<script src="main.js"></script>
</body>
</html>
And also a javascript index.js in the src folder with the following contents:
import {fabric} from 'fabric';
function run() {
let canvas = new fabric.Canvas('myCanvas');
let rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20
});
canvas.add(rect);
}
run();
This will give us the following directory structure:
.
├── node_modules
| ├...
| └── ...
├── dist
│   └── index.html
├── package-lock.json
├── package.json
└── src
└── index.js
2 directories, 5 files
You may notice that dist/index.html references a file called main.js which does not exist. We need to run webpack to create it:
npx webpack
Your code should now work. Either open dist/index.html manually, or run a mini-web server from the console to test:
(cd dist && python3 -m http.server)
That's it!
This should get you started with your project and also allow you to leverage the power of webpack to easily split your code. Good luck & Have fun!
Good To Know
The filenames dist/main.js and src/index.js are the defaults when running webpack without a config
webpack will create minified code in dist/main.js by default. This is because it runs in "production" mode by default. To change this, create a file named webpack.config.js with the following contents:
module.exports = {
mode: 'development'
};
You can use it running:
npx webpack --config webpack.config.js
All you need to do download the fabric.js from HERE and save it as js file named fabric.js, and create the html file suppose index.html with below content.
To run this example, these both fabric.js and index.html should be into one folder.
<html>
<head>
<script src="fabric.js"></script>
</head>
<body>
<canvas id="canvas" width="800" height="450" style="border:1px solid #000000"></canvas>
<script>
var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.selectionColor = 'rgba(0,255,0,0.3)';
canvas.selectionBorderColor = 'red';
canvas.selectionLineWidth = 5;
</script>
</body>
</html>
Option
You can download fabric.js in any format from HERE
Fabric follows a pretty traditional distribution layout.
You want to use files from the dist directory. fabric.js for development work and fabric.min.js for the live site.

How to build a completely static multipage website with BEM?

All tutorials I've seen so far describe how to create single page sites or just several bundles. Here is an example of a simple website navigation:
example.com/home
example.com/about
example.com/services
example.com/services/marketing
example.com/services/development
example.com/contact
Is it possible to build such a site with bem-tools, bemjson, bemhtml but without any serverside tech like node.js or php?
The build should include only a directory with final .html, .css, .js files and images per page and should be hosted on a static file hosting like Amazon S3. It should also be an oldschool static website, not a single page ajax site.
Is there any easy to use solution for this use case or should one create her own build process to collect the files from the bundle directories?
Good question, and the answer is - yes, you can :)
First of all, you need to clone project-stub repo and install dependencies:
git clone git#github.com:bem/project-stub.git
cd project-stub
npm i
./node_modules/.bin/bem make libs
Now you have configured project stub to develop site with bem-tools.
Page index is included.
Let's create page about:
./node_modules/.bin/bem create -b about -l desktop.bundles/
This command creates file desktop.bundles/about/about.bemjson, which represents your page in BEM terms.
You can see this page when you run
./node_modules/.bin/bem server
and open http://localhost:8080/desktop.bundles/about/about.html in browser.
Read more: http://bem.info/libs/bem-core/1.0.0/bemhtml/reference/, "The Input Data: BEMJSON" chapter.
To get final css with rigth image path's, you need to install cssrb package:
sudo npm i cssrb -g
And to get final build directory, you need to put bem-static-build.sh file in root of your project and run it:
wget https://raw.github.com/alexbaumgertner/bem-static-build/master/bem-static-build.sh
sh bem-static-build.sh
After builder process ended, you can find static site in desktop.bundles/merged/build folder:
NB:
If you have content images on your page, you must put them into desktop.bundles/merged/img folder and make symlinks to all pages folders:
ln -s $(pwd)/desktop.bundles/merged/img $(pwd)/desktop.bundles/index/img
ln -s $(pwd)/desktop.bundles/merged/img $(pwd)/desktop.bundles/about/img
and etc for all pages. This actions are needed because bem server shows a page relative to its folder and with symlink you can write image src in about.bemjson and all pages like this:
{
block: 'user',
content: [
{
elem: 'avatar',
tag: 'img',
attrs: {
src: 'img/dypsilon.png' // relative way
}
}
]
}
and it should work!
Any questions are welcome!