Distributable/Distributed Web App with VueJS - javascript

I need to build a distributable app using VueJS. I'll describe the scene, so that it can be understood better.
Immagine the following:
Four companies have the same products database
Each of them has it's own politics, prices, custom colors, parameters, all of which are also stored in that database
These 4 companies want to integrate into their relative websites a page which shows their own catalogue (with their custom prices and politics and whatever), as well as, when you click on some of the products, the related information about that product
The question is: how can I make such an app using VueJS? Write it once and distribute it to these 4 different company websites?
And I've started to answer to my question doing the following:
I created an API which can be accessed by API Keys
Assigned to each company its very own API Key, so that requests coming with that API Key are associated with the given company
I created an app using VueCLI (which uses vue-router, for the pages/views, and axios for the API calls as well), wrote all my logic and components and styles and whatever else...and for development purposes I tried to use one of the 4 API keys (hard coding it into the axios.defaults.headers) to see if it all works...and it does!
Now, here comes the problem: I need to build/export the app in such a way that I can do something like this:
In www.company1.com/catalogue
Call catalogue.js and pass it the company1 API key
In www.company2.com/catalogue
Call catalogue.js and pass it the company2 API key
In www.company3.com/catalogue
Call catalogue.js and pass it the company3 API key
... I'll omit the company4 cause i'm sure you already got me.
Obviously I could export 4 different versions with the hard coded 4 different API's...but seems like a pretty stupid idea to me! Also, it exposes my client a lot cause, well, everybody could link to some of the companies' catalogue.js and, without configuration or whatever, visualise on it's own website my clients products..(which is obviously a problem).
I would like to have:
ONLY ONE catalogue.js file with some exposed parameters, as, for example: the API Key needed to identify the company.
In this way, everybody could still use that catalogue.js file, but with wrong credentials, it wouldn't produce a thing (i.e. will get an API error of unrecognized API key).
How on earth am I supposed to do this?
I'm banging my head on the wall from 2 weeks.
I've tried to export the app as Library, get errors like: Unknown custom element: <router-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I tried to export the app as Web Component...got same error and others as well.
Please help me understand where I go wrong, and how should I approach the problem.

Look into Vue Environment Variables https://cli.vuejs.org/guide/mode-and-env.html
Or you can make independent settings.json file and load it through the axios

Related

Export Vue dynamic site to Static HTML on run time

I am trying to generate/export the html/css from a Vue Application to a static index.html and the css assets without the script I wrote within the vue app which makes calls to the internal servers.
Use case:
An employee creates a digital Information site about a car of the company.
Here he needs to enter vehiclenumber etc, it then makes a GraphQL query with these parameters to our internal server.
Once the information loaded and is filled in on the site, an option should be given to "Save" (Export) the html/css with only the necessary js for vue components itself to work (e.g. Element vue gallery)
The Employee creates the page using localhost:8080?carnumber=xxx&info=xxx
The Server queries itself should not be included as they will be unreachable from outside the intranet.
So I want the static html to not care about the route and parameters and display the HTML as seen on localhost:8080?carnumber=xxx&info=xxx
I have looked for "static site generators" etc but I have not come across a result I am looking for as the page itself isn't static only the export should be. I also came across Nuxt.js but not exactly how I want it to be, the best would be to have it call like a NuxtGenerateStaticPage(this) function (in my dreams)
Please let me know if anything is unclear.
I appreciate any input/idea :)

How to create multiple html pages using one main route?

I'm trying to create a website that has multiple community feeds like one for bowling and another for poker like so: localhost:8088/communities/bowling & localhost:8088/communities/poker.
I use actix as my webserver operating under the Rust programming language.
Is there a way where all addresses operating under localhost:8088/communities encounter the same web files so that I can just have one main route?
Then store the additional header like /bowling or /poker so that I can commit to separate requests to the server for the relevant post feeds? Maybe I can save the additional header information in a javascript variable when the web page is called? -Like when I go to /poker, a variable named communityType gets set to poker. How would I do something like that?
Because there's no way anyone is making HTML pages for each of ~100s different communities.
Thanks for the help in advance!
I'm not very familiar with this crate, but based on the docs it looks like you can use #[get("/route/this/function/will/support")] to define how a route is handled. Assuming that I wrote it correctly, this should respond with small message telling you which community route you are on when using.
use actix_web::{get, web, App, HttpServer, Responder};
#[get("/communities/{name}")]
async fn communities_route(web::Path(name): web::Path<String>) -> impl Responder {
format!("This is the page for the {:} community!", name)
}
You could also expand it to have routes for say #[get("/communities/{name}/forums")] or #[get("/communities/{name}/{file}")] to handle common routes all communities have on a per community basis.
Edit:
It sounds like you also need to include .service(communities_route) in your main function when initializing the App to use #[get(x)]. You also have better control over how the route is handled if you configure the services directly.
Here is one snippet from their hello world example. It looks like it prints the request on the server so long as you visit any route other than "/index.html".
async fn index(req: HttpRequest) -> &'static str {
println!("REQ: {:?}", req);
"Hello world!"
}
App::new()
.service(web::resource("/index.html").to(|| async { "Hello world!" }))
.service(web::resource("/").to(index))
I recommend looking through their examples on github. It looks like they have a bunch of concise examples for many different use cases.

Getting data from Dark Sky API using handlebars, issue with routing

I have an issue regarding the script which helps me get the data from Dark Sky API.
I am developing the app in node.js using handlebars.
I am trying to get just some specific data from the forecast script, send it to app.js script which does the page routing and then to add it to forecast.hbs page.
Unfortunately, I am really stuck on this.
I have attached the photo with the code.
What I want to do is to get just some specific weather data, so, later on, I can use them one by one in the HTML code.
I have somehow to add them in the callback(right side), then in the middle, where the forecast routing is, then I think I need to replace forecastData with something else like..more variables and add those in the rendering part?
For example, I would like to take the icon variable, which contains the code that I need to add in the hbs page.
I want to do some binding by replacing Skycons.RAIN with Skycons.{{icon}}, where the icon should be in the middle file, like forecast: forecastData.
If I'm using {{forecast}}, I can show all the data that is on the right side, more exactly the variable weatherDetails, which contains the other variables.
How can I take advantage of binding and use it for the icon, for example?
Can somebody give advice, please?
I am really confused...
Kind regards, Gabriel
Why don't add an additional parameter to the callback function and then add it to the handlebars data object? Then you should have access to it in the template.
Btw are you using nodemon with docker? I'm also stuck with a problem, where nodemon isn't updating the container when the files are changed.

Deleting a single item from firebase using axios

Hi there fellow developers,
I would like to ask you, if you could help me with an issue I have not been able to resolve. I have made a very simple TODO List App using Vue.js (I know, very original) and I decided to hook it up to Firebase, so that I don't lose all the data after a page refresh. I was able to fetch data successfuly and also delete all the data (if there is any) but I'm not sure, how to send an http request, when I need to delete one particular item when clicking on it. I was able to do this locally with a simple splice method but I'm not quite sure how it works with Axios/Firebase.
Any help would be appreciated.
Here is my code/repo: https://github.com/tomvorel13/vue-task-manager/blob/master/src/App.vue
Thank you!
The best is to use the Fireabase JavaScript SDK for such interaction between your web client and the Firebase database. This is easier and better than using Axios.
Have a look at the documentation:
https://firebase.google.com/docs/database/web/start
and in particular there for learning how to delete an item.
https://firebase.google.com/docs/database/web/read-and-write#delete_data
It is simply a matter of doing remove() on a reference to the location of that data.
In order to integrate the SDK with a Vue.js application, have a look at these very good tutorials:
https://www.youtube.com/watch?v=FXY1UyQfSFw&list=PL55RiY5tL51qxUbODJG9cgrsVd7ZHbPrt and in particular videos #13 and following for the Firebase part.

Implement Autosuggest/Typeahead in Custom UI built on AngularJS

I am trying to build a typeahead/suggestion feature similar to the one developed using App Builder.
My XQuery is:
xquery version "1.0-ml";
import module namespace search = "http://marklogic.com/appservices/search"
at "/MarkLogic/appservices/search/search.xqy";
let $options :=
<options xmlns="http://marklogic.com/appservices/search">
<additional-query>{cts:and-query((cts:collection-query("NY"),cts:element-value-query(xs:QName("Office"),"47","exact"),cts:element-value-query(xs:QName("Person"),"15","exact")))}
</additional-query>
<constraint name="Search_Element">
<range collation="http://marklogic.com/collation/"
type="xs:string" >
<element name="Account"/>
</range>
</constraint>
<suggestion-source ref="Search_Element">
<range collation="http://marklogic.com/collation/"
type="xs:string" facet="true" >
<element name="NUM_ACCT"/>
</range>
</suggestion-source>
</options>
return
search:suggest("Search_Element:103", $options)
This returns the desired suggestions.
But, now when i wish to integrate this in UI, I am unable to understand how it could be implemented.
REST API doesnt seem to be rich enough for above query as its does key/value, element value search etc.I want to implement typehead for instance,for account element in NY collection,for a particular office-person element values as in the above XQUERY
The App Builder uses extsuggest extension, but i could not get much information on this.
I have a text box, which on typeahead, will query marklogic server via REST or JSON/XML wayaround whichever can be implemented and display the results.
I am currently trying to use AngularJS typeahead feature as given here.
Please Advise !!!
From the looks of it, the extsuggest extension is just a convenience wrapper around search:suggest, mainly to easily get hold of the search options of an App Builder app, and returning any results as JSON.
Otherwise I am a little confused by your question. You say the above code gives the correct suggestions, but the second paragraph below the code seems to indicate it doesn't?
Or is your problem that you have correct suggestions, but don't know how to visualize them in the UI?
HTH!
To your first point about the REST API, you put the XQuery code above in a REST extension, as described here. If you call it "suggest", you'll end up accessing it at /v1/resources/suggest.
I'm not clear on your overall architecture, but you mentioned AngularJS and XCC for Java, so I'm guessing you have something like Tomcat serving up the UI and implementing business logic, with Java using XCC to talk to MarkLogic to get data. (An aside: since you're using the REST API, you might want to go with the MarkLogic Java API, which sits on top of the REST API.)
From the AngularJS side, the typeahead is going to need to work with a service that sends what has been typed so far back to your Java server, which will forward the request onto the MarkLogic endpoint. I found another StackOverflow question that shows how to set up the directive to send the request to a server.
The REST API in V7 has suggestions built in. You can access that directly.
http://docs.marklogic.com/REST/GET/v1/suggest
One of the things I've not yet covered in my MLJS JavaScript wrapper for MarkLogic[1] is auto suggest for the text search query bar widget. I have built this for the semantic (SPARQL) query bar widget though. If you're writing in JavaScript, MLJS has all the hard work done for you. Easy to plug in new rest functions of your own using the mljs core API's do() function. There's also a search widget API too.
[1] https://github.com/adamfowleruk/mljs/blob/master/README.md

Categories