How can I deploy my Phaser 3 game using firebase Hosting - game-development

I have been messing with Phaser 3 lately and would like to upload my game on a website. I know firebase offers hosting which is free so I wanted to try that out. I successfully setup everything on the firebase side using the firebase-cli. My phaser project uses a webpack config. When I test my phaser game locally using "firebase serve" it doesnt load the phaser code at all. On the other hand it works perfectly with "yarn dev". Has anyone had any experiance deploying a phaser app on firebase hosting? I did some reasearch but didnt really find out much about that topic. Any help is appreciated.
I setup firebase hosting with firebase-cli but when testing the game locally via firebase-serve the website doesnt load anything related to phaser.
EDIT: Also I get no errors whatso-ever which makes this even more confusing

Make sure you upgrade firebase to the blaze plan, which doesn't charge you but allows one to use third party libraries, otherwise it won't function because firebase will inherently block your third party requests api requests. the blaze plan will require a credit card or debit card on file, but if one is careful one should for all intents and purposes be able to operate free or close to free for a very long time.
firebase deploy --only hosting
firebase deploy --only functions

I found a solution to my Problem. Basically, I had set up my webpack wrong. For anyone looking to get into Phaser 3 Development, I'd suggest you check out Yannick's template that works with phaser+webpack+typescript. Here is the link: https://github.com/yandeu/phaser-project-template . It also is pretty up-to-date which is awesome!

Related

Make nconf (or other) config available to getServerSideProps... should I eject from nextjs cli?

First of all, I know that nextjs has support for .env files... and this is great.
However, I do not wish to write secrets to disk, ever, becuase they might wind up in a docker image in an amazon ecr repo and someday get read by a hacker... so I won't write them to a yaml or a .env file. This is our company policy: we integrate with hashicorp vault.
Now, my idea was to get these secrets, and store them in nconf. Nconf is just a memory-based storage engine for organizing config... nothing special. I had planned to eject from nextjs cli and use a custom express server (with typescript). Fine... I can do that. But it's a little bit of a pain because it seems like people aren't doing that as much as they did 3 years ago when I used nextjs last.
That is probably because they don't want to miss out on the automatic static rendering, and neither do I.
But basically what I want to do is to make a global variable available server-side in nextjs on every page: my nconf config. I want to run things on the server and not in the browser (no secrets in the browser).
For instance... what about middleware? Can I run middleware without setting up a custom express server and ejecting? I feel like we're going to need middleware at some point, we're make an enterprise app. So I'm kind of using nconf as a litmus test. But hey, if there's a good way to handle secrets, LMK.
Am I missing something in the nextjs docs? Are there events or hooks I can tap into? Or is the whole thing kind of "nextjs way or the highway?" Because in that case I will need to eject. (I grew up in Drupal, where there were tons of hooks and you could do what you needed to with the right hook.)
Thanks for your help.

How to create a shopify app dev environment

I'm building an embedded shopify app and I struggle to test it as embedded app because it's veeeery slow. I started my app following the official guide of creating an app with node & nextjs and I'm still using both but i'm considering getting rid of nextjs and using just react since it feels veeery slow and so heavy for ngrok to transfer all the files to the shopify iframe...
What would you recommend to work smoothly with shopify when building an embedded app?
(I'm mostly working locally but I still need to often go check that it works well inside the admin & to use shopify-app-bridge library)
if ngrok is slow for you, i would suggest heroku for deployment and testing,
create new application at heroku, you can also connect it with your github and use automatic deploy when you push your code

Error deploying vue app using any type of deployment

I have only deployed a couple small apps before and I am still newer to deploying apps in general.
I created this app by following a course and have recently finished the project. The course did not provide instructions on how to deploy the app. I have used Firebase hosting a couple times and am also somewhat familiar with Heroku. Regardless, it all seems pretty straight forward after following documentation.
I first tried Firebase hosting since that is what I am most familiar with. Spent some time with that with no luck, then tried heroku, then netlify, then NOW. Every single one of them had issues without any real information on them.
NOW says deployement failed with no logs.
Firebase hosting doesn't seem to be logging any errors, it builds a blank page.
Netlify says page not found after deployment and Heroku was something similar.
I am 100% open to getting this simple app deployed using any approach at all (preferably the easiest one).
Since I am following documentation and there doesn't seem to be any errors being logged, I'm completely stumped and am not sure what to do.
I realize I might not be providing the most helpful information to solve this issue, although I do have my full repo here:
https://github.com/SIeep/austin-pizza
Would anyone be kind enough to look over my repo and see what the issue might be? Or even point me in the right direction?
Please let me know if I need to provide any additional information.
Thanks!
missing entry file or file path problem ?
Try to find out which stage the problem is at first.
Compare this and last successful Firebase Configuration(dependency path),
Compare this and the last build dist file (not detail code,just File structure)
compare webpack.config.js
(app can run well locally,so i think it wouldn't because of the problem with the app's own code)

How to separate debug and release builds with respect to their api destinations in React Native

Originally I ran a local server on my PC in order to make my django REST api available for my React Native app to reach out to through my computer's ip. So I had a base url hardcoded into my js network utilities as http://10.0.0.xxx:8000/api/ which I used as the basis for all my network calls. Recently I deployed my backend to Heroku so that I could demonstrate my app when away from my computer. So for now I just made a second hardcoded base url of https://my-cool-app.heroku.com/api/ which I manually flip back and forth between in my js code depending on if I want to use my local server (for debugging while devving) or the remote server for demonstration (and by "manually flip back and forth", I mean I literally change my code to point to one or the other).
I understand this is a terrible way to go about things and that I'm missing some major pieces to the puzzle that probably apply not just to RN projects but to most full stack projects where the frontend and backend are not hosted on the same server. I know I can look for the __DEV__ flag to see if I'm working in a debug or release version, but then would I have to keep two versions of the app on my phone somehow? Also, does it even make sense to keep my base urls hanging around on the front end, or should they be dispensed from the backend in some way instead?
I personally use :
https://github.com/zetachang/react-native-dotenv
for my environment variables like my backend api and other configs based on the env.
Since it's similar to many backend libs like django or laravel, i absolutely love this library for managing environment variables :)

Keycloak with Angular + TypeScript for iOS/Android

I have an Angular(2) + TypeScript application using Keycloak as the authentication/authorization provider,
would like to integrate Keycloak with NativeScript to make the existing web application cater to iOS/Android users.
could see Keycloak supports iOS/Android as listed here : http://www.keycloak.org/docs/2.5/securing_apps_guide/topics/overview/supported-platforms.html?408DD571-0042-4EBB-BC37-1F2966A56651=123451
Is there any NativeScript based plugin to integrate with Keycloak (could not find anything here : http://plugins.nativescript.org/ ) ? pointers for a possible solution would be of great help
Version:
tns --version
2.5.0
Looks like the answer is no. But I start playing around, and to create a plugin, we have basically two strategies:
Extend a pure OAuth client for nativescript. There is this plugin: http://plugins.nativescript.org/plugin/nativescript-oauth
Port the keycloak.js to Nativescript.
I like the second approach because there are more features build in keycloak, so my first try was edit the original code and remove the use of window and other API's that are not present in the browser. I quickly find out that keycloak.js code is a mess (at least to me), and I'm getting a bad time undestanding how to edit its 1258 lines. Because of that, I start a complete rewrite, highly inspired in the original. I'm actualy reading the code and trying to port the project piece by piece, reorganizing for test, and abstracting the use of browser API's to port for web and nativescript.
You can check the code here: https://github.com/atende/keycloak-js-universal but is not close to ready.
The problem is, I have no time to do it :-), but will get done eventually, because I need that too.
Is important to mention that I create a abstraction for Angular 2 that works using the keycloak.js for security, and porting the keycloak.js is strategic to make the library work for Angular 2 Nativescript, which is on my motivation to do it. You can check the project here: https://github.com/atende/angular-spa
Any contributions are wellcome ;-)