Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Nov 12 16:13

    dependabot[bot] on npm_and_yarn

    Bump minimatch from 3.0.4 to 3.… (compare)

  • Nov 12 16:13
    dependabot[bot] labeled #3072
  • Nov 12 16:13
    dependabot[bot] opened #3072
  • Oct 12 16:02
    code-by edited #3071
  • Oct 10 17:19
    theumairriaz commented #3067
  • Oct 06 05:52

    dependabot[bot] on npm_and_yarn

    Bump css-what from 2.1.0 to 2.1… (compare)

  • Oct 06 05:52
    dependabot[bot] labeled #3070
  • Oct 06 05:52
    dependabot[bot] opened #3070
  • Sep 27 23:32
    binaryfire commented #2906
  • Sep 15 12:34
    huwaizatahir2 opened #3067
  • Aug 17 17:58
    Pavan90 commented #2912
  • Aug 16 23:42
    SauveJeanLuc opened #3065
  • Jul 22 15:39
    MokonyanaT commented #2929
  • Jul 22 11:17
    harishydav closed #3042
  • Jul 18 07:18
    Techi-Dev commented #3062
  • Jul 18 07:13
    Techi-Dev commented #3062
  • Jul 06 17:04
    close-issue-app[bot] closed #3064
  • Jul 06 17:04
    close-issue-app[bot] commented #3064
  • Jul 06 17:04
    arye321 opened #3064
  • Jul 05 03:57
    mjtechnavious commented #2812
jose sebastian manunta
@smanunta
hey there, new to the channel and had a question regarding how to use code after running it through npm run build.
Steps i have taken: created my application using the npm start command to run the dev server. I have now completed the app and want to run a build that will spit out production code. Now that i have the production code how to i use it?
cumibulat
@cumibulat

hi @smanunta have you check this docs https://github.com/react-boilerplate/react-boilerplate/blob/master/docs/general/commands.md ?

if you have run the npm run build command, then you will get your production code in build folder. I copy that build folder content to my Apache HTTP Server, i use apache http to server my app.

nouman nawaz
@noumanDev

here is the code from app/homepage/saga.js
i want to know if we can get and pass errors that exists in body of the request inside catch block, because err.response is a promise, i do not know how to get errors from body, currently it uses statusText for errors

export function* getRepos() {
// Select username from store
const username = yield select(makeSelectUsername());
const requestURL = https://api.github.com/users/${username}/repos?type=all&sort=updated;

try {
// Call our request helper (see 'utils/request')
const repos = yield call(request, requestURL);
yield put(reposLoaded(repos, username));
} catch (err) {
yield put(repoLoadingError(err));
}
}

Mathias Hoffmann
@liitfr
Hi there ! I would like to know if some of you have implemented a way to display a notification to users when a new version of app is available on server. it should be possible with offline-plugin but this one is installed outside of React context. any advice or example would be greatly appreciated, thanks !
Mathias Hoffmann
@liitfr

maybe i could move

if (process.env.NODE_ENV === 'production') {
  require('offline-plugin/runtime').install(); // eslint-disable-line global-require
}

in my App constructor ?

then I could define onUpdated callback function and dispatch a custom showNotif action. What do you think ?
Michael Cuneo
@michaelcuneo
@liitfr There is a tutorial somewhere about this that I have read recently… I’ll find it. It is to do with serviceworker, and the chunk loading… I have a lot of issues running dev environments across demonstration environments because of each system caching different versions of the chunks and had to fix it with the tutorial mentioned… I’ll ping you again soon as I find it.
@liitfr The solution they give, is exactly that though… loads up old version, notifies user that their is a brand new version, and doesn’t load the new chunks interfere with the user session until the user physically interacts with the notification window and says ‘Yeah, or Nah.'
s/their/there
Mathias Hoffmann
@liitfr
@michaelcuneo thanks for your feedback. Did you find this example ?
i've read https://zach.codes/handling-client-side-app-updates-with-service-workers/ which is shown as a best practice in several tutorials / threads.
But it doesn't look ideal for me, since it means that user has to navigate in your app in order to get latest version.
In my case, i would like to be sure that if a user directly goes to a specific route, and doesn't browse at all,
he still gets notified that his app version isn't the latest ...
Michael Cuneo
@michaelcuneo
The difference is just some simple logic
Mathias Hoffmann
@liitfr
haha no need to be pedantic if it's that trivial !
jose sebastian manunta
@smanunta
@cumibulat hey thanks for the response.. follow up question. after running the build, inside my build folder i have about 30 files with all encoded names. some are .js, .png, .ttf, and then the index.html. My questions are do those files sound correct and should i be able be to render the app by just opening the index.html OR does it need to run through a server first?
nikjohn
@nik-john

Hi, I'm new to this room but have been using react-boilerplate for a while now. I have a query about nested Redux states and would really appreciate it if someone can help me figure this out.

As per the redux docs, it's most advisable to keep the redux state separated as domains.

{
    simpleDomainData1: {....},
    simpleDomainData2: {....},
    entities : {
        entityType1 : {....},
        entityType2 : {....}
    },
    ui : {
        uiSection1 : {....},
        uiSection2 : {....}
    }
}

How do achieve this data structure in react-boilerplate? I have been creating my Containers using the built-in generators, and keeping them all at the same level like so:

App
|__ Components
|__ Containers
      |__ Container1
      |__ Container2
      |__ Container3
      |__ Container4
      :
      :

My redux state is super normalized like so:

{
  route: {
    location: {
      ....
    }
  },
  container1: {
    data: {}
  },
  container2: {
    data: {}
  },
  container3: {
    data: {}
  },
  container4: {
    data: {}
  }
}

But I am now at a place where I need to nest Containers 2 and 3 within Container 1 (according to the business logic). How can I also mirror this structure on my redux store?

{
  route: {
    location: {
      ....
    }
  },
  container1: {
    data: {
          container2: {
                 data: {...}
           },
           container3: {
                data: {...}
           },
       }
  },
  container4: {
    data: {}
  }
}

How can we use injectReducer to implement nested states? Or is there another approach that you all use? TIA!!

nikjohn
@nik-john
@mxstbr I'm not sure if the norm is to tag you personally, so sorry if I'm breaking protocol here. Would love to hear your input on this. I saw a few discussions on GitHub but nothing pertaining to this exact issue. There was one issue on Stackoverflow that went unanswered as well. I realize this is a basic question, but I somehow don't seem to be able to wrap my head around it
nikjohn
@nik-john

I have tried having all of the reducers for Container1 defined under /Container1, thereby giving me control of the whole state, but that seems like an anti-pattern

I haven't yet tried nesting Containers 2 and 3 inside Container1 because I couldn't figure out how the injectReducer util would work under those circumstances.

cumibulat
@cumibulat
@smanunta yes you need server to serve your app.
saeedjalali
@saeedjalali1
Hi everyone.
I have a question about the new version of Babel.
I found in dev branch you adding babel 7. Is it possible to use together Typescript file and JavaScript file?
rayman1104
@rayman1104
Hi!
I'm using react-boilerplate for almost half a year. And my question is... Do I really need reducers & saga asynchronous injections?
Seems like that is very small part of code, but sometimes it's very inconvenient when I can't use reducers from other component that is not loaded.
Maybe someone can explain what's the point of not loading all sagas and reducers when user is logging in to the app? Is there real performance difference?
Troy Dietz
@troydietz
@rayman1104 You do not need to load reducers and sagas async that live and die with components. They included the more complicated approaches (withReducers, withSagas), but you do not need to use them. I personally have several use cases where global sagas and global reducers make sense, and thats exactly how I implemented it.
rayman1104
@rayman1104
@troydietz Thank you for the answer! I'll drop "reducers and sagas that live and die with components" pattern and will group them more wisely.
Maybe I should use provider-components that won't render anything and only have some reducers and sagas logic? For example authProvider component that has all auth reducers and sagas and I can include it wherever I want. Or only include its saga, reducers with injectSaga({ key: 'authProvider', saga });
Troy Dietz
@troydietz
@rayman1104
Troy Dietz
@troydietz
I don’t think you should create components for the simple purpose of implementing a global reducer or saga. Components are intended to be a mechanism for implementing things you can see, like html. In my opinion, you should add global reducers in the reducers.js file. I don’t have my repo open at the moment so I can’t check, but I’m pretty sure there’s one example in react-boilerplate already. I think it’s the language reducer or route reducer. I’d follow that pattern. As far as global sagas, react-boilerplate does not have architecture for that yet. This is an acknowledged missing feature. This issue has been raised in the past and the contributors are aware of its common use case. However, no one has created a PR that implements global sagas. I have my own implementation. I created a sagas.js file, much like the reducers.js file that comes with react-boilerplate. If you follow the redux-saga docs, it’s not hard to implement your own. If you’d like to see how I did it, send me your email. I also may attempt to open my implementation as a PR on the react-boilerplate in the future.
rayman1104
@rayman1104
@troydietz Ok, but I can't understand where is the line between making all reducers and sagas global and making some sagas-reducers global, some local. Is it ok to have all reducers in global scope or is it bad design? Looks like there is no big performance gain in loading reducers-sagas only when a user opens the exact page.
BTW, if you think that putting sagas-reducers in the dumb component is a bad idea, what do you think about using TopBar for such purposes? :) I have TopBar on all pages in the dashboard, so I can put all sagas-reducers in this component as a dirty hack.
Arnaldo Gabriel
@agmm
How can I get the url parameters from a React component?
nikjohn
@nik-john

@agmm If you are in a component wrapper in withRouter, you can just do something like this:

function Component(props) {
console.log(props.match, props.location);
}
.
.
export default withRouter(Component);

If your component is wrapper in the withRouter HoC, match, location etc will be passed in as props

Arnaldo Gabriel
@agmm
@nik-john Thanks. I will give it a try.
trung-pham
@trung-pham
is there anyway i could use multiple FormattedMessage with Helmet ?
Ghulam Hussain
@ghulamhussain
is there any resources to convert react-boiler plate app to react-native app.
BaptisteGarcin
@BaptisteGarcin
Hi, how can I add hot reloading to the server directory, I tried nodemon but it prevents the page from automatically refresh
BaptisteGarcin
@BaptisteGarcin
@nik-john
Sean
@Globolobo
@BaptisteGarcin Checkout the hot reload middleware's github page, they have some links there to do it
Kamran Nazir
@Kamran1122
Hello guys is it possible to use css-modules and sass together in react-boilerplate?
BaptisteGarcin
@BaptisteGarcin
@Globolobo I read the doc and tried to pass webpack-hot options in addDevMiddlewares.js withotu succcess
Swapnil Bukkawar
@swapbuk
Hi, I am trying to add antd module to react-boilerplate 3.6.0 , but its not working . is anybody having such issue ?
Swapnil Bukkawar
@swapbuk
How to add third party lib in react-boilerplate ?
Jim Lesperance
@cooljl31
Hi @swapbuk please read the Doc Specifying dependencies
Swapnil Bukkawar
@swapbuk
@cooljl31 thanks Jim
Carlos Santiago
@csantiago132
hi, how exactly the server gets added to the buil?
Gabriel Fernandez
@hotdesc

Hello everyone,

Could someone explain to me the best way to integrate the admin-lte template with boilerplate? I was very much in doubt about the best way to add deployments like jquery and bootstrap

Karma Drukpa
@coderkarma
learning react now.
how can I render a component into the DOM?
Any help will be appreciated.
Tobias Winkler
@hurrtz
hey folks, i am wondering: why does react boilerplate use .js files over .jsx? is there a specific reason for this decision?
Tobias Winkler
@hurrtz
howardya
@howardya
has anyone has seen a pwa version of this boilerplate with service worker setup?
liujian zhang
@ziaochina
React that can't see the jsx.makajs.org
Jack
@jackdh
Hey, have I broken someting or is state not meant to persist when hot reloading?
Đặng Xuân Quang
@xquangdang
Hi there. Anyone having problem with content download is too slow?
My main.js is about 800kB (~200kB gzip) but it take almost 0.5s to download the content