sahat / megaboilerplate Goto Github PK

Is this a new "hackathon starter" for react?

Configuration:

• Platform: Node.js
• Framework: Express
• Database: SQLite
• Template engine: Jade
• CSS framework: Bootstrap

For those settings, creating the .env file as stated in the README.md works for Facebook and Twitter signins, but Google signup still takes me to the Megaboilerplate authorization rather than my Google app's auth. Removing the clientId in googleLogin() (line 52 on my app/actions/oauth.js) fixes this.

Can anyone confirm that this is happening with them too? Am I doing something wrong?

Password field, even though it's encrypted, should not be sent to the client.

It would be great if we have the option to select the type of indentation(2 spaces or 4 spaces).By default it is 2 spaces. But 4 spaces indentation is also widely used i believe

See attached screenshot.

Seems like knexfile appears both under config/ and in the main directory.

Generated:
node
express
jade
bootstrap
sass
react
gulp
no unit testing
postgreSQL
heroku

You probably meant to replace config/knexfile with the one that got copied into the main directory.

First of all: well done for making this project (I have been patiently waiting since you suggested it in sahat/hackathon-starter#439)!

I have just been having a look at your live example generator and I would love it if ejs support was added.

Why add ejs?:

• Still used by lots of JS developers (I think)
• Allows embedding of JS into a page, which (I think) Jade does not. This could used for dynamic content, such as showing something if a property is or is not equal to something
• Might not be as clean as jade, but closely resembles normal HTML, which means you do not have to learn a new Markup language to design websites with it.

Thanks in advanced!

At the moment Webpack cannot be selected together with AngularJS. Last time I used Angular, everyone was using Gulp or Grunt. I don't know how easy or difficult it would be to integrate it with Webpack.

If most people in the Angular community are not using Webpack, then it's fine to keep it as is - None and Gulp only.

What do you think about refactoring to a feature based structure rather than a type based structure? I've seen significant DX improvement using this new type of structure.

basically all actions/reducers/container/test is contained in one folder.

http://jaysoo.ca/2016/02/28/organizing-redux-application/
https://vimeo.com/168648012

This popular react-boilerplate framework uses it: https://github.com/mxstbr/react-boilerplate

In Demo 2, the footer sticks to the bottom of the window regardless of content. It's always stuck at the bottom and overlays content.

On a mobile view, it's fixed to a position where the bottom of the window was when the view was first created. So it will stay there even when scrolling.

On a responsive view, e.g. a resizeable window, the footer will stick to the bottom of the window.

Move Facebook, Twitter, Google, VK, Email authentication route logic from User controller into a separate Auth controller.

Note: This will require updating quite a bit of references in the Authentication generator.

The task is pretty straightforward - convert ES5 to ES6 syntax. The server-side code is based on Hackathon Starter project prior to migrating it to ES6.

I see Electron support is being added. It's a little disappointing that it's getting support before NW.js, since it's just a bad knockoff of it.

• NW.js has been around 5 years longer
• Is more stable
• Has better documentation
• Is updated faster (within 24 hours of each new Chromium or Node release)
• Supports more OS's (XP+, OSX 10.6+, Ubuntu/Zorin/Debian)
• Wayyyyyyy easier to get started with
• Common sense coding. (You can actually include jQuery like you normally would instead of having to require it in via Node in some backwards way)
• It's ready out of the box, you don't need to create a JS file to then create a window to then create a close button that works. You just start with a Native Window with all the defaults and can opt out if you don't want them (more common sense).

Outside of a bad logo and horrendously bad name, NW.js is better in every way to Electron.

Configuration

• Platform: node
• Framework: express
• Template Engine: nunjucks
• CSS Framework: bootstrap
• CSS Preprocessor: css
• JavaScript Framework: angularjs
• Build Tool: gulp
• Unit Testing: jasmine
• Database: mongodb
• Authentication: email,facebook,google,twitter
• Deployment: none

Hi,

I'm running this setting and is giving error in profile update (error: 'Passwords must match')

I noticed that the "NEW PASSWORD" in this view filled
the field "CONFIRM PASSWORD" in view is blank

When I click on "Update Profile" returns the error message "Passwords must match"

This error should not return if I click on "Change Password"?

If I put the password and confirm it updates the same profile, but when I update the page to screen is blank and appears this message on the console ("VM106: 1 Uncaught SyntaxError: Unexpected token u in JSON at position 0")

The same configuration only using react not of any error

Sorry my english google (lol)

Thanks

With the angular boilerplate, there are errors with the password reset functionality.

1. The reset password angular controller calls the Account.forgotPassword() instead of Account.resetPassword()
2. The resetPassword function on the account service tries to call '/reset', but on the server the only valid route is '/reset/:token'

This is not working as it is currently structured and needs to be refactored to call the right function and pass the token from the server to the browser.

In my application I built from this, I ended up taking the password reset as a query param in angular and then passing that to '/reset/:token' on the server because it was easier.

I am happy to make the change, but with the refactor being done with #109, this would make sense to combine with that effort or wait until the refactor is complete.

John Papa has a great style guide for AngularJS, with nice practices to write a better NG app. So many people use his pattern. It's an idea implement it on your boilerplate. I can contribute rebuilding the code.

More infos: https://github.com/johnpapa/angular-styleguide/tree/master/a1

Because .login-container has a fixed width it looks broken while the rest of the layout is nice and responsive on mobile devices.

Should be a simple CSS fix.

Relevant files:

• https://github.com/sahat/megaboilerplate/blob/master/generators/css-framework/modules/bootstrap/main.css
• https://github.com/sahat/megaboilerplate/blob/master/generators/css-framework/modules/bootstrap/main.less
• https://github.com/sahat/megaboilerplate/blob/master/generators/css-framework/modules/bootstrap/main.scss

After cloning this repo and npm i && npm start I get the below message on startup. I'm running node v6 with npm v3.

{ Error: ENOENT: no such file or directory, open '.env'
    at Error (native)
    at Object.fs.openSync (fs.js:634:18)
    at Object.fs.readFileSync (fs.js:502:33)
    at Object.module.exports.config (/private/var/application/my_projects/boilerplate/node_modules/dotenv/lib/main.js:30:37)
    at Object.<anonymous> (/private/var/application/my_projects/boilerplate/server.js:15:8)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:456:32)
    at tryModuleLoad (module.js:415:12)
    at Function.Module._load (module.js:407:3)
    at Function.Module.runMain (module.js:575:10)
    at startup (node.js:160:18)
    at node.js:445:3 errno: -2, code: 'ENOENT', syscall: 'open', path: '.env' }
Express server listening on port 4000

Changes to the site will not be visible to the returning visitors until they clear browser cache.

1. Cache-Busting in Node.js
2. Switch to connect-assets which manages all that for you.

Or have some kind of auto-increment v1,v2,v3,v4... per commit / deploy.

When using Webpack and React, redux reducers do not keep state during hot reloads.

There is a simple fix though in app/store/configureStore.js

export default function configureStore(initialState) {
  const store = createStore(
    rootReducer,
    initialState,
    applyMiddleware(thunk)
  );

  // Enable Webpack hot module replacement for reducers
  if (module.hot) {
    module.hot.accept('../reducers', () => {
      const nextRootReducer = require('../reducers');
      store.replaceReducer(nextRootReducer);
    });
  }

  return store;
}

Refer to erikras/react-redux-universal-hot-example#44 (comment) for more info.

Great project!

On TODO list.

• Heroku
• Azure
• Digital Ocean

If you have used GraphQL or Relay, I'd like to hear your thoughts on how feasible it would be to add it to Mega Boilerplate.

Does it require structuring your schema a certain way or is it completely independent from database storage?

Would I need to create a separate set of Express API routes for GraphQL?

Does Relay work in conjunction with Redux or does it replace Redux?

1. Capitalize model filename user.js to User.js.
2. Change Pascal Case to Camel Case for all controller references. For example:
   • Pascal Case: var UserController = require('./controllers/user')
   • Camel Case: var userController = require('./controllers/user') (use this)

@niallobrien I have decided to keep controller names as-is for now. At least with model names capitalized, it shouldn't cause any confusion between user model and user controller file names.

Add a diagram for authentication flow.

Free Tier on Azure seems to be down a lot. Explore other options such as OpenShift and Bluemix.

Can't host demos on Heroku because I need those 1000 hours/month to host the actual Mega Boilerplate website without interruptions.

Add Stylus support for None CSS framework.

It should be able to generate CSS via the following:

1. stylus-middleware
2. Gulp
3. Webpack
4. NPM command line

New firebase 3.0 support will be really nice to have.

Hi, I think we should move the style & script source files out of the public directory (if using a build step) and into /assets for example. Then the build process will build into /public. Thoughts?

I would be happy to help implement this, as I would use it a lot. I do even have my own boilerplate that I've been working on for Metalsmith for a bit, although it would be amazing to do a build with different plugins (lots of options, I'd be happy to categorize them and place them appropriately).

I would also be willing to scaffold out different site functionality, like a blog (already have this working) or whatever else.

Consider using Horizon: http://horizon.io/docs/getting-started/

Option 1 (current)

• test/client for React tests
• test/server for Express tests

VS

Option 2

• app/test for React tests
• test for Express tests

Configuration:

• Platform:
  • Node.js
• Framework:
  • Express
  • Angular 1.x
• Database:
  • SQLite
• Template engine:
  • Jade
• CSS framework:
  • Bootstrap

System:

• OS: MacOS
• Arch: x86_64

I'm trying to update "My profile" and receive this error:
TypeError: user.then is not a function

This happen when create a user or even log in with Facebook..

Add ability to generate Docker config files.

In addition to primary database choices—MongoDB, PostgreSQL, MySQL, SQLite—add a secondary option for specialized databases, e.g. Redis and Elastic Search.

Needs a really basic "Hello World" example for a traditional Express web app, AngularJS app, React app.

As we know that much people prefer to choose a different backend, I think it is a good idea to have a option to start the generator asking for the Frontend JS Framework and optionally generate server code.

As we see on a bunch of yeoman generators and react boilerplates:

• https://github.com/yeoman/generator-angular#readme
• https://github.com/swiip/generator-gulp-angular#readme
• https://github.com/douglascorrea/react-hot-redux-firebase-starter
• https://github.com/mxstbr/react-boilerplate

A POST request to /download is fired twice. First as an AJAX request, then as a form submission.

1. We need an AJAX request to relay any potential errors back to the user without navigating away.
2. A form submit is necessary to trigger file download.

Doing a form submit directly works well, until an error is thrown and user is navigated away to /download with some obscure error message. At this point all previous selections are lost. Not a great user experience.

If someone knows of a way to trigger a download via AJAX request I'd like to hear your thoughts. Otherwise, the next best thing would be to create a pretty-looking error page and save user's choices to sessionStorage, then clear sessionStorage on Download button click.

This will solve 2 main issues:

1. Do not show template engine choices at all when AngularJS is selected.
2. Allow None template engine when React is selected.

It'd be awesome to include transpiler options like TypeScript or CoffeeScript.

Add a simple README.md file which would contain the basics:

• Title
• Reference how it was generated by MBP
• Components: this is just a repeat of the things we checked on the website
  (ie: Node.js + express + ... )
• License

Note this would greatly help when opening issues... so we don't have to enter one-by-one how we generated something but rather could just copy/paste from your generated README what we generated.

Here's my app config:

Configuration

• Platform: node
• Framework: express
• Template Engine: handlebars
• CSS Framework: bootstrap
• CSS Preprocessor: less
• JavaScript Framework: react
• Build Tool: gulp
• Unit Testing: mocha
• Database: mongodb
• Authentication: email,facebook,google,twitter
• Deployment: heroku

when running the app with "npm start" i got an error, due to the fact the "lodash" was not available. I installed it and then everything was fine.

I see the module is available in "master" but it was not there after download.

Ref: pugjs/pug#2184

Should be easy fix by changing radio button margins, in order to have items on the next row be flush with the first row. Also need slight vertical spacing so it doesn't look crammed.

I already mentioned this in the chatroom but I thought I would put it here just to have a record for others. I assume a similar response to #101

ENOENT: no such file or directory, open 'D:\home\site\wwwroot\generators\css-framework\modules\bootstrap\jade-js-min-import.jade'

http://vuejs.org/

Hi, I generated a project and selected Postgres etc. My project was built successfully, however my User model is defining a Mongoose schema etc.

Thanks.