hashnode / mern-starter Goto Github PK

On a brand new install, the app isn't rendering due to a missing prop.

Warning: Failed propType: Required prop posts was not specified in PostContainer. Check the render method of Connect(PostContainer).

Is this a new guy error or has something changed?

node -v #v5.6.0
npm -v #2.14.19

update
It appears that window.__INITIAL_STATE__ === {} since fetchComponentData in server.js is throwing SyntaxError: Unexpected token <. Is something not being babel-ified?

In client/index.js, there is a

import createBrowserHistory from 'history/lib/createBrowserHistory';

However, this is never used.

What is the purpose of this import ?

To stay consistent in our shared/components folder requesting to make sure all js file ext are jsx

currently all files are .jsx except for PostListItem.js

will do a PR to update this

HI Guys,

curious if there is a road map being planned and ways to contribute.

Cheers

Please implement languages support with react-intl
Vote +1 for this feature

The environment variable NODE_ENV cannot be set via the npm start command

PS B:\Projects\MERN\testApp> npm start

> [email protected] start B:\Projects\MERN\testApp
> NODE_ENV=development node index.js

'NODE_ENV' is not recognized as an internal or external command,
operable program or batch file.

Using powershell on Windows 10. Does not work with cmd either.

Need to investigate a cross platform method for setting the environment variables and starting the server.

I just go to demo website, but currently the website unavailable.

Hey guys!

I'm tried to install and use mern (0.0.1 installed as global) on my OSX (10.10.5) with NodeJS v5.5.0. After successfully creating new project with merv <project_name>, I did npm install. And the when i try to npm start I get following crash.

npm start        

> [email protected] start /Users/otobrglez/Projects/dodo
> cross-env NODE_ENV=development node index.js

MERN is running on port: 8000! Build something amazing!

/Users/otobrglez/Projects/dodo/node_modules/mongodb/lib/server.js:236
        process.nextTick(function() { throw err; })
                                      ^
Error: connect ECONNREFUSED 127.0.0.1:27017
    at Object.exports._errnoException (util.js:856:11)
    at exports._exceptionWithHostPort (util.js:879:20)
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1062:14)

npm ERR! Darwin 14.5.0
npm ERR! argv "/usr/local/Cellar/node/5.5.0/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v5.5.0
npm ERR! npm  v3.5.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `cross-env NODE_ENV=development node index.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script 'cross-env NODE_ENV=development node index.js'.
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 mern-starter package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     cross-env NODE_ENV=development node index.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs mern-starter
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls mern-starter
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/otobrglez/Projects/dodo/npm-debug.log

This is ziped NPM debug log: npm-debug.log.zip

Any ideas?

Cheers!

on mern.io, clicked "Made with ♥ by Hashnoders" expecting to go to the hash noders website. The text doesn't have a link. This is my error. I don't want to debate whether it's actually a true error, please just use my advice to fix your website. Good luck with MERN.

Hi,

Is there a plan to add a JWT auth flow to the boilerplate ?
The challenge here could be server side rendering, as JWT are stored in localStorage.

Hi guys,

noticed not a lot of comments regarding code to help explain. you guys open to commenting code?

Issue:
Knowing that the test GET /api/getPosts is hard coded to add exactly two posts to the database, I figured I'd try to speed up the test (mocha is often warning me these are taking >300ms) by hard coding the expectation:

  it('Should correctly give number of Posts', function (done) {
    request(app)
      .get('/api/getPosts')
      .set('Accept', 'application/json')
      .end(function (err, res) {
        expect(res.body.posts.length).to.equal(2);
        done();
      });
  });

Unfortunately, in doing so I noticed that the test inconsistently fails with the change. I logged res.body.posts and it seems to be using the mern-starter database data:

res.body.posts:  [ { _id: '56c899d05eff2e3e9c205060',
    content: 'Sed ut perspiciatis unde omnis iste natus error\n      sit voluptatem accusantium doloremque laudantium, totam rem aperiam,\n      eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae\n      vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit\n      aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos\n      qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem\n      ipsum quia dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit,\n      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n      enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi\n      ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit\n      in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n      occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n      est laborum',
    cuid: 'cikqgkv4q01ck7453ualdn3hd',
    slug: 'hello-mern',
    title: 'Hello MERN',
    name: 'Admin',
    __v: 0,
    dateAdded: '2016-02-20T16:52:32.105Z' } ]

With that knowledge, I'm not sure why:

1. the data is not the expected data set
2. this data randomly comes back with only one post?

Test runs:

 joshmatz@matzpro  ~/Projects/mynewapp   master ● 
» npm run test:server -s


MERN is running on port: 8080! Build something amazing!
  GET /api/getPosts
    ✓ Should correctly give number of Posts (691ms)

  GET /api/getPost
    ✓ Should send correct data when queried against a title (181ms)

  POST /api/addPost
webpack built b33d025a8833ae819e84 in 2593ms
    ✓ Should send correctly add a post (736ms)

  POST /api/deletePost
    ✓ Should connect and delete a post


  4 passing (3s)

 joshmatz@matzpro  ~/Projects/mynewapp   master ● 
» npm run test:server -s


MERN is running on port: 8080! Build something amazing!
  GET /api/getPosts
    1) Should correctly give number of Posts

  GET /api/getPost
    ✓ Should send correct data when queried against a title (204ms)

  POST /api/addPost
webpack built b33d025a8833ae819e84 in 2669ms
    ✓ Should send correctly add a post (493ms)

  POST /api/deletePost
    ✓ Should connect and delete a post


  3 passing (3s)
  1 failing

  1) GET /api/getPosts Should correctly give number of Posts:

      Uncaught AssertionError: expected 1 to equal 2
      + expected - actual

      -1
      +2

      at Test.<anonymous> (post.spec.js:58:42)
      at Test.assert (node_modules/supertest/lib/test.js:156:6)
      at Server.assert (node_modules/supertest/lib/test.js:127:12)
      at emitCloseNT (net.js:1521:8)

Environment:
mongo: 3.2.3
node: 4.2.2
OSX: 10.11.3

Hi, when I add material design components provided from the material-ui library to my project, server rendering fails and it prints the following to the console.

Server-side React render was discarded. Make sure that your initial render does not contain any client-side code.

According to the material-ui doc, I tried to add

app.use(function(req, res, next) {
  GLOBAL.navigator = {
    userAgent: req.headers['user-agent']
  }
  next();
});

to /server/server.js.
However, it still does not work.

Can you please provide a set of instructions to resolve this issue?

Thank you very much

Hi,

Can we put mern-cli into scripts section of package.json, please.
Each project can have it's own mern-cli version.

...
"scripts": {
  ...
  "mern-cli": "mern-cli",
  "cross-env": "cross-env",
  ...
}
...

Now we can use mern-cli by calling npm. npm run mern-cli <mern-cli-command> or npm run cross-env <cross-env-command>

If there's interest, I can submit a PR, I recently added this to my project using mern...cool project!

node -v
v5.5.0
npm -v
3.3.12

git clone [email protected]:Hashnode/mern-starter.git
npm install
npm run build

ERROR in ./~/redux-devtools-log-monitor/lib/index.js
Module build failed: Error: Couldn't find preset "es2015-loose" relative to directory "node_modules/redux-devtools-log-monitor"

See http://editorconfig.org/

Is there any interest in using webpack on the server for production, as outlined here. If there is interest, I can submit a pull request.

I hit npm start and got long error message about failed server. I took some time to figure out that I need to install mongodb add it to path and have mongod running in other console window. All other tasks are run by npm, so I expected it would just work.

It the beggining it gave me a nice warning about not having git installed. It could do the same with mongodb.

According to this article, each component should fetch the data it needs on componentDidMount method, so, for instance, it wouldn't be necessary for PostDetailView to do this when clicking on the root route link:

handleLogoClick() {
  this.props.dispatch(Actions.fetchPosts());
}

PostDetailView shouldn't have to load data for PostContainer, in fact, it doesn't even have to know what data PostContainer needs, otherwise, every component that links to another would have to manually load data that's not relevant to itself, what's absolutely tedious and a nightmare to maintain.

The problem with this it's made clear doing this:

1. Open the app (ie, http://localhost:8000/)
2. Click on a post title (now the url it's /post/lorem-ipsum)
3. Reload the page
4. Click on the browser back button
5. Now the url it's http://localhost:8000/ and the post's list is empty

This boilerplate doesn't come with any css/scss/stylus/less or assets loader that will automatically read the file located in each component. Example:

Footer.scss
Footer.js
logo.png

Is there any plan to make this configuration? This isn't as simple as people might think due to isomorphism. Any pre-configuration will be great!

For server side rendering, the initialState is set thanks to:

const initialState = { posts: [], post: {} };

const store = configureStore(initialState);

Wouldn't be better to set initalState to null, so that the initialState is handled by reducers ?

Moreover, as it is a boilerplate, most people won't have posts in their app, and this initialState is a little hidden in server code.

After fiddling around with MERN, I came across some thoughts I would like to share with you. A solid MERN kit/boilerplate is great, and making it more awesome would be … so much more awesome!

I'm aware that MERN is inspired by some well-known tutorials – but they aren't perfect. So let's try to make it better!

1. Isolating webpack-dev-server and actual server
   Since webpack-dev-server runs with express, and the "api-server" runs with express, it's very easy to combine both. But combining them causes webpack to initialize and rebuild everytime you need to restart the server (e.g. changes in server-controllers, which don't require a fresh webpack-build). Additionally a server-restart takes a few seconds to transpile the ES6 Syntax. All in all it takes too long for a satisfying experience.
2. css/assets and isomorphic rendering
   Currently MERN doesn't support importing css or assets (like images), because the server can't import/require these files. This is a problem I encountered myself several times and my only solution was to decide against isomorphic rendering. 😕 Maybe webpack-isomorphic-tools could help, but I haven't found any time to try it.
3. Directory structure
   It's popular and used in some well-known tutorials to use client, server, shared and also to have the redux-things in shared/redux/.... Since MERN forces you to use redux (which is good, because redux is awesome), I don't think this structure necessary. E.g. digging through directories to open shared/redux/constants/constants.js is a bit of a hassle. Also, importing ../constants/constants seems redundant.
   Directories help grouping related files together for a clear structure, but overdoing your directory structure causes the opposite: confusion and being annoyed. IMO a flatter directory structure would be more developer-friendly.
   Also, I'm sometimes thinking if differentiating between client and shared is really necessary. In the end, shared is the client-logic. You don't have any actual server-logic in the shared/client code. The server can "simply" use this code to pre-render the page (like fast-forwarding).
   tl;dr A simpler directory structure would be less confusing.

So, yeah. I hope my feedback helps. Cheers. 🍻

I tried running it on windows, followed the instructions and got errors trying to connect to mongoDB.
Is there a way for the script to start MongoDB for the developer?
If the answer is no - then you need to add to the installation instructions "make sure mongoDB is running"

Add MIT License to README.md file.

Hi,

In the package.json, the "lint" job only lints "shared" & "client".
Why don't you lint "server" also ?

Moreover, the "node" env is set in the eslintrc.

Add href to post items in PostListItems, so that it renders correctly, even if JS is disabled in browser.

In package.json cross-env is already installed. Why do we need to npm install -g cross-env?

Hey Guys,
Would it be possible to add some questions when scaffolding, similar to yeomen?
It would be amazing to have an isomorphic start point with minimal dependencies.

Thanks

I tried running it on windows, followed the instructions and got errors trying to "npm start".
After inspecting the package.json scripts block I've noticed it assumes the global package cross-env to be installed yet it is not mentioned in the installation instructions

Delete post is handled in Post Controller but test for this route is missing. Add test in post.spec.js.

Storing the JSX files such as /shared/components/Header/Header.js as .jsx files would help pickup the format for linters, and editors.

Hi,

I got this error running tests. i know its because the server is already running and require(../server); in test file would start another server. but i dont know a way to avoid this.

because server.js is required by index.js. so checking module.parent before starting the server wont help here.

thanks.

You should use KOA instead of Express.

See: expressjs/express#2844

I've noticed that getPosts function in post.controller.js executes twice. Presumably because of the server side rendering. I do believe that doubling workload is not what you normally want. Is there a way to avoid this?

mern start, then:

> [email protected] start /Users/me/MernTest
> cross-env NODE_ENV=development node index.js

MERN is running on port: 8000! Build something amazing!

/Users/me/MernTest/node_modules/mongodb/lib/server.js:236
        process.nextTick(function() { throw err; })
                                      ^
Error: connect ECONNREFUSED 127.0.0.1:27017
    at Object.exports._errnoException (util.js:870:11)
    at exports._exceptionWithHostPort (util.js:893:20)
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1062:14)

npm ERR! Darwin 15.3.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v4.3.1
npm ERR! nom  v3.7.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `cross-env NODE_ENV=development node index.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script 'cross-env NODE_ENV=development node index.js'.

hello they are interested in implementing redux-devtools for displaying actions ??

This function needs to be commented out in order to make it understandable for developers.

Mongo is so EXTREMELY vaguely mentioned, as if it is NOT a requirement.

I ran npm start twice, since after the first one I realised it might be a PORT issue, but it turned out it required Mongo.

Please, add this requirement more prominently.

I understand that

> npm install -g mern-cli
> mern <YourAppName>

sounds so hip and cool, but it is hardly enough.

When i use devtools cheap-module-eval-source-map, chrome won't stop at the breakpoint.
But if i change to source-map, breakpoint will work.

Hi guys curious your thoughts on having a chat room for this.

Cheers

.../mern-starter/node_modules/mongodb/lib/server.js:236
        process.nextTick(function() { throw err; })
Error: connect ECONNREFUSED
    at errnoException (net.js:904:11)
    at Object.afterConnect [as oncomplete] (net.js:895:19)

Obviously need to run mongod first. Could this be added in the npm start?

Just a thought I had that I wanted to put up for discussion:
Currently, to import a component from another file you have to do something like './container/PostContainer/PostContainer'; and the second PostContainer seems a bit redundant. Inside our component and container folders we have the component itself named index.jsx. This is so that we are able to simply import that file from around the application by going import PostContainer from './container/PostContainer'; which reads much nicer.

Have you thought about using GraphQL in MERN?