Typically I develop my websites on trunk, then merge changes to a testing branch where they are put on a 'beta' website, and then finally they are merged onto a live branch and put onto the live website.
With a Facebook application things are a bit tricky. As you can't view a Facebook application through a normal web browser (it has to go through the Facebook servers) you can't easily give each developer their own version of the website to work with and test.
I have not come across anything about the best way to develop and test a Facebook application while continuing to have a stable live website that users can use. My question is this, what is the best practice for organising the development and testing of a Facebook application?
Try updating your hosts file (for windows users # c:\windows\System32\Drivers\etc\hosts) with an entry that will route all requests from your live domain back to your machine.
So 127.0.0.1 mywebappthatusesfacebook.com.
Then make sure that your app is running at the root of your webserver. # http://localhost/ Then goto mywebappthatusesfacebook.com in your browser and it should redirect right back to your local machine. Facebook won't know the difference. Hope this helps
The way I and my partner did it was we each made our own private Facebook applications, that pointed to our IP address where we worked on it. Since we worked in the same place, we each picked a different port, and had our router forward that port to our local IP address. It was kinda slow to refresh a page, but it worked very nicely.
You'll have to add both trunk and test versions as different applications and test them using test accounts. You may also use a single application and switch its target URL between cycles.
Testing FB apps is still a rather primitive process.
I generally setup a test application that is a complete copy of the production settings inside the FB development environment that uses an SSH tunnel to point to my development server. You can setup as many applications as you need inside FB - I generally have a development application, a staging app and production. Staging and Production are both on "live" servers rather than an SSH tunnel.
In your application you then use whatever language/framework/server tools are at your disposal to switch the FB configuration based on the server. In Rails, the Facebooker gem actually has built in support for different FB configurations.
Once all of that is done, testing is, unfortunately, still a matter of running the app within FB itself. I use Selenium to automate as much of this as possible.
Best way to do this:
Remove 'App Domain' from 'Basic Info'
Set website's 'Site URL' to : "http://localhost/" .
That simple.
(This only apply if you don't have a live system running in parallel to the test env. In that case get yourself another key.)
We have it setup much like Toby. A series of config files for each developer, that has the Facebook APP Id info (a different app for each developer), separate pages where the app is hosted, and git ignores the config files. We're LAMP with Code Igniter, and it's similar to Rails in that we can set the environment in 1 file, which points to the config with the Facebook constants.
Branching out into Selenium, using unit tests for model-testing.
For local testing we simply use a different app than for the server. In our case the Canvas-URL is set to localhost.local:8000.
You only have to make sure that when you use facebook connect that you type in localhost.local into the address field of the browser and not just localhost.
For testing a canvas or tab app it is faster if you use the 'open iframe in new tab' command of Firefox. This way the session and cookies from Facebook are preserved.
Another solution is NGROK
https://ngrok.com/
It opens a public tunnel to your local app
Example on my rails application by simply typing
./ngrok 3000
I get
http://630066fe.ngrok.com -> 127.0.0.1:3000
Related
I'm building a test suite for our Zendesk apps and testcafe works perfectly fine for our environments but isn't working with a local zat server. When a developer wants to test a change they'll build and run the app within a zat server which talks with the Zendesk instance specified and when ?zat=true is appended to the URL it then loads the local app changes. Testcafe doesn't appear to work with this as the changes don't load and I see no communication with the zat server. We need use a zat server as part of pull requests to test changes before they're merged with other environments. I know this is a rather specific issue but any help would be really appreciated.
This was previously using Zendesk app tools (zat) which is now deprecated. The zcli interface works with testcafe and is the currently supported implementation for Zendesk apps.
I've built a Microsoft Teams channel tab with SSO and I'm hosting the tab application which I've built with React via create-react-app.
The auth works well, and the app loads and runs.
But when I update my app on the web site, the Teams desktop client (Mac and PC) will sometimes cache the old app and will not pick up the changes. But then sometimes it will.
If I run the web client, it usually picks up the changes.
I've verified that I'm serving up new bundles with different names each time I update. But running the Teams desktop devtools I can see that Teams is asking for the old bundle, every time, so it's definitely caching the response from my app's URL.
I've read about the problems people have with the Teams desktop client has with caching Sharepoint content and not picking up content changes. I've tried the cache clearing techniques but they don't seem to work for this issue. And I can't reasonably have users do crazy cache clearing every time I make an update to the tab app.
What should I do? Some have suggested I need to update my version in the app manifest and redeploy to Teams -- that seems really brutal. Do I need to set some cache headers in a certain way to force the Teams client to pick up the new code?
Solution
Set a Cache-Control response header to no-cache (or must-revalidate) for your build/index.html.
Explanation
We had the exact same issue. Turns out it was because we cached our build/index.html.
According to the create-react-app doc, only the content of build/static/ can safely be cached, meaning build/index.html shouldn't be cached.
Why? Because files in build/static/ have a uniquely hashed name and are therefore cache busted on deployment. index.html is not.
What's happening is since Teams uses your old index.html, it tries to load the old /static/js/main.[hash].js defined in it, instead of your new JS bundle.
It works properly in the Teams web client because most browsers send a Cache-Control: max-age=0 request header when requesting your index.html, ignoring any cache set for the file. Teams desktop doesn't as of today.
This seems like an issue with the way your app is managing the default browser caching logic. Are service workers enabled for your app? What cache control headers is your web server returning?
There are some great articles that describe all the cache controls available to you; for example:
https://medium.com/#codebyamir/a-web-developers-guide-to-browser-caching-cc41f3b73e7c
Have you tried doing something like this to prevent caching of your page (do note that long term you might want to use something like ETags which is a more performant option):
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#preventing_caching
P.S. You can also follow the instructions here to open the dev tools in the Desktop Client to debug all this:
(How) can I open the dev tools in the Microsoft Teams desktop client?
And even force clear any cached data/resources for your app:
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 :)
I'm completely new to this, so please forgive me.
What I have right now is a Play application that, when I run play run on my personal Mac the site launches on localhost:9000 and everything works fine.
I also have a server running CentOS that tells me to "add content to the directory /var/www/html/" when I navigate to it's IP, but I don't understand how I can do that with a Play application? It's not like I have a bunch of HTML files I can just put there?
So my question is, what steps do I need to take to make it so if I go to the IP of my server, it takes me to the website I made and that is currently stored on my Mac?
You need to configure Apache as a "proxy" to your Play application (that's why you won't need to put anything into /var/www/html/).
Your application code can be uploaded anywhere you want on the server. It will need to be started on the server (with play start for example) and Apache will "forward" requests to the running Play application.
You can look at the Play documentation in the "Deploy your application" section :
"Deploying your application" (general recommandations) : https://www.playframework.com/documentation/2.6.x/Production
"Set-up a front-end HTTP server" (explain how to deploy Play behind Apache or Nginx) : https://www.playframework.com/documentation/2.6.x/HTTPServer
I have mobile web application that has offline capabilities (via HTML5).
I'm currently building automatic build & testing for it (ant, JsTestDriver etc.), until I hit a wall. How can I test if the web application has working offline mode? This is specially painful since if tested by hand; iPhone practically needs full reset between tests (it tends to cling on to some parts of the data).
I'm thinking something around these lines (on a idea level):
Setup Java web server with ant
Fire some sort of headless client, that supports HTML5 offline use
Load the application
Validate that everything is loaded
Disable server
Load the application
Validate that everything is loaded, still
Any suggestions how would I proceed doing something like this?
Not sure I understand your question, but what do you think of:
Not using an iPhone, but chrome on PC with the ripple emulator http://ripple.tinyhippos.com/
Setting a fake proxy or editing the .host file in order to be sure that your chrome session does not have access to your server.