Currently I am working on a website that uses Vue-js as front-end technology and Node + MySQL as the back-end part. In the development mode, when I am connecting to the internet and use npm run serve (I am using Vue version 2) I see these lines in my command-line:
That is very good feature of Vue-CLI that helps me to see and test my website in for example my mobile device (with the help of address in the Network part of above image). But unfortunately when I go to some pages (like "article pages") that have some information from back-end part of site, I could not see them in my mobile. The reason is clear. I use Node server in other terminal in my laptop and also run XAMPP to have MySQL database and both of them are not related to Vue-CLI. So their part of information could not be seen in real devices like my mobile phone.
I want to know is there any solution that I could test and see all parts of my site before putting it online and in real device? I know that I could use browser utilities for testing responsive design but I want to see it in a real device. Also when I searches for that, I usually find websites and solutions that works when the site is online (not using localhost). If any developer has any idea for that (when using Node as back-end or other languages in general in combination with Vue-CLI) that could help me to see my website in real device, I am so curious to understand that. Is there any package that does it for me?
If you are on a home wifi, visit the ip address shown the screenshot you shared "http://192.168.1.50:880" on your mobile device or any other device connected to the same wifi.
Related
I'm facing a weird issue, I had two sites on a web hosting provider (OVH), both sides were running smoothly and correctly.
I decided to get a dedicated server (for many purposes, amongst them i wanted to be fully independant concerning the configuration).
I'm using an Ubuntu based server with Caddy, sites are made out of jQuery, HTML5/Css3. Since i've put them on my dedicated server, the responsive isn't working anymore while the exact same website is still responsive on the web hosting server...
What should i look after? I don't have any idea where to begin at :s
Thanks for your help!
Solution :
Check for script calling, the sources for external files have to be the same as the website url (if website is https, file sources should be https too).
I'm trying to create a responsive custom theme for Wordpress. I'm hosting it locally with WAMP and using a variety of tools to make sure it's mobile friendly. Problem is, I'm not getting consistent results and I can't test on an actual mobile phone until the theme has been uploaded to the actual site (kind of defeats the purpose of hosting and coding locally!).
Results from using the Chrome "Inspect" function:
So far so good, even when the viewport width is less than 320px. Right?
Results from manually resizing the Chrome browser window:
Just kidding, the design breaks at 363px.
So which is going to show up on mobile devices? Any advice is appreciated.
You're likely going to see that the manual resizing of chrome is more accurate to what you would see on a mobile device, but the best way to find out is to test it on a mobile device.
You can test the site WITHOUT deploying it to a server fairly easily as long as you're running a local server (localhost, or 127.0.0.1). Here's how:
Make sure your mobile device and the computer running the local server are connected to the same wifi network.
Find out your local network IP address. Here's a handy link: http://lifehacker.com/5833108/how-to-find-your-local-and-external-ip-address
Type your local network IP address into your mobile device's browser, followed by the port you are running the local server on.
Example: If your local network IP address is 192.168.1.11, and you have been accessing the site at localhost:5000, you can access the site on your mobile device at 192.168.1.11:5000.
I want develop a simple program for an Android smartphone that give the possibility to the user to transfer an image from the device to the pc. I want create a direct connection using the WiFi Direct technology. I saw the official documentation on the developer android site, and i found it very helpful. My question now, is how can i find the pc and established a connection with it? I saw that establish a connection from two smartphone is really easy, but how can i proceed in this case? The pc need to be in a wireless network (i don't think) ?
Thanks for any suggestion.
The PC does not need to be on a wireless network (that is the whole point of using Wifi-Direct) but to enable Wifi-Direct on a PC, you need to install the Intel MyWifi Dashboard software (full version) and also need to make sure that your drivers are updated.
(http://www.intel.com/support/notebook/sb/CS-033660.htm)
I want to make an HTML5 game that can be controlled with mobile. So how to communicate between mobile and browser on PC?
I think of the following ways:
Bluetooth This may be the most easy way to use. But I searched and found that Chrome made bluetooth API proposal last year but is now available only on Chrome dev, which means I cannot make the game popular for everyone.
WiFi I don't know how to set up a host on browser using WiFi information. If so, I can then connect my mobile to WiFi. This is considered to be faster than web socket since it's local network.
Web Socket There're a lot of information about how to use this. But as this use WAN, it is considered to be slower and is my last choice.
So, does anyone know how to achieve this with the former 2 ways?
I'm planning to realize the following project and would be thankful if somebody could verfy my approach!
I want to establish a fully bidirectional wireless realtime communication between a smartphone (cross platform) and a embedded microcontroller running a webserver.
The webserver should provide data of the connected hardware in realtime e.g. temerature.
The smartphone should render these on screen and you should be able to configure the hardware e.g led color with the smartphone and save the config to the embedded webserver.
My first guess was to use HTML5 websockets but they aren't available on all platforms so I got inspired by XBMC, which uses JSON-RPC.
Just imagine a car stero system with bluetooth connected to a µC with webserver and wifi dongle.
My plan is to implement a webapp on the webserver which lets serves the purpose mentioned above. But the tricky part is to get the user to establish a bluetooth connection to the stereosystem because i looked up similar questions which say you can't access stuff like bluetooth on the smartphone with HTML5.
long story short, this is the current idea:
hardware -> µC -> webserver -> HTML5 Webapp-> WIFI -> Smartphone
communication via JSON RCP.
I would be highly thankful if somesone could give a statement to said idea and planned implementation because I never done this before!
Thanks guys!
We at muzzley, have developed a framework to simplify this process. We provide a way for your browser applications to communicate with smartphones. In the side of the smartphone you have widgets that are already done (gamepad, drawpad, switch, swipe, others) or you can build your own html based widget.
(disclaimer: i work for this project)
Most of the work is already done for what you want to do :)
Quick start here:
http://www.muzzley.com/documentation/quick-start.html
You can pull from github several examples here:
https://github.com/muzzley/muzzley-demos/
Lib for browser:
http://www.muzzley.com/documentation/libraries/javascript.html
I hope it helps.
Best
I think your first instinct was probably right. Have you looked at socket.io for node? It's essentially a shiv which ensures that you can use websocket functionality in virtually any combination of device and browser (see list of supported transport mechanisms and browsers here).
It should allow you to avoid bluetooth altogether.