I am trying to build a Live chat Widget from scratch using React.js and Node.js and was wondering if anyone knows of any resources or tutorials to make it?
I'm trying to do make one but I don't want to use any 3rd party apps because of the long-term cost (everyone has a free trial but it's paid monthly after that) and I would love the guided experience of building it.
Any information helps! Thanks so much for your time.
I recommend you start with my blog article series about how to build a web widget.
This is a step-by-step complete tutorial with GitHub repositories.
You already know what a widget is, so you can start reading from part 2: Web widgets (Part 2): Widget him!
- how to make a widget and load it to the website.
Part 3: Web widgets (Part 3): API Cookbook
is about how to make an API for the widget.
The bonus part: Web widgets (Bonus): Why iframe?
is about the benefits of loading widgets into an iframe.
If you need UI components for your chat, please check my React chat library: https://github.com/chatscope/chat-ui-kit-react.
Additional useful library for managing chat state in react is: React headless chat hook.
For message transport, you can use a plain websocket, but it's less painful to use Socket.io or uWebsockets
Related
I finished this review app tutorial where we used new theme app extensions to create app blocks for the dawn theme. The code for the extensions was built in liquid.
This may stem from a fundamental misunderstanding of how app blocks work, but could react be used to build the front end instead of liquid? For example, could this file which displays the average review rating be built with React? Thanks for any clarification!
The short answer is yes, of course you can inject your React into the theme using an App extension.
The problem is, you won't be offering any control of that to the merchant. Your React code does not play in the sandbox like Liquid does. So where some aspects of the Block are exposed to the merchant, which is a good thing, none of a React component would be.
If you want to play with React, Themes and Shopify, go with Hydrogen. If you want to stay inside the usual Shopify themes, like online store 2.0, you want to leverage the functionality of Liquid.
Anywho, I could wrong... have at er and see what happens.
I have created a web app using React, Node. I want to enable video conferencing in the app and have already integrated it with Agora and also tried others.
I have also tried using core WebRTC but nothing works so perfectly.
Agora is working fine but its UI is not customizable.
Can someone please suggest me the best option to do so.
A good solution for customization would be Mediasoup. This allows you to make an SFU and completely customize the framework to your needs. It is free and you only need to pay for your own server you deploy it on.
Here is an EXAMPLE PROJECT showing simple multi-user video conferencing with audio/video/screen sharing.
Another option would be the Janus Gateway. Haven't used it yet, but has a prebuilt backend for video/audio conferencing ready for deployment. You can then also customize the UI to your needs.
I am new to React and Vue frameworks. I am learning how to build simple SPA from courses, but there are no courses for MPA/SPA.
For example when I need website with 3 parts: Registration form, Login form, Dashboard
I don't want to use SPA and Router. I want to have those 3 sections served by back-end as 3 different websites. If you asking why, it is because I see this technique on almost every React/Vue powered websites (Instagram, AirBnB, Qualitista, ...)
Can you please explain to me what is best practice and how to implement this and if its worth making? Or am I supposed to just make backend API + SPA no matter what.
I think what you are referring to is called Micro Frontends https://micro-frontends.org but just like Micro Services, it is a solution to an organisational problem, not a technical one.
If you are not Instagram or Airbnb, you'll save yourself a lot of extra work by sticking with a monolithic architecture.
Next.js is a good place to start if you want to be guided into the pit of success https://nextjs.org
I don't know too much about this topic in particular. But after a little searching, this Universal Multi-Page React App looks like it might be a tutorial to do what you're interested in? Also found a little info in this Reddit post about Multi-page React Sites.
Also here's some info about how Vue.js does it from I'mOnlyVueman with a couple articles I found on the topic.
Companies use server-side rendering or preloading to bypass the
limitations of Vue with regard to SEO. Google cannot crawl Vue
components, so serving them from the server allows them to be indexed
before rendering.
Vue.js Server Side Rendering Guide
Server Side Rendering from the Vue.js docs
If you were to ask me a good example to learn multiple page apps I wouldn't go to React/Vue to do this, I'd use MVC. Microsoft has tons of tutorials if you're interested. Create a web app with ASP.Net Core and MVC
Hope this helps!
I'm planning to learn about Nodejs and try to make a website for upload image or embed video from other site for my class.
It likes a public social network with just a just a few blog features for administrator only.
Cause of the limited of myself and the time, I decide to use an open source Nodejs CMS which has almost those function and contribute it to became my class's website.
Please give me some suggestion, are there any CMS like that?
I tried once Relax CMS, it's really powerful.
From GitHub
Relax is a powerful new generation CMS on top of React and Node.js which aims for a better way of building websites.
It features a live page builder based on components and a smart and easy way of binding dynamic data to them.
It's almost ready for production, but you can check the demo out, and the project page https://github.com/relax/relax.
Did you take a look at Strapi (https://github.com/strapi/strapi)?
Halfway between a Node.js Framework and a Headless CMS, it saves weeks of API development time.
Thanks to its extensible plugin system, it provides a large set of built-in features:
Extensible Admin Panel
Authentication & Permissions management
File management
Content Management
API Generator
GraphQL support
Let me know if you have any question.
I'm planning to build a hybrid mobile app,
I have already progressed pretty well with the server-side using Express 3, and PAssport for authentication.
Now I need to make a decision on what framework or library to use for the clinet-side.
I was wondering if I could get some recommendations and perhaps pros and cons of going with frameworks like
Sencha Touch, JQuery Mobile, Phonegap....
and if there is anyother ones that you think it's worth considering please mention them here,
Thanks for any pointers or advice
JQuery Mobile and Sencha Touch are JavaScript libraries that will let you create an HTML5 application that looks like a native application. Cordova/Phonegap lets you wrap your HTML5 app in native code and provides a common JavaScript API that gives you access to native functionality, like taking a picture with the camera or getting the users Contacts. Another benefit of using Cordova is that it creates native applications for you using the same HTML5 app, so you can publish these files to App stores and increase your distribution. With a JQuery/Sencha Touch only app, you can't distribute on app stores because your hybrid app is simply a website (so, I guess it'd only be a mobile app.)
There are hundreds of blog posts comparing different JavaScript frameworks like Sencha vs jQuery vs Dojo, so you should just go off and do some of that reading. Personally I would suggest Dojo as I think it is the most powerful and enterprise ready framework, but it can have a steep learning curve. One thing I like about Dojo though is the build system, you can pick and choose the modules you want so that you don't have to end up including an enormous .js file like JQuery. I have no idea if jQuery can do this, but a lot of user apps I have seen that use Cordova and JQuery end up including all of jQuery and then jQuery mobile.
If you want to access native device features and/or package the web app as a native app and distribute it on the stores, you should use one of those JavaScript frameworks in combinations with Cordova. (Cordova is the new name for PhoneGap.) Phonegap/Cordova is not really used to build mobile web apps, it's used to extend the capabilities of mobile web apps and allow them to access native device functionality in a completely cross platform way.
Ionic is a new framework available for making hybrid apps that I am liking a lot so far. The framework is built with Sass and AngularJS on top of PhoneGap. Ionic just handles the front end so you still build your app with PhoneGap. I found that since it uses AngularJS your javascript code ends up being a lot cleaner and you will save development time making your app slick compared to what you would have to write with jQuery. It also has some beautiful UI elements. The ionic team has done a lot of speed optimizations with the framework so your app will feel more native than your typical hybrid app built purely with PhoneGap. The framework is still in alpha but I have been impressed with it.