I have:

• checked out the source code
• npm install -g firebase-tools (installs version 3.0.0)
• created a firebase account
• created a firebase project
• enabled google, github and twitter auth on the firebase console (creating github and twitter apps for oauth)
• changed FIREBASE_URL in src/config.js to https://<myproject>.firebaseio.com
• npm install && npm run build from the project dir
• firebase deploy

I get a serious of errors about some deprecated features in ./firebase.json once I fix those though it deploys, but when I click any of the authenticate links, I get an Authentication Disabled error even though I have definitely enabled all three auth providers on the dashboard.

Could this be because I am trying to deploy with version 3.0.0 of the firebase tools?

note: some APIs (including auth) have changed.

I would love the ability to add a longer description to a task
Then there would be a plus-button next to the title or something, that when clicked it added a textarea

Then it could be shown/read/edited by clicking a button/icon, like the example I've attached here

I'm not sure why the ejs loader (default for htmlwebplugin) is trying to render the template in the build process. It gets added to the target directory rendering the error, something along the lines of variable not defined.

Let me know if I should share my whole webpack config. Mostly the changes are this:

 new HtmlWebpackPlugin({
      filename: './server/views/index.ejs',
      hash: true,
      inject: 'body',
      template: './server/views/index.ejs'
      // template: './src/index.html'
    })

and this:

  config.module = {
    loaders: [
      loaders.js,
      loaders.scss,
      {
        test: /\.ejs$/,
        loader: 'ejs-loader'
      }
    ]
  };

Thanks

Module parse failed: Unexpected token (11:4)
You may need an appropriate loader to handle this file type.
| const scssClasses = classNames('btn', className);
| return (
|
| {children}
|

I have written the same code but this error shows up and is not getting resolved.Please help.

Im trying to save a value into firebase, however Im not sure how to get it there. Any advice? Is there an example in one of your files that I may have overlooked?

// Empty string for my value
constructor(props) {
super(props);
this.state = {
eventName: ''
};
}

// capturing user's input
saveRecord = (event) => {
var eventName = this.refs.eventName.getValue()
debugger;
};

// Textfield

// Save button
<RaisedButton label="Create" onTouchTap={this.saveRecord}

How do I get this value to drop into firebase.

How did you use :: for self-binding? Is that ES7?

problem with react-hot-loader

I don't see any webpack config resolving imports like src/core/auth. How are you resolving that?

Hope you don't mind me asking via this means, but I have a very quick question about the firebase-list.js class used in https://github.com/r-park/todo-react-redux/blob/master/src/core/firebase/firebase-list.js

I've spent hours studying this code and inserting lots of console logs to track the flow / sequence of events.. I can not wrap my mind around how ref.once function one line 52 is working.

How do you get it to wait until the all the ref.on('child_added' events occur before the .once function emits the list?

I don't see any explicit sequencing here, so I can not figure it out. It appears that events happen in this order:

1. Action starts the subscription.
2. list is initialized as empty array.
3. the .on('value') function fires.. and loads all the items from the ref into the list.
4. the .once function then sets initialized to true and emits the list.

How in the world is the .once function waiting until all the .on('value') process is complete? And do I read this correctly that the .once() is not actually utilizing the data it grabs because there is no snapshot being passed to the callback / no unwrapping?

Can anyone help me understand?

I need to use the express server to provide just one or two API endpoints that can't be served by firebase (to talk to Twilio or some other API). I'm have a very tough time doing so.
I've forked your repo (which is epic by the way) and am trying to do that with this commit:
https://github.com/morgs32/morgans-tt/commit/25d90e5ecdd876d9754d1ebe583ccab3a0b86bae

From what I understand, the htmlwebpackplugin stores the compiled index.html file in memory. So I think the question is, how to get it with res.sendFile?

I may be missing something huge, but I'm unable to locate where you are using redux reducers and actions.

Hello,
I wanted to simulate a deploy with new firebase app. I followed all the instructions and when I deploy there's an issue with the rules I assume.

Here's the console error:

$ firebase deploy

=== Deploying to 'todo-react-redux'...

i deploying database, hosting
✔ database: rules ready to deploy.
i hosting: preparing target directory for upload...
Uploading: [================================== ] 86%✔ hosting: target folder uploaded successfully
✔ hosting: 7 files uploaded successfully
i starting release process (may take several minutes)...

Error: HTTP Error: 400, database.rulesString is not of a type(s) string

I'm new with firebase, any ideas ?

I should mention, when I tried to 'npm run build', karma couldn't open chrome and it canceled the process. after I excluded the test from the build, the app built fine.

Can you point me to a stable version of this app, I really like what you have put together, just can't run it or build it

Angular has a concept in it's ui.router you may know, resolve. I'm wondering if you would recommend doing that for react router, loading all data for a route using onEnter or using your componentWillMount..? Do you know the scalability of each?

Node v 4.1.2
Gulp v 4

acdlite/redux-router#172

I would love to see when a task was added and completed

It could be shown the same way as I described in issue #57

Working on this right now, but maybe you have a fork with email/password login set up?

This is the only functional react+redux+firebase that I've found that actually does what it claims :P good on ya m8

Doing my best, but it's not good enough. If you cold throw an image into your example, that would be great.
I've added

{
    test: /\.(jpe?g|png|gif|svg)$/i,
    loaders: [
      'file?hash=sha512&digest=hex&name=[hash].[ext]',
      'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
    ]
  }

To the webpack config, and still doing this in a component:
const HeroImg = require('./dish.jpg');

Throws an error:

Unexpected character '�' (1:0)
> 1 | ����
[nodemon] app crashed - waiting for file changes before starting...

Thanks!

I am new to ES6 modules - the build for this project takes awhile, I am used to reloading the web app after making changes to client code :)

is there an easy way to do an incremental build with WebPack for this project? Please let me know! thanks for this project!

When I am adding a new route its by default redirecting to the task route again
when I comment the else part of route-resolver

 else if (auth.authenticated && `/${pathname}` !== POST_SIGN_IN_PATH) {
      //replace({pathname: POST_SIGN_IN_PATH});
    }

than its working but page is reloading whenever I change the route.

please suggest a suitable solution

Have you seen this redux auth wrapper? Seems like it's similar to the boilerplate you've set up with Firebase auth in the requireAuth(). Thoughts on integrating it?

• https://github.com/mjrussell/redux-auth-wrapper

I made a new page for all users tasks to be shown. I set the Firebase Rules Read to true to anyone can see them. Any advice to what I need to do to see everyones data ?

I'm getting this error

Why did you include firebase-tools in the dependencies list?
I read the code and I couldn't find the purpose of that. Would you please elaborate here.

I cloned your repo. When, making a change, there is no hot loading.

Failed to compile.

./src/views/components/button/button.js
Module not found: Can't resolve './button.css' in '/dj-projects/django-react-boilerplate/src/views/components/button'

I looked it up, added node-sass module, but it doesn't work, I don't understand the issue

Hi again,

So here is my other question. I'd like to go isomorphic with your starter. This means using ejs (or any other templating language I presume). However, again htmlwebpackplugin gets in the way. It wants to compile the template (with lodash/underscore) as part of the webpack. I need it to leave the ejs templating language alone, so I can have it in the build.

Any thoughts?

Here's a screenshot:

And here's the place in my commit where I isomorphically get the html.
https://github.com/morgs32/morgans-tt/blob/master/server/main.js#L116

Thanks man. If you put one of those "buy me a coffee" widgets in the readme i'd use it in a heartbeat. but i know that's not for everyone.

Hi,
I've built an electron todo app and I've stolen your css because it's awesome.
Hope you do not mind.

I've linked your project in the credits.

https://github.com/vesparny/todoo

;)

I noticed that the logout functionality lacks a confirmation step.

To enhance user experience and prevent unintended logouts, I propose adding a confirmation dialog before proceeding with the logout action.

Tasks:

1. Add a confirmation dialog component to the logout functionality.
2. Display the confirmation dialog when the user initiates the logout action.
3. Provide options for the user to either confirm or cancel the logout.
4. Implement the necessary logic to handle the user's selection, logging out if confirmed or canceling the action if canceled.

Even on https://todo-react-redux.firebaseapp.com/sign-in I get this as well

THis seems to be the only code i came across that integrates firebase+react+es6+redux. would love a video/written tutorial , so a newbie like be can understand. thanks in advance.

babel-plugin-react-transform v2 adds support for babel v6

Transition from webpack/browser-sync combo to webpack/webpack-dev-server.

For production builds, css-loader removes desired vendor prefixes during minification. Disable this behavior with inline param.

Before:

{test: /\.scss$/, loader: 'css!postcss!sass'}

After:

{test: /\.scss$/, loader: 'css?-autoprefixer!postcss!sass'}

Hi Richard,

First of all thanks for a great example that you put together. It provides a solid base to start building apps with React/Redux/Firebase. Which I did...

In my use case I'm looking to have a few thousand of components on one page and wanted to check how React can handle all of them. So I wrote a script that generated 5000 records in Firebase and was waiting for this data to magically appear on /tasks page. When the script ran my page froze and became unresponsive for some time and then crashed. I couldn't load it after that, so I deleted those records and reduced test set to 500 items. Even with a smaller set first load of the page takes ~15-30 seconds. If after that I run a script to generate another 500 records, the page freezes for another 15-30 seconds.

First I thought that the component is "heavy" and so removed all the inputs and SVGs from it, leaving basically just a title text. But it didn't give any performance increase.

So I'm just wondering if it's an expected behavior and this stack can only handle a limited set of data? Or is it an issue somewhere?

I'm pretty new to React/Redux world so it's hard for me to investigate it myself.

Again, thanks a lot for the effort of putting it all together! I hope we can tackle this performance issue as well.

Within the firebase.json. The public is set to "target". When I deploy it doesn't appear to find this path or directory. This is a recent issue. I've deployed fine before. Now all of the sudden it can't find the directory or path. Are you still able to deploy or are you having this issue ?