I've been building a website with React and Node recently. I'm currently working on the mobile site. I've been running everything locally and currently test the mobile version with either an emulator (Ripple Beta) on the chrome store or by deploying it via Surge. However, running it on my phone via surge is ultimately different from running it on desktop.
Now before you suggest what may be causing differences I wanted to note also that I am currently implementing the following (based on what I saw in other similar threads):
<meta name="viewport" content="width=device-width, initial-scale=1">
react-responsive package
I want to keep my website single url instead of using an m(dot).link and I also want to use an adaptive design rather than responsive (I'm aware responsive is usually better).
One example of where an emulator will not suffice for testing is for testing compatibility with very specific syntax. For example, iphone does not understand certain es6 syntax such as "new Date()" for certain date formats whereas android does.
Is there a way to test an adaptive design for mobile on desktop such that I can run it locally on my computer instead of having to deploy on surge each time (so that I can open it on my phone).
This will make debugging these kind of problems much easier! I've seen a lot of similar threads for responsive designs but I think adaptive designs (completely different design from my actual desktop website design) can have sort of unique issues as seen above. It would be great, however, if I could still utilize the core functionality/components of the desktop version.
I worked on a school project that required us to test our web app using a real phone. What we did was we host a firebase server.
Start by installing the firebase cli:
npm install -g firebase-tools
Type firebase init in your console. (https://firebase.google.com/docs/hosting/deploying for reference)
Push your code onto your hosting with firebase deploy, then you can go to your url on your phone and it should work pretty well. Firebase deploy would be like a git push, it takes seconds to complete, so it's pretty quick.
Edit: Sorry didn't realize Surge did the same thing. However, I do not think you can test on your computer easily. Though you can download Xcode if you have a Mac and use the iPhone emulator, and Android Studio for the Android emulator. But both take pretty long to start up, personality, I would just deploy to surge or firebase and test on a real phone if you have one.
If your phone and laptop are on the same wifi, you can access your locally hosted web app on your phone.
STEPS
Run your react web app as usual, it'll be available on http://localhost:3000
Go to the terminal and type ifconfig | grep inet. This checks your laptop`s local network IP e.g. 192.168.0.10
On your phone, open your browser and the url http://192.168.0.10:300
NOTE: We replaced the localhost with the IP 192.168.0.10
Related
I'm trying to build mobile web applications using p5js, and I want to host them on my personal website. In particular I want to use the phone's gyroscope sensors to influence parts of my sketch. However I find that the sensors don't return anything useful when testing on my own site. Please can anyone find the solution, or else advise me how to troubleshoot?
Some details
My website is hosted on github pages (link to repo)
My phone is an Oppo A9 2020
Android version 11
I'm testing these websites in android chrome
Example 1:
I've got this sketch called GyroscopeTest. The program hosted on the p5.js web editor works just fine (the device orientation values are updated). However the same program hosted on my personal website doesn't update the values properly.
Hosted on p5.js web editor
Hosted on my website
Example 2:
This is a simpler example. Here's someone's example of using the gyroscope sensors on their website, which works fine on my mobile. I copied the html and javascript sketch over to my own website (removing a few lines of html that were causing minor problems). And on my website it doesn't work.
Hosted on someone's website
Hosted on my website
After more digging I found that the issue was because my website was served with http, not https, which has extra security stuff!
Clearly these other websites were served with https, which is why the sketches wored o nthose sites and no my own.
Because I had not enabled https, chrome deemed the website unsecure, and thus did not allow the website access to the phone's sensors. Changing the site to https also allowed other sketches to access the phone's camera.
I wonder if there is any possibility of testing a chat based application on multiple platforms using automation scripts. Let's say skype, facebook app, etc.
What I understand is that we can automate the app from either of the one side like Android or iOS or Web or Windows client.
Apparently, I wanted to test the e2e flow on multiple platforms.
My scenarios says as:
1.Login in mobile Android client with User A
2.Send message to User B
3.Login in windows client as User B
4.Verify the received message.
Is there any way or tool to verify such scenarios?
Thanks in advance
You can do that via selenium-webdriver or appium (or some similar tools) first 2 steps of your scenario, second 2 steps on windows you can achieve with TestComplete. Unfortunately, that's all that came to my mind when you do not have source codes.
As stated in the title,
I don't really understand how Node.js works and above all why it's actually used to run an AngularJS application (e.g. in WebStorm IDE this is the default option when you create an AngJS project).
I've got this doubt since I could run a simple AngularJS app on an Apache web server (within Xampp) without any involvement of NodeJS.
Thank you in advance
Node.js is an application platform. It's good for running your applications on.
Apache HTTPD is a web server. It's good at serving web pages.
They're two very different things, not directly related, and not mutually exclusive.
You are correct that many apps can run anywhere, but some benefits we've seen are:
Simplicity, especially for web developer also developing the server-side code/config/deploy.
Real-time web - easier to add in things like WebSockets and Server Sent Events if you need them.
I created a site using AngularJS because I thought it would speed up the process. Now it turned out to be a complete headache. SEO is essential for the site and apparently, despite being created by Google, AngularJS sites aren't crawlable.
I read this article that explains a way around it:
http://www.yearofmoo.com/2012/11/angularjs-and-seo.html
My question is: how do I install or run PhantomJS (or any other headless browser) without sudo access? If so, how do I do it?
I'm hosting the site on 1and1 with a small budget.
Some web hosting plane allow you to run you own application (they provide shell access, and that's what you need)
here you are a couple of them
http://www.webfaction.com/
http://www.justhost.com/
http://www.site5.com/
Make sure to contact them and ask if they allow you to install and run phantomjs before buying your hosting plan
Regards
I'm hosting my website using Google App Engine. It's a pretty simple website, but I've got some javascript drawing to a canvas element, which I'm trying to test on my iPhone. I'd also like to take a crack at reworking my CSS for mobile. However, I can't access http://localhost:8080/ (which is the url that GoogleAppEngineLauncher spits out when I run the app locally) from my phone. This seems obvious.
Unfortunately, it seems that Mountain Lion has removed the web sharing preference from system preferences. I found at least two different sites with "solutions" for re-activating web sharing (Apache server?), but none of them seem to work in conjuction with Google App Engine... I also tried this preference pane, which also doesn't work. I keep getting "Safari cannot open the page because it could not connect to the server."
Sorry if this is a stupid question, I'm a relative noob to this stuff. Also, I see a lot of questions here on SO which seem related, but I think I'm still too uninitiated to understand how they're releated. Is there an extra step here that's GAE specific which I'm missing?
This isn't anything specific to your OS. By default, the App Engine dev server binds to the loopback interface, making it accessible only to your machine. If you want to access it from other machines, you need to pass the --address=0.0.0.0 flag to the dev server - which you can do in the launcher's preference pane.
As of March 2013 - the "address" argument has been renamed to "host" - (at least for Python version of the app engine)
--address=0.0.0.0 argument not working after upgrading to App Engine 1.7.6