Deploying AngularJS App: How to make app read JSON data - javascript

I'm stumped. So I've written a nice little web app that gets all its data from a JSON that has one array in it. To bridge the AngularJS-parts and the data, I have this line in my services.js
.constant("baseURL","http://localhost:3000/")
This of course only works with me locally. But I haven't considered that I might have to get my web host to serve up the data.
Now, I'm a complete beginner at this. I've managed to code my app with moderate effort, having only started coding in January. So I'm completely out of my league here. I don't even know what I'm looking for. I mean, I have to replace the localhost:3000with something. But if I do http://domain.com/db.json that obviously doesn't work.
I've talked to Godaddy's tech support and they go "Nuh-uh, not helping" the second I show them this line of code. Because, to be honest, I don't even know what the address I'm looking for is called. Is it a URI?
I have a few questions regarding this and I turn to you, because - this story gets worse - there's a possible job on the line for me. Not a coding thing, but the data that is parsed from the JSON into the site.
What is the address I'm looking for called?
How do I get my hosting to serve up JSON data? I mean, I don't even know what I need to ask the tech support people here. Do I need a JSON server?
If they don't offer it, where could I get my JSON data served in a way that I can push more articles into the array and preferrably edit it, too?
Thank you so much!
EDIT #1
If it helps, here's the contents of my /webroot/personalfolder

You will need to change your localhost:8000 to your domain name. For example, if you bought www.foobar.com then your base URL would just become www.foobar.com On a rented web server (like GoDaddy Hosting) ports 80 and 443 are normally open so you wouldn't need to specify this. If you are self hosting, you will need to open these ports on your router and apply port forwarding rules to your PC.
When you host your published website, you will just put your JSON file in with your Website Source. For example your structure may look like this:
AngularAppFolder/index.html
js
csss
Just add another folder called db place your JSON file in there, and reference it in your Angular code, no need to worry, its just another file just like your HTML or CSS which makes up your website. Remember though that your JSON data will be publicly available here!
If your looking for an alternative way of getting your JSON data, you may want to look into creating a REST API. This uses a web server to dish out data depenant on the HTTP request you send to it. but that's a very big topic! Here is some reading into it if your feeling brave! Node.js REST API tutorial
Final note: if you are self-hosting this application (running it on your own computer or server) then you will need to change the DNS record for your domain name to the global IP address of the server! you shouldn't have to worry if your using the hosting offerings from a company such as GoDaddy however.

You need to change the baseURL value to whatever the URL on which the site is hosted. Something like http://<mysite>.com.

Related

Angular - how to test Internet upload speed without backend?

I want to upload file into folder from which my Angular app is served while running on localhost. I'm not able to find any solution without using backend.
For example I just want to upload an image file and that file should copy in specified folder of the project. This should be done only with Angular without using any Backend script or hitting any API endpoint.
Depending on your webhost, you can make your assets-folder accessible via FTP.
Making a FTP-call from javascript (angular is javascript) isn't that difficult. And there are plenty of example and questions about it on the internet (like this)
Why you wouldn't do that:
The credentials for your ftp-connection will be accessible in the compiled javascript-code. With a little bit of effort, everyone can find it.
Each gate you open through the webhosts firewall, is a extra vulnerability. Thats why everybody will recommend you to add an API endpoint for uploading files so that you keep holding the strings of what may be uploaded.
Edit:
As I read your question again and all the sub-answers, I (think) figured out that you are building an native-like app with no back-end, just an angular-single page front-end application. An I can understand why (you can run this on every platform in an application that supports javascript), but the problem you are encountering is only the first of a whole series.
If this is the case, I wouldn't call it uploadingas you would store it locally.
But the good news is that you have localstoragefor your use to store temporary data on the HDD of the client. It isn't a very large space but it is something...
The assets folder is one of the statically served folders of the Angular app. It is located on the server so you can't add files to it without hitting the server (HTTP server, API, or whatever else...).
Even when running your app on localhost, there's a web server under the hood, so it behaves exactly the same than a deployed application, and you can't add files to the assets folder via the Angular app.
I don't know what exactly you want to do with your uploaded files, but:
If you want to use them on client side only, and in one user session, then you can just store the file in a javascript variable and do what you want with it
If you want to share them across users, or across user sessions, then you need to store them on the server, and you can't bypass an API or some HTTP server configuration
Based on your clarification in one of your comments:
I'm trying to develop a small speed test application in which user can upload any file from his system to check upload and download speed.
The only way to avoid having you own backend is to use 3rd party API.
There are some dedicated speed test websites, which also provide API access. E.g.:
https://myspeed.today
http://www.speedtest.net
https://speedof.me/api.html
Some more: https://duckduckgo.com/?q=free+speedtest+api
Note, that many of these APIs are paid services.
Also, I've been able to find this library https://github.com/ddsol/speedtest.net, which might indicate that speedtest.net has some kind of free API tier. But this is up to you to investigate.
This question might also be of help, as it shows using speedtest.net in React Native: Using speedtest.net api with React Native
You can use a third party library such ng-speed-test. For instance here is an Angular library which has an image hosted on a third party server (ie GitHub) to test internet speed.

javascript - how to accomplish getting variable (data) from client side to a database online server?

so on client side running in the browser I have a javascript code that has a variable (namely a url that is 1500 characters long), and which I need to insert it into a online database that lives on the webserver where I have hosted my website. I have these two technologies on my website, mysql DB and PHP.
Please kindly would someone recommend the best way to do this?
showing examples, specifically, how to send this data over to the remote server and how to process return data it may send back to me??
what i was thinking if there's a way to send over this variable string that is 1500 characters long, over to a PHP file living on my website which this PHP file will be able to insert the data into the DB, and then some time afterwards my same script running on the client browser will check and pull data from the remote DB back to itself...... I've tried to follow along some example searches googling but none of them are making sense to me, sorry I am visual learner , and would greatly appreciate any help you may provide me with this task .....
The solution already discussed here is the proper one. You need an API (also called a service).
I don't know who downvoted it but its the right one.
And you need it for several reasons.
Performance issues. Your solution "writting to a file" will be slow. And even "writting to a file" will require a service on top.
Security reasons. To allow in any other kind of way for a user to write in your server directly (FTP or other methods) is a big security risk and your server might end up being attacked.
Scalability and mantainance.
I would recommend reading more at
https://code.tutsplus.com/tutorials/a-beginners-guide-to-http-and-rest--net-16340
And if you are a bigginer an want to start something fast loopback is an amazing option, but you need NodeJS in your server.
In broad terms what you need to do is set up a API on the PHP side of things. Basically you want a structure where your javascript can send the request, and then, using promises, wait till it gets a response to get the data. That way your PHP server can take however long it needs to put the data in the database and process it properly.
Here's a tutorial on how to make a restful api in php

How to get the fully url from a dynamic website

Consider a dynamic website running an application, where you can see the URL from your browser as:
www.example.com/game
Now the /game is probably a folder? And how can i see the actual path to the application?
Can't I see the server side scripting language, such as:
www.example.com/game/robobo.php or
www.example.com/game/robobo.aspx or something similar?
Now, I know you can guess some of these (typically with the "index" name), however there may be many subfolders.
Now the /game is probably a folder?
It is part of the URL. That's all you can know about it.
And how can i see the actual path to the application?
You cannot.
How the URL maps on to the server's file system (or even if it maps on the file system at all) is not information that the webserver will expose.
Can't I see the server side scripting language
Not really.
There might be fingerprints in the HTTP response headers that could clue you in, or HTML returned in the response body might include fingerprints from a particular CMS which would imply a programming language, but there is nothing certain.
This is not possible. When you think about it, dealing with a blind url like .../game, you have no idea whatsoever what the underlying platform is - might be Asp.Net, might be classic Asp, might be PHP - might even be Python or Ruby... Since you don't know what system sits on the server, you are not going to be able to know what to do to get the full path...
Most CMS systems allow the website owner to change the true URL to something more user and search engine friendly (sometimes called Permalinks or SEO URLs). /games, does not mean that there is such a folder, it could be a category name or a tag. The only place where you can see full paths is for media assets such as images and videos. (right click, view image source or open image in a new tab).
Unless you are the admin of the website, it is nearly impossible to find the real path.
I am saying nearly impossible since you already pointed out on guessing.
The server side is obviously hidden from visitors.
You can guess what is the technology used on a website by testing it on other websites such as builtwith.com.
For example if it shows php, then there is a great probability that all files end with .php.

Where to put my php file?

I am trying to make a sign up activity on android and I am using a mysql database to store the data. On all the examples I have seen the http post goes to a ip address and then finds the php file. Can I just put the php file somewhere in the android app folder and access it from there, or do I have to find a host for it?
The php code, specially for tasks such as sign up, should never be placed on the client side or embedded with the front end application, but instead be placed on the server side hidden from the user for the sake of safety of your database/application. If you are only considering to put your php with your Android app together for the case you need to test it, and eventually doesn't have access to a server, you may then consider using Google App Engine, as it allows you to emulate a server locally without the need of a server. Here you find some info about Amazon's RDS.
You can put you php in the same directory you place your index.html file, i.e. in the root public directory of your domain. To load it to the Amazon, you can use the cPanel or the Filezilla or any other panel you wish among the options Amazon put available for their users.
In the case Amazon doesn't provide a place to put your php, as a suggestion, you can get a host that allows you to have a static ip accessing it thorough an easy to remember url address - for free. It is quite useful specially for making tests. Still if you decide at some point to have a personalized domain name registered, there are also some other good options to compare.
You dont need jQuery, when doing the POST request,PHP connects to the database get the data and return it to your app.
So to answer your question you should put the PHP in the same server where mysql runs.

Do you know a way to protect the JS code and make it visible only if requested by the remote?

Theoretically JS runs in the browser, then after the first download can be easily copied and made to run directly from the local, without going through the remote server. Because I need to sell an application * js (pay-as-you-use) I need to check each request and make it available ONLY if required by that particular site and, of course, only if he paid.
It doesn't work. As soon as someone downloaded a copy of the JavaScript file, he or she can always save a copy of it and even redistribute it.
Thus you cannot protect the JavaScript itself - but assuming you rely on some client-server interaction (i.e. AJAX), the server would not respond to requests coming from non-authorized sources, thus rendering the client-side worthless.
If you need to protect your business logic, don't put it into JavaScript. Alternatively, sue everybody who uses your scripts without having obtained a license (not sure if this is practical, though ...).
I wouldn't make the JS file that you plan to sell available directly on a URL like
yourdomain.com/yourfile.js
I would offer it on a URL like
yourdomain.com/getfile
Where /getfile is a URL that is processed by a PHP/Java etc server-side language where you can check whatever credentials you need to check, be it requesting domain name, IP address, some token or something else.
if your application is made in java you can use a ServletFilter to check if the request is valid (if the IP is correct, or maybe you can use a ticket like the facebook, twitter, whatyouwant rest API), and if isn't valid don't show nothing
if you aren't using java I think that something similar can be made with every programming language
It may be a little more trouble than it's worth. Yes, you could require clients to provide a token and whitelist certain domains, etc. But they can still open any site that uses that particular JavaScript -- even someone else's -- and just Save As... .
A better bet is controlling the script's interaction with your server. If it makes any AJAX calls a server you control, then take that chance to authenticate. If it doesn't depend on data from you in that way, I think you'll just have to face the problem that anyone dedicated enough will be able to download your script and will be able to use it with a little bit of playing around.
Your best bet is, in addition to the above, keep track of domains that have paid and search every once in a while to find if anyone's taking your code.

Categories