I'm about the create a small single page reactjs app that fetches data from 3rd API (let's say youtube videos, so those will be displayed). So I don't need any backend at all, but I'd like to make it offline first with service workers, so if there is no connection it will still display some cached data by default. For this I will use service workers, but don't really know if I have to add any other library or I can just use it right away.
Could somebody tell me what the best way is to implement this small offline-first react app?
If you're looking for a self-contained starting point, https://github.com/localnerve/react-pwa-reference looks promising.
If you're looking for a functional web app to draw some inspiration from, there's https://github.com/GoogleChrome/sw-precache/tree/master/app-shell-demo, which fetches information from the iFixit API, and is conceptually similar to a web app that would fetch information from the YouTube API.
(Just note that YouTube embedded video playback won't work offline, even with service workers.)
Related
Hi everyone I'm in need of some help here with React Native &/or Expo.
The brief version: I built the UI for a streaming app idea of mine. My problem now is finding a way to add content on it!
How can I add music files or MP3 & Videos on React Native (preferably Expo)?
Is there such free database out there or would I have to build something to pass the data to the app itself?
The long version: I had an idea to build a Hybrid Streaming App including music, videos and live events. Now this is my first time building an app ever. I managed to get the UI done in 4 months.
Again I've never done this before so don't crucify me. I managed to use flatlist to create categories which represent: music, videos, podcast, and live events. In those flatlist I passed data which are the artist, image, album & more. I even was able to create a player screen and actually play some random audio file using "Expo-av" using a link. Right now, I'm stuck and still trying to find a way to get an actual library on the app while also figuring out how to pass data from one thing to the next. PLEASE HELP
I'm not sure if there's a good white-label service that would provide metadata and streaming audio/video. Something like MusicBrainz offers an API for metadata, but I don't think they provide audio. There may be companies out there that offer what you're looking for, as I understand it, but licensing for major label music is notoriously thorny, so there may not be a ton of companies that give you drop-in access to something like Spotify's library. If you want people to upload media, you can use something like AWS Amplify to integrate a backend without having to do a lot of devops work.
I have a web-app with Django backend and react frontend where inside an organization or company, there are multiple users. Now, I am trying to implement real-time commenting system where if one user types any comment and posts it, another user will be able to see it without refreshing the page.
I have seen some examples of asynchronous tasks using celery with redis but couldn't find any with react implementation.
What would be a good approach towards achieving the real-time comment system in the react/django app?
Here is an example of simple tasks with celery, redis and WebSockets (Django Channels) and frontend in React (and docker for deployment). The task state and progress are updated over WebSockets https://github.com/pplonski/simple-tasks
The other option will be long-polling, the user will not need to refresh the page, but React will make requests every few seconds to get new data (simple and solid approach). I've seen this approach in many (many) applications. A few years ago I will be afraid of such implementation (too many requests). But now, I will select this approach because of its simplicity.
There's also CollabKit which provide a React commenting system. https://collabkit.dev
We are writing dash board app in React that requires us to fetch data from remote API's asynchronously. Until data s fetched, dashboard widgets need to show a hour glass or something similar. Using hooks, using Redux/Saga, using a local data access service are some of the approaches we considered. We are mostly biased towards using Redux/Saga for this but want to check if there are any standard/recommended patterns used by react community.
Recent days I've seen these two libraries circling around community posts, haven't tried them myself, but maybe will be useful to your project:
https://github.com/zeit/swr
https://github.com/tannerlinsley/react-query
I am creating a chat app using ReactJS for a class project web app. For the back-end I am using Rest API. So ideally when I post something on the chat, I would use POST and when I receive a message from the other end, I would use GET. In terms of POST, I figure I can associate that with an event, such as pushing the submit button for the chat app. However, I am racking my mind for how I would call GET for receiving a message. Would it be as simple as using a React life cycle function, such as ComponentDidMount to call GET for receiving a message? Or would I need to use a timer with one of those functions? Or is there a radically different method altogether? From what I see of the life cycle functions, they only update based on changes in state and props.
Quite a lot of questions you have there. I will provide one possible solution.
Choose or implement chat UI, I recommend using https://github.com/PeterKottas/react-bell-chat as it's very easy to setup.
Implement backend, I recommend dot net core as it's fairly easy to wire this up in that framework.
Forget GET-ing messages on a timer. Imagine you have 1000 users getting every 5 seconds. That's a home-brew DDOS attack. Instead use bidirectional communication.
SignalR is the library that can help you implement that, you google the official repo, there's plenty of examples.
Connect to signalR on front end using the javascript (or typescript) client they provide.
And you're pretty much done.
Here they use angular but you should get the gist of it https://codingblast.com/asp-net-core-signalr-chat-angular/
I've got an old app I wrote in Node, Mongo, Express and Handlebars. It seems to be a bit outdated in the sense that it was more static and all data was called locally off the same domain and rendered with Handlebars on the server side, which I thought was always necessary for SEO and it wasn't built with the idea of later building and connecting the data to a mobile version.
I've been using React a lot lately as well as looking into building mobile apps and with the tutorials out there, it seems like most apps these days are designed in a way that the backend is mostly a remote api with cross site origin requests enabled and a frontend that just gets the data from it and parses it on the frontend whether it's a desktop client or a mobile client.
What would be the best way to modernize my old app that'd keep it rendering on the server side using react instead of handlebars for SEO, while also having an api service for if I were to develop a mobile version that could get and parse the data?
There's a lot of server side rending react tutorials out there, but I'm not sure what the best approach is.
To turn your current app into a SSR (server side rendered) react application would be a big ask.
You would have more luck ripping out the html / handle bars response and just returning JSON instead, effectively turning it into an API.
In terms of adding a SSR react layer, the easiest option would be to use something like Next.JS. This does the heavy lifting for you to create server side rendering. There are plenty of other options out there but Next is one of the best and probably the easiest to get going with.
You would then make API calls from your SSR Next / React app to the Node API.
You can reuse the same API for a mobile application if you chose to go down that path at a later stage.
You would then make API calls from your SSR Next / React app to the Node API.
You can reuse the same API for a mobile application if you chose to go down that path at a later stage.