hashnode / mern-starter Goto Github PK
View Code? Open in Web Editor NEW⛔️ DEPRECATED - Boilerplate for getting started with MERN stack
License: MIT License
⛔️ DEPRECATED - Boilerplate for getting started with MERN stack
License: MIT License
Please implement languages support with react-intl
Vote +1 for this feature
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.
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.
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!
This function needs to be commented out in order to make it understandable for developers.
.../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
?
Add href to post items in PostListItems, so that it renders correctly, even if JS is disabled in browser.
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
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.
If there's interest, I can submit a PR, I recently added this to my project using mern...cool project!
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"
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.
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 ?
HI Guys,
curious if there is a road map being planned and ways to contribute.
Cheers
Delete post is handled in Post Controller but test for this route is missing. Add test in post.spec.js.
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.
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.
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.
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,
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 MIT License to README.md file.
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
hello they are interested in implementing redux-devtools for displaying actions ??
Storing the JSX files such as /shared/components/Header/Header.js
as .jsx
files would help pickup the format for linters, and editors.
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
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.
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:
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
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!
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.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).So, yeah. I hope my feedback helps. Cheers. 🍻
Have you thought about using GraphQL in MERN?
Hi guys,
noticed not a lot of comments regarding code to help explain. you guys open to commenting code?
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"
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!
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'.
I just go to demo website, but currently the website unavailable.
On a brand new install, the app isn't rendering due to a missing prop.
Warning: Failed propType: Required prop
posts
was not specified inPostContainer
. Check the render method ofConnect(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?
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?
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:
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>
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.
You should use KOA instead of Express.
In package.json
cross-env is already installed. Why do we need to npm install -g cross-env
?
Hi guys curious your thoughts on having a chat room for this.
Cheers
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.