Pure Frontend CMS - javascript

I'm currently redeveloping/designing a department website at my university, but an internal organization who handles the servers/current CMS system are being ridiculously uncooperative. I can't get access to the templates of the current CMS and I can't develop my own templates for the system, so I'm trying to move away from it (EZ Publish). But I also can't get admin access to a server, so I'm unable to install PHP/MySQL to get Wordpress up and running.
Basically, all I have access to right now is a public/ folder. I'm considering writing a pure frontend app with backbone or something, but my boss wants the option of the dept heads to edit information. I want to avoid rolling together my own custom CMS if possible, so I was wondering if anyone knows of a pure front-end CMS manager that doesn't require a server language and server database.

that's a hard one, first because you have to have a way to maintain the data and that's not possible in front end, if the server is working RESTfully, that may be possible, but in other cases, I don't think this is a choice, because no cms will be able to communicate with an existing server cms.

Host a wordpress somewhere else and install the JSON API plugin. Enable CORS on the remote server. Build Your frontend with static files that interact with the service. Host them in the buggers public/ directory.
The admin/post editing tasks will have to be done on the backend host, but hopefuly you'll be able to get a subdomain from your university to point there.

another approach to this problem is static website generators.
you can host the content and data for those in a university internal or other code repository and push the generated content to the site.
to allow your depearment heads to edit information, find a site generator that allows you to seperate structure and layout from content, so that they can edit simple text files to add content, hosted on a shared storage they can all access.

Related

How to fetch data as .csv file from client with node.js application

i have written a game in javascript with the p5.js library. Now i want to host the game on a server to conduct a survey on a service like amazon turk. Ideally the clients recieve a URL to the game and play it while in-game actions are tracked and stored in node.js or on the server and exported as a .csv file once they are done playing. After they finish the game the csv. file should be sent automatically to a location that i can then access. I have zero experience in server hosting or similar topics.
So a couple questions arise:
Is a hosting service like Heroku suitable for hosting the game?
Do i need to use node.js to make this happen?
Which of those two would extract the data and store it to a csv? And where is the file stored?
How do i get or access the csv. after?
Any alternative takes to solve the problem?
Thanks alot in advance!
github repository: https://github.com/luuuucaaa/schaeffers-charade
game on github pages: https://luuuucaaa.github.io/schaeffers-charade/
If I were you, I would do it like below:
Host
Since your project is basically a html & JavaScript static contents,
AWS S3's static hosting would be sufficient (Also, the current git hub pages is another option if you just want to host it).
Hosting on node.js environment is also available using webpack serving, but it requires additional works. (but if you require other npm packages to generate .csv file, you need webpack anyway to bundle js file and attach it to html)
Data Storing
Two ways are considerable,
the first is to store it on the filesystem. Generate .csv via JS script within your app, and save it where the app is hosted (if you go with s3, you can access it afterwards, but I'm not sure if it can write objects by script)
The second is to post the data to another API endpoint. (for example building an API Gateway on AWS that triggers Lambda, which stores it on S3)
It's merely an example and I don't know exactly what you want to achieve, but take it into considerations. Good luck. Cool game BTW.

Javascript frontend configuration at runtime

I have a vue.js SPA which I want to deploy on different servers without recompiling the frontend for each deploy. The SPA connects to a backend, with a url yet unknown to the spa. Is there a way I can dynamically tell the frontend at runtime where the backend is?
Many articles and forum threads suggest to just use different config files for different environments and build them in at build time, but that is not an option for me because I simply don't know where the frontend/backend will be deployed when building it.
EDIT: The project is an open source project, so I can't really make an assumption about how people will deploy it. I've always kind of "assumed" it would be deployed on a seperate sub domain, with the frontend being reachable at / and the backend with a proxy at /api because that's how I set up my server.
However, I've seen people deploying the api at a totally different sub domain (sometimes even with different ports) than the frontend or on a sub path or even a mixture between the two.
Things I've considered so far:
Putting the config in a conf.js which would then expose the backend url via window.config.backendUrl or similar and load that file in my index.html from a <script> tag
Slightly similar to 1.: Put the config in a config.json and making a fetch request to it once the application loaded, then exposing the result of it in window.config.backendUrl
Inserting a <script>window.config.backendUrl = 'http://api.example.com'</script> in my index.html.
Serving the frontend with a custom made web server (based on express or similar) which parses either env or a different config file and then creates the <script> tag from 3. dynamically
Always "assuming" where the backend will be with some kind of list to work up, like "First look at /api then at ./api then at api.current-host.com etc."
Bundling the frontend with the backend - that way I would always "know" where the backend relative to the frontend is.
Yet all of theses options seem to me a bit hacky, I think there has to be a better way.
My favourite is the third option because it is the best trade off between configurability and performance IMHO.
If I was in the same situation I would have considered the following 2 approaches:
Deploying a JSON file with the same name but with different contents - so the frontend can always fetch its configuration by making AJAX call to /config.json but this file will depend on where you deploy and will be generated during the deployment step
Using a single API endpoint with a fixed/constant URL (completely separate from your backends) - so that frontend always calls this API endpoint to get its configuration at startup and the actual URL of the corresponding backend for its further operation.
Basically (2) is just the dynamic version of the static configuration in (1).

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.

Search metadata in all server-side files in subfolder NOT using FileSystem API

I have a server-side subfolder structure in my HTML5/JS site.
The subfolder structure contains various media types where each media file is wrapped in its own HTML file which contains metatags.
I want to list all metatags for all files but I do not want to have to browse for a file (i.e. no FileSystem API) and get it's metadata. I just want to scan through the subfolder and list all metadata in each file.
I'm not able to find any script to do this, everything I keep running into is asking for the FileSystem API and the requirement to browse for a file.
alternatively, if FileSystem API can do this, I'd use it as long as I don't have to go browsing for files to use it.
My server is a standard LAMP server and the files are all HTML files inside a site subfolder. This site currently has no DB and I'm hoping to not add one for this functionality.
Any help would be appreciated.
Maybe Node.js would be a good fit for you. Then you can write everything in Javascript. It is server side scripting, but for demonstration purposes the configuration is much easier than Apache.
If I understand correctly that you don't want to browse the file system on the server side, but on the client side you are willing to do anything with Javascript, then the following may also be an option.
Using LAMP, you can configure Apache so that it shows directory indexes (https://httpd.apache.org/docs/current/mod/mod_dir.html#directoryindex), which you can use to browse to the content you need on the client side.
In any case, you will have to hit the files on your server somehow, either directly through the file system on the server side or with an HTTP request from the client side.

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.

Categories