rajaraodv / react-redux-blog

A sample React Redux CRUD app

React Redux CRUD App

Note: As of Nov 30th 2016, the code has been updated to work w/ latest versions of its dependencies!

#Live App https://protected-escarpment-79486.herokuapp.com/

#Blogs 🎉 If you like any of the posts, please share it on Twitter (@rajaraodv)🎉

1. Step by Step Guide To Building React Redux Apps
2. A Guide For Building A React Redux CRUD App (3-page app)
3. Using Middlewares In React Redux Apps
4. Adding A Robust Form Validation To React Redux Apps (Note: There has been significant change in redux-form lib and the latest code only reflects half of what's in the blog)
5. Securing React Redux Apps With JWT Tokens
6. Handling Transactional Emails In React Redux Apps
7. The Anatomy Of A React Redux App

#Running On Heroku You can create your own version of the app (including MongoDB!)

#Local Installation

1. Install Node.js
2. Install MongoDB
3. git clone https://github.com/rajaraodv/react-redux-blog.git
4. cd react-redux-blog
5. npm install
6. Create a free PostMark account for sending (confirm email, forgot pwd) emails.

• Export Postmark credentials to environment
• export POSTMARK_API_TOKEN=<getApiTokenFromWInPostmark>
• Alternatively, you can run the app on Heroku, add Postmark addon (which adds a free account and sets POSTMARK_API_TOKEN to the app running on Heroku). You can then get that POSTMARK_API_TOKEN by running: heroku config:get POSTMARK_API_TOKEN and then export the token to the terminal. This will now allow you to send email from localhost.

####Preventing Emails From Getting Blocked by GMail, Yahoo etc. NOTE: In order to send email via PostMark or Sendgrid, you need to verify sender's email(from address). In PostMark you can do that by setting your company or other private email(e.g. [email protected]) and verifying that. Then you can use THAT company or private email(e.g. [email protected]) in the FROM address.

#Running Locally You need two terminal windows open, one for client and the other for server.

####Development

1. In terminal 1,
   1. export JWT_SECRET=somesecretstring <-- This is used to generate JWT tokens.
   2. export POSTMARK_API_TOKEN=<getApiTokenFromWInPostmark> <-- Email
   3. `export FROM_EMAIL= <-- "From"-Email Address that you verified w/ PostMark
   4. run npm start. This runs the app server (Express).
2. In terminal 2, run: npm run dev. This runs the development server(webpack-dev-server).
3. Open browser and go to: localhost:8080

export JWT_SECRET=somesecret
export POSTMARK_API_TOKEN=bla-bla-bla-9619-a6d1185548cd
export [email protected]
export NODE_ENV=development

####Note: If you open localhost:3000 in browser, you'll see a "stale" production app, so while in development, always go to localhost:8080

####Production In production, we need to compile the latest client js and place it to public folder. This allows the main app server(Express) to also show the final app.

1. Generate latest React app: npm run build.
2. In terminal 1, run npm start. It will be running both the server and the client.
3. Open browser and go to : localhost:3000.

#Cloning Locally And Pushing To Heroku Running your own instance on Heroku.

1. git clone https://github.com/rajaraodv/react-redux-blog.git
2. cd react-redux-blog
3. heroku login (enter heroku credentials)
4. heroku init
5. heroku create
6. heroku addons:create mongolab <-- Add Mongolab test DB (free tier)
7. heroku addons:create postmark:10k <-- Postmark Email (free tier)
8. git push heroku master

###Making changes to your app and pushing it to Heroku Everytime you make changes to the front end, you need to build it, and do git commit before pushing it to Heroku test server.

1. npm run build #build new React app JS
2. git add . #Add change to git
3. `git commit -m ""
4. git push heroku master
5. heroku open

I usually have something like below that combines all the steps. I just change the commit message everytime.

npm run build && git add . && git commit -m "made changes" && git push heroku master && heroku open

react-redux-blog's Issues

Post Id

I can't for the life of me figure out how to get the post Id. Can someone show me line number where the post id is created or how it's created? I have a router setup that's similar to this project post/:id. I'm pretty sure the id isn't created on the postNew component. Maybe it's the redux form that creates it? Right now in my project the post leads to post/undefined on the postList component. I'm thinking maybe it's the postDetails component that actually does the state management to give the id. Right now when console.log(this.props) I'm getting the router props but the id is always undefined.

Run production mode with forever / pm2

I try to run the build through FOREVER or Pm2. Any ideas how to do it? With pm2 says it runs but it does not work

pm2 start node ./bin/www

i run: npm run dev: show message errror, please fix issue

ERROR in multi (webpack)-dev-server/client?http://localhost:8080 ./public/src/index.js
Module not found: Error: Can't resolve 'babel' in 'E:\Source Code Personal\ReactJS\react-redux-blog-master'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
You need to specify 'babel-loader' instead of 'babel',
see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed
@ multi (webpack)-dev-server/client?http://localhost:8080 ./public/src/index.js

MongoDB link links to OS X guide

The "Install MongoDB" link actually links to the "Install on OS X":

https://docs.mongodb.org/manual/tutorial/install-mongodb-on-os-x/#install-mongodb-community-edition-with-homebrew

It should probably link here:

https://docs.mongodb.com/manual/installation/

its not working in Mozilla

INITIAL_STATE loading prop

Hi. Should the INITIAL_STATE loading prop not be set to true and only set to false on either FETCH_POSTS_SUCCESS or FETCH_POST_FAILURE?

The loading prop currently is only set to true once the axios promise is resolved due to using the redux-promise middleware. If the initial value of loading is set to true then as soon as the request is initiated loading is true.

Just an observation.

Uncaught TypeError: dispatch(...).then is not a function

I got this error from public/src/containers/PostsListContainer.js and I think the reason is fetchPosts from public/src/actions/posts.js returns a regular js object instead of a Promise that is thenable. As a result I can't get the posts list to show. Anyone else had the same issue?

Forgot Password Module

First things first - after downloading many react-redux starter projects and repos, your's has been by far the most comprehendible to me. Thanks very much. The fog is clearing.

It looks like the actions for the forgot password functionality that are referenced in /containers/ForgotPwdFormContainer...

import {forgotPwd, forgotPwdSuccess, forgotPwdFailure, resetUserFields } from '../actions/users';

... don't exist in the repo. Do they exist, but did not get pushed up to GH? If you did write them and wouldn't mind sharing them, it would be very much appreciated.

Thanks for sharing this great work

renderField and onchange

How the onChange is handled in this example?

react-redux-blog/public/src/components/renderField.js

I am little bit confused here. My example I type anything in the text box doesnt appear.
Please help.

Access another user by changing token from session storage

Step to reproduce :
Register with USER 1 ,
Login with USER 1
Copy Token from session storage from user1; Logout user 1

Register with a USER 2
Login with USER 2
Paste in session storage Token of user1 into user2 .
refresh a page you will observe User one dashboard again instead of User 2.

Same issue I am facing with JWT

webpack doesn't find configuration

➜ npm run dev

[email protected] dev /Users/tony/Projects/react-redux-blog
node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

• configuration.resolve.extensions[0] should not be empty.
  -> A non-empty string

Token is always undefined?

Thank you for your sample app, this is a great learning resource for me. I'm currently trying to make use of your authentication middleware in the app.js file. However, whenever I run the application, create a user and log in with that user, at no time there is a token defined after this line:

var token = req.body.token || req.query.token || req.headers['x-access-token']; console.log('Token: ', token); // <--- always gives me 'Token: undefined'

The login process runs just as expected, the user gets created in mongo and everything looks fine, except for the empty token. It does not matter if I run the production version or the dev version on 8080, I also tried it with Firefox and Opera (on Linux).

Is this an error that is caused by my environment or can you confirm this behaviour? I have been fiddling around with this for some hours now, but it seems I'm too unexperienced with that for now.

Bestr regards,
Rob

Showing error on installing the dependencies

Hi rajaraodv, thanks for providing us a such as a nice app, which we can study and learn the redux app with mongodb support, I search the web but couldn't found a good example like this. i learned a lot from you, Please help me in this app.

i have downloaded the repo but when i try to install the dependencies, i got the following error. If you have some time, please take a look. thanks in advance

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\ch
okidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.0.17: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"
})
npm ERR! Windows_NT 6.3.9600
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\
node_modules\npm\bin\npm-cli.js" "install"
npm ERR! node v7.4.0
npm ERR! npm v4.0.5
npm ERR! code ELIFECYCLE

npm ERR! [email protected] install: node-gyp rebuild
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script 'node-gyp rebuild'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the bcrypt package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node-gyp rebuild
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs bcrypt
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls bcrypt
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! F:\react-redux-blog\npm-debug.log

Line 37 of posts.js has trailing zeros

On line 37 of posts.js...

https://github.com/rajaraodv/react-redux-blog/blob/master/routes/posts.js#L37

there are two trailing zeros. Are they intentional?

demo page is not working

ROOT_URL constant

First of all, thank you for your great posts on Medium explaining Redux step by step! Really helped me understand the basics of Redux.

I was going through your code in this repo and saw the ROOT_URL constant a few times. I was wondering why you're checking wether the ROOT_URL includes localhost or not. What's the advantage of using relative paths when running the app on localhost?

This is not an issue but more a question in general :)

The heroku demo link does not work

The demo link given https://protected-escarpment-79486.herokuapp.com/ seems to be down.

(Your blog posts are very helpful!)

Question about return from signInUser action to dispatch in signInUserContainer

I'm obtaining a Promise from axios.post() in request on UserAction, that is asigned to payload attribute at return { type: SIGNIN_USER, payload: request }, but at dispatch I can't use this promise with .then(), Why you can do this? I had to do this:
let response = dispatch(signInUser(values)); response.payload.then();
What is the difference in your code?

If you are interested, I have posted a question in StackOverflow about it, but I haven't received answers.

Dead project?

From the issues filed here, looks like the project is no longer maintained?

If so, would it help to link to currently maintained alternatives?

• CRUD for GraphQL backends
• CRUD for RESTful APIs

Backend web development

Good

Refreshing post gives 404 not found

Reproduce: Click demo link in the README, click on a post (I choose the first one), hit refresh.
Expected: To see the post
Actual: Not found

SSR: have you tried to get this working with server-side rendering?

I'm interested as id like to see a technique of hitting the protected area, once the user is logged in, on a page refresh. I'd like not to have to verify on the client...

Router.js:130 Uncaught TypeError: _this.setState is not a function

For those who have this issue. it seems that react-router uses create-react-class, which will need to be aliased to the preact-compat version with webpack, browserify or babel, e.g:

// webpack.config.js
module.exports = {
// ...
    alias: {
        'react': 'preact-compat',
        'react-dom': 'preact-compat',
        'create-react-class': 'preact-compat/lib/create-react-class'
    }
}