I'm a bit of a noob to the 'backend' part of Nuxt. But I'm trying to learn. I've set up a bot that's linked with Twitch. Their server sends a post to my own environment whenever someone follows or subscribes to a channel. I catch and handle this post with Express and would like to show that event on my Nuxt frontend. Unfortunately, I've yet to figure out how to get that data from the express server middleware to Nuxt whenever it comes in from Twitch. I've tried to find examples on the web, but haven't come across anything that seems to do this... Or I'm just too much of a noob to identify them as solutions.
I figured I'd use something like a WebSocket (Socket.io) to do this, however when instantiating the Express post handler I don't have access to Nuxt. And if I try it after I hand Nuxt to Express with (app.use(nuxt.render)) the post no longer gets passed through.
I also tried to add a store or adding a property to the Nuxt object itself, but again, I'd need Nuxt and the latter wouldn't give me the automatic pushing of data I'm looking for (hence the WebSocket idea).
Currently, the project is set up with a server/index.js where express is handed Nuxt to run the bot. I also have a WebSocket being initialised there. For now, I also handle the post-call there since I thought I'd at least be 'close' to the elements I need (Nuxt / Express) but I just don't see the way forward.
Any tips in the right direction would be much appreciated. If I need to add code to this post I can, at this point though I'm not sure what would help give this question a good answer.
Thanks in advance.
Related
I am trying to figure out how to pass data between the theme-app-extension and the backend of the application that the theme-app-extension is connected to. The theme-app-extension is all liquid, css, and javascript so I wasn't sure if there was a built in way to pass data between the two. For example is there a suggested method to pull data into the theme-app-extension from the database and is there a suggested way to send data to the database from the code running the theme-app-extension? I am fairly new to doing anything with theme-app-extensions as well as building Shopify applications. I have built Shopify applications that was admin facing or just cosmetic, this is my first time building a Shopify application that takes user input and sends it to the database and retrieves that data for the end-user to see.
Any suggestions would be greatly appreciated.
Thank You.
I started working on Shopify App (Theme App Extension) a week ago
I run into the same problem, so I did consume API in a javascript file using Fetch
Here is an example of the code:
I add this into global.js file inside assets
And then I linked the script files inside my Liquid block
Also inside global.js, I did manipulate DOM by injecting data consumed from API, here is an example
Finally what I did is communicate directly with DOM to inject or retrieve data, then handle it using javascript
I hope this helps you
Ps:
This is my first experience with Shopify too, and I was quite disappointed (lack of resources, docs, and community)
You usually (always) pass data from the front-end to the back-end using an App Proxy. There really is no other way at this time. The Proxy gives you an XHR call you can use, and you can return Liquid or JSON. Your choice.
I basically made a login page which could grab user/password from the text input, but if I want to use these to get auth from my website which has a REST API, where should I start it, is any lib that I can use?
I don't know how deeply you want to make. So I'll guess your concerning.
If you want to just send and get response from server
You can use fetch() method in js. Luckily react-native have documentation. https://reactnative.dev/docs/network Look this documents. React-Native have own fetch method for communicating with server.
If you want to manage state of your client-side data
Redux : You might probably hear this one. you can include redux in your package. we can use redux in react-natvie not only react. I just googled articles. https://www.digitalocean.com/community/tutorials/react-react-native-redux
MobX : Redux is pretty much complicate way to deal with state. So If you need simple things. you can try MobX. try this one. (also googled) https://www.smashingmagazine.com/2020/08/mobx-state-manager-react-native-applications/
Hope this idea helps you.
Best regards.
I want to show different kind of notes in my vue.js application to inform the user for example about an upcoming maintenance. I thought at an info "banner" under the application header. The data like period of the maintenance I would store in a sql database. In this database I want to regular when the banner should be visible or even not. Maybe with a table column called active.
Now I am looking for a solution how to trigger the vue.js application to refresh if data in database was added/updated.
Can someone help me please?
Are there any other ideas (maybe more professional ideas) how to trigger a note "banner" in a vue.js application?
The application will be hosted in Azure.
Thanks in advance!
Anatoly answer is right, those are your two options. You either make a request to your backend service every couple of minutes(depends how fast this info is changing) or you implement a web socket that will let your frontend now when the info has changed. It depends on how big is the app and what use you're going to give it, personally, in a scenario like this i would go with a web socket.
Here you have a nice library i've used in the past: https://www.npmjs.com/package/vue-socket.io . You will also need to make some implementation in your backend service to handle the info gathering.
I've been learning both Angular2 and VueJS just to see which I prefer, I can safely say I prefer VueJS just with its ease of use, its great documentation, its speed etc
I'm trying to do some API calls using Axios in Vue. These were going perfectly when using the JSON placeholder data from:
https://jsonplaceholder.typicode.com
I'm now trying to do more 'real world' example, the call I'm trying to do requires headers to be sent with the request.
I tried to add these, but of course how I've currently been calling them is from the Client Side part of the app (CORS blocks this).
With Angular2 I ran my app alongside Express, from Express I ran the calls which then passed the data to the view.
How would I best achieve the same result with Vue?
Edit: I've done some research and found NUXT.JS which seems to be SSR? However, I'm unsure how Nuxt helps me in this situation.
Thanks
At the moment I am making an app. I am relatively new but have experience with a lot of different languages like PHP and SQL. My app needs to communicate with a server to post/retrieve data for everyone to see. People also need to be able to login and register. Right now I am using parse because it gives a lot of the requirements in an easy package but parse is retiring soon and I have no experience with setting up my own server.
I was thinking of making my own 'server' from an old computer but not use parse because it will no longer support push notification. Then of course the app needs to communicate with this server. I started looking online and found a lot of terms but not a real clear explanation on how to proceed. I need it to be able to communicate with iOS and Android. Furthermore I was wondering how to execute a script on the server itself. I want to do something with time, once someone uploads something it needs to disappear after 48 hours, but of course it also needs to do this even if the app isn't active on a smartphone
Can anyone tell me how I need to proceed, what to use and where i can find useful info.
My plan for now is creating my own server with something like MongoDB but then i still need something called a backend and different SDK's to communicate with the apps. Maybe its possible to install parse on my own server and add something so i can still use Push and run a script on the server itself.
All help would be very much App-reciated ;)!
The reason of a backend service or framework is to let developer focus on front end app development. Maybe you can check other options like firebase, meoter, or even leancloud. Don't be hurry jump to the decision to make your own backend.
Parse Server is already supporting Push Notifications. I think should keep using Parse. It will become the best framework for backend and API development in a short time. You can also use services like https://www.back4app.com that helps you in all process of configuration of your server.
Do you mean by create your own server running a personal derver pr you mean create your own back end application?