ReactPWA/Lobby

https://www.reactpwa.com

Tirth Bodawala

@tirthbodawala

Sure

you can create a file sw.js in src

and add your code accordingly.

tentwentyniel

@tentwentyniel

Thanks. For firebase should we do it in client.js or we can create a js file and import in app-shell?

Tirth Bodawala

@tirthbodawala

Well if you need SSR with firebase the best way should be creating Provider both way client and server side.

tentwentyniel

@tentwentyniel

I don't think I need a provider. I just need to generate token and send it to the server. Will it be better if I do it in client.js? Just the initialization

Tirth Bodawala

@tirthbodawala

Yes then client.js would work.

tentwentyniel

@tentwentyniel

Thank you. Last question. I need to create a file called firebase-sw.js and call it via http://localhost:3003/firebase-messaging-sw.js, does adding js file to "public" folder under "src" still work?

Tirth Bodawala

@tirthbodawala

Yes public folder under src is the best to do that.

tentwentyniel

@tentwentyniel

Thanks @tirthbodawala ! I'll check :)

tentwentyniel

@tentwentyniel

@tirthbodawala public folder works as well as adding script in client.js. Thank you!

jorgelopezowd

@jorgelopezowd

@tirthbodawala hello,I need some help with server rendering, Im using Material UI v3 https://v3.material-ui.com/ , but when I enter by home all load OK, so if I change location and reload the page, server render dont load all CSS, what I can do ? this is my QA project https://tienda-qa.americanadecolchones.com/

jorgelopezowd

@jorgelopezowd

@tirthbodawala Im copy client and server from this repo https://github.com/Atyantik/example-pawjs-material-ui/blob/master/src/server.js, but dosent works

Mati Dastugue

@matextrem

Hey there! I wanted to know if there is any way to add transitions between routes. I noticed that there was an issue related to this some time ago but I don't know if it is productive now and how to implement it.

Tirth Bodawala

@tirthbodawala

@matextrem add transition like animations?

Mati Dastugue

@matextrem

Yep! like fade or slide. I noticed that the pages go blank when redirect

Tirth Bodawala

@tirthbodawala

We are using react-router so you can use https://reacttraining.com/react-router/web/example/animated-transitions

You just need to arrange your code base accordingly. Maybe add app shell that has the animated transitions define at top

Mati Dastugue

@matextrem

Yes, I know it but I dont know how to implement this in the current codebase

Tirth Bodawala

@tirthbodawala

Well you can implement the Transition Provide in the APP Shell

For implmenting a simple app shell please checkout the repo. https://github.com/Atyantik/hn-reactpwa

I hope that helps.

Mati Dastugue

@matextrem

Great! I'll take a look at that. Thanks!

Mati Dastugue

@matextrem

I tried implementing it according to the repository you sent me but it still not working. I'm a bit lost since I don't know how it works.

This is my app shell :

import * as React from 'react';
import { withRouter } from 'react-router';
import './styles.css';

import {
  CSSTransition,
  TransitionGroup,
} from 'react-transition-group';

export default withRouter(props => (
  <>
    <TransitionGroup>
      <CSSTransition
        key={props.location.pathname}
        classNames="slide"
        timeout={1000}
      >
        {props.children}
      </CSSTransition>
    </TransitionGroup>
  </>
));

Is it okay?

Tirth Bodawala

@tirthbodawala

Yes, is this your app shell?

Mati Dastugue

@matextrem

yes, it is

Tirth Bodawala

@tirthbodawala

Its Ok. I am here to assist. :)

          <CSSTransition
            key={location.key}
            classNames="fade"
            timeout={300}
          >

Should it be not location key?

Mati Dastugue

@matextrem

Yes, sorry. That was a typo. I've already fix that

Tirth Bodawala

@tirthbodawala

Still not working?

Mati Dastugue

@matextrem

the problem I'm having is that when I move from one router to another, it goes blank for one second and then the page is rendered

Tirth Bodawala

@tirthbodawala

are you using loadData?

i.e. are your routes loaded after some data is being loaded?

Mati Dastugue

@matextrem

mmm, I have useEffects but i dont think it could be a problem

btw, the slide animation never happens :S

Tirth Bodawala

@tirthbodawala

Can you share a demo code or someting?

Put it on github?

Mati Dastugue

@matextrem

Yes, it is a private repo, but i could add you as a collaborator

Tirth Bodawala

@tirthbodawala

@matextrem I don't think that is good idea, maybe I will create a demo repo with animation and everyone else can use it too as reference.

Does that sound ok?

Mati Dastugue

@matextrem

Oh, it is okay

thanks a lot!

Mati Dastugue

@matextrem

I have another question, I'm changing between pages by making history.push . Could it be a problem?

Yash Thakur

@yash-thakur

Hello @tentwentyniel, I have implemented the Firebase Messaging in ReactPWA.

For a reference you can checkout this repo: https://github.com/yash-thakur/pwa-fcm

Tirth Bodawala

@tirthbodawala

Awesome @yash-thakur you are a saviour.

Create a PR and add it to readme file in React-PWA by creating new section Examples

So everyone can look at it.

tentwentyniel

@tentwentyniel

Thanks @yash-thakur ! I did the same thing but didn't add a provider. Instead watched the notification in another component. Would be useful for the next project. Many thanks!

Where communities thrive

People

Repo info

Activity