r-park / todo-react-redux Goto Github PK
View Code? Open in Web Editor NEWTodo app with Create-React-App • React-Redux • Firebase • OAuth
Home Page: https://todo-react-redux.firebaseapp.com
License: MIT License
Todo app with Create-React-App • React-Redux • Firebase • OAuth
Home Page: https://todo-react-redux.firebaseapp.com
License: MIT License
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.
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!
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
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
?
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
;)
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?
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.
Even on https://todo-react-redux.firebaseapp.com/sign-in I get this as well
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!
I cloned your repo. When, making a change, there is no hot loading.
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.
note: some APIs (including auth) have changed.
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.
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
I may be missing something huge, but I'm unable to locate where you are using redux reducers and actions.
How did you use :: for self-binding? Is that ES7?
problem with react-hot-loader
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 ?
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.
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?
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
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
Transition from webpack/browser-sync combo to webpack/webpack-dev-server.
I don't see any webpack config resolving imports like src/core/auth
. How are you resolving that?
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 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
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.
babel-plugin-react-transform v2 adds support for babel v6
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.
I have:
npm install -g firebase-tools
(installs version 3.0.0)FIREBASE_URL
in src/config.js
to https://<myproject>.firebaseio.com
npm install && npm run build
from the project dirfirebase 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?
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?
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
I'm getting this error
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'}
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.
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:
.on('value')
function fires.. and loads all the items from the ref into the list..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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.