Giter VIP home page Giter VIP logo

gluestick's Introduction

Deprecation Notice

GlueStick is now archived. It was one of the first React-in-a-box projects and helped TrueCar quickly migrate to React. With the React community growing and changing so quickly, it became difficult for TrueCar to keep GlueStick up to date. Thank you to all the contributors that helped along the way!

If you're interested in this type of project, we recommend NextJS, which provides server rendering along with many other features GlueStick offered.

GlueStick - Beyond the Boilerplate

npm Build Status

GlueStick is a command line interface for quickly developing universal web applications using React and Redux.

Why is your project or boilerplate not enough?

  1. You need integrated updates. Without integrated updates, you are forced to manually merge in new features/fixes.
  2. Isomorphic rendering. Server-side and client-side rendering are identical. No more worries about SEO, loading spinners, or users with javascript disabled
  3. Integrated dockerization. Go from development to production as simply as gluestick dockerize MyApp
  4. Automatic babel and webpack loader support. Use the latest JavaScript features
  5. Automatic test framework setup. Preloaded with Jest and Enzyme right out of the box
  6. Built in best practices. Things like code splitting, hot module replacement, react-router, etc
  7. Rails-like generators for common needs like components/reducers/containers/etc, with all necessary hooks and tests

Why GlueStick?

GlueStick allows users to quickly create new applications with its bootstrap generator, along with generators for components, containers, and reducers. In addition, GlueStick contains a fully functional test environment, server-side rendering, and an asset bundler. However, GlueStick sidesteps the hassle of any configuration files.

The goal is not to be another boilerplate for building universal web applications. Instead, the goal is to abstract all of the boilerplate code into one location that the developer doesn't have to worry about. Not only does this make your application code cleaner but it makes it easier to update the boilerplate code as new improvements are discovered.

Gluestick is actively worked on, supported and used in production by TrueCar.

What about Create React App?

Create React App is an excellent command line interface for creating React applications. Gluestick is a much more opinionated tool, which offers several features out-of-the-box (pre-configured) that Create React App does not (and in some cases would require ejection from Create React App), such as:

  • Code splitting
  • Server rendering
  • React Router and Redux implementation
  • Generators for standard development needs

Requirements

Node 6.3.0+

Quick Start

npm install gluestick-cli -g
gluestick new SampleProject
cd SampleProject
gluestick start

Docs & Help

Guides

Terms & Definitions

  • Gluestick is a monorepo. It is published to npm with Lerna and contains depdent modules or "packages" for building Gluestick apps. The Gluestick repo uses Lerna 1,2 to help break what would otherwise be a potentially large code base in to smaller, versioned packages.
  • gluestick-cli - A package in the Gluestick monorepo that acts as a thin wrapper for managing Gluestick apps from the command-line. With it you can create an app, destroy it, auto upgrade all of its dependent packages, etc... It has a few commands of its own, but several are proxied to your local Gluestick package.
  • gluestick - A package in the Gluestick monorepo that provides additional command line functionality for building for universal-React apps as well as the internals (guts) for driving the Gluestickm Universal React apps themselves.
  • Lerna - "A tool for managing JavaScript projects with multiple packages", or put another way: "Lerna is a tool that optimizes the workflow around managing multi-package repositories with git and npm." Packages are independent codebases that can be versioned and published to npm.

F.A.Q.s

Q: The main project is called "Gluestick", but the binary is called "gluestick-cli", but there's a package in the main project called "gluestick". What's up with that?

A: Gluestick is a monorepo. gluestick-cli is a sub-package in that repo that is deployed to npm and is used to manage Gluestick apps. gluestick (little 'g') is also a sub-package and contains the guts of Gluestick applications.

gluestick's People

Contributors

bearmountain avatar chefnobody avatar christinebrass avatar cjeich avatar davidgiffin avatar dratwas avatar eitheror avatar ferrannp avatar grabbou avatar greenkeeperio-bot avatar hhtran avatar jacobmoretti avatar jcortopassitruecar avatar joecortopassi avatar lukewalczak avatar michalchudziak avatar mishkinf avatar noahmatisoff avatar saltycrane avatar sawan avatar sethbattin avatar spetz83 avatar straley avatar supergibbs avatar threehams avatar toddw avatar trungly avatar vdibs avatar ylim92 avatar zamotany avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

raitobezarius browniefed threehams bdsabian sawan jacobmoretti natefox cjeich mikeheme saltycrane trungly nicholas-b-carter sethbattin andrewwatts z-react dratwas webmanarmy damianmcnulty weilandia ylim92 alfiyazi thymikee lyvwhyr testclabotguy noahmatisoff isarstyle us1415 cryptobuks sondro wataru358 hhtran chrischen xcorail spring-team darryl-amour bakaldina

gluestick's Issues

Add coverage to Mocha tests.

Add coverage support:

  • Generate coverage reports in watch mode (will require a separate background process)
  • Generate coverage reports on single-run mode

Consider ignoring certain files from coverage report

I was wondering what people thought about ignoring files such as /reducers/index.js, /components/react-bootstrap-subset.js, /components/react-router-subset.js and any other files that we won't be writing tests for.

promise middleware dispatches `*_FAILURE` for exceptions in app

When dispatching an action using the promiseMiddleware, sometimes an exception in the app code (due to a bug) will not show up as a stack trace in the console. Instead, the promiseMiddleware catches it and dispatches a *_FAILURE action. I'd expect the exception to be unhandled and that a *_FAILURE action only be dispatched if the promise in the original action rejects. I think this is considered "swallowing" exceptions.

I had seen this happen previously, but some recent discussion on Twitter prompted me to investigate:
https://twitter.com/dan_abramov/status/798838433368064000
https://twitter.com/dan_abramov/status/798856890813845504

Example gluestick project showing behavior: https://github.com/saltycrane/gs-examples/tree/master/dispatch-failure

Example snippets:

action:

export function myAction() {
  return {
    type: MY_ACTION,
    promise: new Promise((resolve) => {
      resolve("fulfilled");
    }),
  };
}

reducer:

export default (state=INITIAL_STATE, action) => {
  switch (action.type) {
    case MY_ACTION:
      throw "bug in my code";
      return "success";

    default:
      return state;
  }
};

On dispatching the result from myAction(), the "bug in my code" exception is not shown in the console, but the MY_ACTION_FAILURE typed action is dispatched instead.

An option for changing this behavior is to use the second argument of .then() instead of chaining the .catch() after the .then(). This was mentioned in the links above.

original code in promiseMiddleware (https://github.com/TrueCar/gluestick-shared/blob/c9d5533fd753d658c0965b760220c7133aa1da3c/src/lib/promiseMiddleware.js#L27-L35):

      return getPromise(client)
        .then(value => {
          next({...rest, value, type: SUCCESS});
          return value || true;
        })
        .catch(error => {
          next({...rest, error, type: FAILURE});
          return false;
        });

alternative code:

      return getPromise(client)
        .then(
          value => {
            next({...rest, value, type: SUCCESS});
            return value || true;
          },
          error => {
            next({...rest, error, type: FAILURE});
            return false;
          }
        );

maybe async+await could also be used?

      let value;
      try {
        value = await getPromise(client);
      } catch (error) {
        next({...rest, error, type: FAILURE});
        return false;
      }
      next({...rest, value, type: SUCCESS});
      return value || true;

Mocha tests re-run after coverage report is generated.

Running tests in watch mode (the default) runs a second process which generates a coverage report in the background. Unfortunately, once it finishes, the watcher picks up the changes to the .js files in coverage/ and re-runs the tests. It doesn't cost much in time, but it's a lot of unnecessary and confusing console output.

Mocha's watch is not configurable, and will eventually be deprecated. However, when running Mocha in a spawned process, it is by far the quickest way to re-run tests in a transpiled project.

One possible fix is to have an intermediate script which requires the mochaTestHelper.js file, watches only certain directories, and runs Mocha programatically - which should retain the speed. This is more complicated, and will require rewriting some things we currently get from Mocha for free. However, it may simplify some of the test.js command code.

Allow webpack dev server to be externally accessed

Bind webpack-dev-server to 0.0.0.0 instead of localhost so that it can be accessed by machine IP.

I'm using another server (a VM in virtual network) as a frontend to React/node. Requests to to webpack-dev-server, including the request to /__webpack_hmr can't be proxied since it's bound to localhost and the VM is on a virtual network.

Specifically, I'm using nginx+php running in a VM as a front end that proxies server render requests to node, instead of accessing via localhost:8880.

See relevant issue here: webpack/webpack-dev-server#147

gluestick app won't start when run with Node v7.0.0

Using:

Aarons-MacBook-Pro:gluestick aconnolly$ node -v
v7.0.0
Aarons-MacBook-Pro:gluestick aconnolly$ npm -v
3.10.8

And running npm install from a freshly forked gluestick repo results in the following errors:

Aarons-MacBook-Pro:gluestick aconnolly$ npm install

> [email protected] preinstall /Users/aconnolly/workspace/gluestick/node_modules/.staging/v8-debug-c1f18b53
> node -e 'process.exit(0)'


> [email protected] install /Users/aconnolly/workspace/gluestick/node_modules/v8-debug
> node-pre-gyp install --fallback-to-build

node-pre-gyp ERR! Tried to download(404): https://node-inspector.s3.amazonaws.com/debug/v0.7.7/node-v51-darwin-x64.tar.gz 
node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v51 ABI) (falling back to source compile with node-gyp) 
  CXX(target) Release/obj.target/debug/src/debug.o
../src/debug.cc:38:27: error: too few arguments to function call, expected at least 2, have 1
        v8::Debug::Call(fn);
        ~~~~~~~~~~~~~~~   ^
/Users/aconnolly/.node-gyp/7.0.0/include/node/v8-debug.h:198:3: note: 'Call' declared here
  static MaybeLocal<Value> Call(Local<Context> context,
  ^
../src/debug.cc:46:61: error: too few arguments to function call, single argument 'isolate' was not specified
        Isolate* debug_isolate = v8::Debug::GetDebugContext()->GetIsolate();
                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~ ^
/Users/aconnolly/.node-gyp/7.0.0/include/node/v8-debug.h:248:3: note: 'GetDebugContext' declared here
  static Local<Context> GetDebugContext(Isolate* isolate);
  ^
../src/debug.cc:61:67: error: too few arguments to function call, single argument 'isolate' was not specified
        Local<Context> debug_context = v8::Debug::GetDebugContext();
                                       ~~~~~~~~~~~~~~~~~~~~~~~~~~ ^
/Users/aconnolly/.node-gyp/7.0.0/include/node/v8-debug.h:248:3: note: 'GetDebugContext' declared here
  static Local<Context> GetDebugContext(Isolate* isolate);
  ^
../src/debug.cc:66:54: error: too few arguments to function call, single argument 'isolate' was not specified
          debug_context = v8::Debug::GetDebugContext();
                          ~~~~~~~~~~~~~~~~~~~~~~~~~~ ^
/Users/aconnolly/.node-gyp/7.0.0/include/node/v8-debug.h:248:3: note: 'GetDebugContext' declared here
  static Local<Context> GetDebugContext(Isolate* isolate);
  ^
4 errors generated.
make: *** [Release/obj.target/debug/src/debug.o] Error 1
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/Users/aconnolly/workspace/gluestick/node_modules/node-gyp/lib/build.js:276:23)
gyp ERR! stack     at emitTwo (events.js:106:13)
gyp ERR! stack     at ChildProcess.emit (events.js:191:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:215:12)
gyp ERR! System Darwin 15.6.0
gyp ERR! command "/usr/local/bin/node" "/Users/aconnolly/workspace/gluestick/node_modules/node-gyp/bin/node-gyp.js" "build" "--fallback-to-build" "--module=/Users/aconnolly/workspace/gluestick/node_modules/v8-debug/build/debug/v0.7.7/node-v51-darwin-x64/debug.node" "--module_name=debug" "--module_path=/Users/aconnolly/workspace/gluestick/node_modules/v8-debug/build/debug/v0.7.7/node-v51-darwin-x64"
gyp ERR! cwd /Users/aconnolly/workspace/gluestick/node_modules/v8-debug
gyp ERR! node -v v7.0.0
gyp ERR! node-gyp -v v3.4.0
gyp ERR! not ok 
node-pre-gyp ERR! build error

It appears there are compatibility problems with node v7.0.0 and gluestick.

Optimize docker images

After chatting with @joshuago we've come up with two optimizations and ideas for a third.

The first is simply to merge the steps that node:6 takes as well as the existing commands into one layer and then remove the installed files. This creates a layer that is quite a bit smaller than the multiple layers that are created when the commands are ran separately. This PR should be 100% compatible with the existing Dockerfile (unless the dev libraries are required for operation).
Original Dockerfile ~ 900Mb
Small Optimization Dockerfile ~ 710Mb

The second is to do the same as the first, but also runs an apt-get autoremove which removes any orphaned packages. This may break things as it may remove required libraries. I havent ran all of the tests in the resulting docker container.
Original Dockerfile ~ 900Mb
Large Optimization Dockerfile ~ 465Mb

A third idea is to rebuild based on Alpine Linux. This would require some digging through the libraries from node:6 to determine what is actually needed. At a cursory glance, it appears that some of the Debian libraries are not available in Alpine (or at least renamed).

Lastly, in both submitted Dockerfiles, I've moved the ENV lines to the top of the file. This has resulted in an additional ~50Mb savings. I believe the root cause is that npm install wasnt seeing these environment variables when they were being ran and therefore installing the devDependencies along with the production dependencies.

Add support for API proxy

There are situations where you will want to proxy api requests through the node server so that the server side rendering can better handle cookies. There should be a way to define proxies in the config file.

Something like:

proxies: {
  "/api": "http://api.example.com/"
}

and you should be able to specify different proxies for different environments.

Check if Docker is installed before using it

The gluestick dockerize command currently does not check whether docker is installed before using it. It would be nice to perform this check first and notify the user if it is not installed.

Multiple Entry Points

It would be nice if GlueStick supported Multiple Entry Points so that you could split a large app into chunks. https://webpack.github.io/docs/multiple-entry-points.html

Currently code splitting is supported by using require.ensure but maybe it makes sense to also support multiple entry points.

Right now, all of the reducers are exported as one object in the reducers/index.js file but if you have a really large app it might make sense to separate reducers into different places.

I don't have a solution ironed out for this yet but it's something we might need to figure out soon.

Allow more flexible setting of host and port

We currently hardcode the server-side rendering host to "localhost" and only allow setting the port via an environment variable. We should evaluate the best and most flexible approach to this and implement a solution.

Filter .html file type from mocha tests

a number of static file types have been excluded from mocha tests because they're not js modules, .html files should be filtered as well, eg: iframe content that is not react apps.

Uncaught TypeError: (0 , _reactRouterScroll2.default) is not a function

After creating a new project with gluestick new myproject and running with gluestick start, the following error is displayed in the console of the browser:

Uncaught TypeError: (0 , _reactRouterScroll2.default) is not a function

screen shot 2016-08-08 at 1 28 37 pm

gluestick version: 0.8.15
OS: Mac OS X El Capitan
Date: August 8, 2016

I think the cause is that the library react-router-scroll was recently updated from version 0.2.1 to 0.3.0 and gluestick-shared specified react-router-scroll >= 0.2.0 (https://github.com/TrueCar/gluestick-shared/blob/ef04f558dd1ed1062477713b1da3dc5f049f289d/package.json#L32) npm ls in my new gluestick project shows:

$ npm ls | grep -B1 -A4 'react-router-scroll'
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ UNMET PEER DEPENDENCY [email protected]
│ │ │ └── [email protected]
│ │ └─┬ [email protected]
│ │   └── [email protected]
npm ERR! peer dep missing: history@^1.12.1 || ^2.0.0, required by [email protected]

If I npm uninstall react-router-scroll then npm install [email protected] then run npm start, http://localhost:8888 loads in the browser without any errors in the browser console.

Warning: React attempted to reuse markup...

I'm following the tutorial. I've added Todos container and added it to the routes in the config.

Then i navigated to localhost:8888/todos and i got this error https://i.imgur.com/rc3m4k5.png

I've tried to remove everything related to redux from the component but the error persists.

I've tested this with node 4., node 5., Chrome Canary, and normal version of Chrome. Also i've tried it in incognito window without any extensions but the error is still there.

additionalLoaders doesn't support overriding loader built into Gluestick

The interface for adding additional loaders (app configuration) only allows for adding loaders for extensions, not modifying existing loader configuration. For css/scss/sass, an override mechanism would be needed to support CSS modules, a prerequisite for getting Gluestick working with react-toolbox.

Expose express app object to application

Sometimes apps need deeper access to the express application. For instance setting trust proxy or other express specific things. It would be nice if there was something that could go in src/config/application.server.js which maybe looked like this:

function handleIt (app) {
   app.enable("trust proxy");
}

export {
  expressAppHook: handleIt
}

Not sure what we want to call it expressAppHook is kind of long, appHook isn't very descriptive but open for discussion. This should be easy to add, we would just import expressAppHook from the application.server config file after setting up the express app and pass the app as an argument during setup.

Auto-update duplicates export on application.js

PR #92 introduced a semicolon to application.js, which triggers the auto-update to kick in on the next gluestick start for gluestick apps. The auto-update is supposed to see that the file needs updating and update the file for the user by simply replacing the export line with one that has a semicolon at the end of the export. However, it seems the auto-update is instead inserting lines instead of replacing them, causing the end of the file to look like this:

export default (config[process.env.NODE_ENV] || config["development"]);

export default (config[process.env.NODE_ENV] || config["development"]);

export default (config[process.env.NODE_ENV] || config["development"])

Each gluestick start will then re-trigger the process, as the file is still different from the target file. No longer seeing evidence of this.

Developer Tools Debugger and Warning location is mangled

When I place a debugger in my code and it is reached, the Developer Tools end up on this file, instead of the location of the debugger.
image

The same goes for warning that are output.
image

Multiple developers have seen this so I don't believe it is an issue related specifically to my machine or project.

Address security vulnerabilities found with nsp

Some of our dependencies contain security vulnerabilities. Let's do what we can to address these.

(+) 6 vulnerabilities found
┌───────────────┬────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│               │ Regular Expression Denial of Service                                                                                                                                                                               │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Name          │ minimatch                                                                                                                                                                                                          │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Installed     │ 2.0.10                                                                                                                                                                                                             │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Vulnerable    │ <=3.0.1                                                                                                                                                                                                            │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Patched       │ >=3.0.2                                                                                                                                                                                                            │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Path          │ [email protected] > [email protected] > [email protected] > [email protected]                                                                                                                                         │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ More Info     │ https://nodesecurity.io/advisories/118                                                                                                                                                                             │
└───────────────┴────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
┌───────────────┬────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│               │ Regular Expression Denial of Service                                                                                                                                                                               │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Name          │ negotiator                                                                                                                                                                                                         │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Installed     │ 0.5.3                                                                                                                                                                                                              │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Vulnerable    │ <= 0.6.0                                                                                                                                                                                                           │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Patched       │ >= 0.6.1                                                                                                                                                                                                           │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Path          │ [email protected] > [email protected] > [email protected] > [email protected]                                                                                                                                              │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ More Info     │ https://nodesecurity.io/advisories/106                                                                                                                                                                             │
└───────────────┴────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
┌───────────────┬────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│               │ Regular Expression Denial of Service                                                                                                                                                                               │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Name          │ minimatch                                                                                                                                                                                                          │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Installed     │ 0.3.0                                                                                                                                                                                                              │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Vulnerable    │ <=3.0.1                                                                                                                                                                                                            │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Patched       │ >=3.0.2                                                                                                                                                                                                            │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Path          │ [email protected] > [email protected] > [email protected] > [email protected]                                                                                                                                                     │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ More Info     │ https://nodesecurity.io/advisories/118                                                                                                                                                                             │
└───────────────┴────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
┌───────────────┬────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│               │ Quoteless Attributes in Templates can lead to Content Injection                                                                                                                                                    │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Name          │ handlebars                                                                                                                                                                                                         │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Installed     │ 3.0.3                                                                                                                                                                                                              │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Vulnerable    │ <4.0.0                                                                                                                                                                                                             │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Patched       │ >=4.0.0                                                                                                                                                                                                            │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Path          │ [email protected] > [email protected] > [email protected]                                                                                                                                                      │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ More Info     │ https://nodesecurity.io/advisories/61                                                                                                                                                                              │
└───────────────┴────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
┌───────────────┬────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│               │ Regular Expression Denial of Service                                                                                                                                                                               │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Name          │ uglify-js                                                                                                                                                                                                          │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Installed     │ 2.3.6                                                                                                                                                                                                              │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Vulnerable    │ <2.6.0                                                                                                                                                                                                             │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Patched       │ >=2.6.0                                                                                                                                                                                                            │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Path          │ [email protected] > [email protected] > [email protected] > [email protected]                                                                                                                                    │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ More Info     │ https://nodesecurity.io/advisories/48                                                                                                                                                                              │
└───────────────┴────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
┌───────────────┬────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│               │ Incorrect Handling of Non-Boolean Comparisons During Minification                                                                                                                                                  │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Name          │ uglify-js                                                                                                                                                                                                          │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Installed     │ 2.3.6                                                                                                                                                                                                              │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Vulnerable    │ <= 2.4.23                                                                                                                                                                                                          │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Patched       │ >= 2.4.24                                                                                                                                                                                                          │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Path          │ [email protected] > [email protected] > [email protected] > [email protected]                                                                                                                                    │
├───────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ More Info     │ https://nodesecurity.io/advisories/39                                                                                                                                                                              │
└───────────────┴────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘

Allow removal of directories with the `gluestick destroy` command

We added the ability to create directories with gluestick generate in #156. Support the removal of those directories via the gluestick destroy command:

› gluestick destroy component common/Foobar
Removed file: /private/tmp/myproject/src/components/common/Foobar.js
Removed file:/private/tmp/myproject/test/components/common/Foobar.test.js

Error with gluestick start

Hi,

I get the following error on starting up:

./node_modules/.bin/gluestick start
watching C:\Cygwn\home\xx\myAppdir

{"0":{"code":"ENOENT","errno":"ENOENT","syscall":"spawn gluestick","path":"gluestick","spawnargs":["start-client"]}}
{"0":{"code":"ENOENT","errno":"ENOENT","syscall":"spawn gluestick","path":"gluestick","spawnargs":["start-server"]}}
{"0":{"code":"ENOENT","errno":"ENOENT","syscall":"spawn gluestick","path":"gluestick","spawnargs":["start-test"]}}
[change detected] restarting server… src\containers\NoMatchApp.js
{"0":{"code":"ENOENT","errno":"ENOENT","syscall":"spawn gluestick","path":"gluestick","spawnargs":["start-server"]}}

This is happening on Windows. Does gluestick have to be installed globally? I was able to install locally in a dir and generate the initial app structure, but the start command fails.

Improve reducer generator

The reducer generator needs updating now that we have support for multiple entrypoints. Ideally we'd like reducers to get placed based on the entrypoints configuration.

Outdated .babelrc message

If a Gluestick app has updated its .babelrc file to include a new plugin (for example), a message will appear during gluestick start that their .babelrc file is outdated:

› gluestick start
...
? The format of .babelrc is out of date. Would you like to automatically update it? (Y/n)

Sometimes an app will want to use additional configuration options or plugins not specified here: https://github.com/TrueCar/gluestick/blob/develop/templates/new/.babelrc. We need to prevent the message from appearing in that case.

Upgrade to Node v6.0.0

We also want to lock the Docker file at node: 6 to prevent unexpected failures. From then on, we will test Node versions prior to upgrading the version in the Docker file.

Stop running tests as part of `gluestick start`

When creating a small example project like a to-do list app, continuously running the tests as part of gluestick start works out fine but as you start to develop a full application it seems that most people are running gluestick start -T so that they do not run the tests when they start the app.

I'm proposing we do not run the tests by default and actually reverse the -T flag so that it will run the tests only when the flag is passed.

Write plugin for Radium

I know it is possible to use Aphrodite with GlueStick but it would be nice if it were easier to set up. Currently you have to override renderMethod in src/config/application.server.js then you have to run through the StyleSheetServer.renderStaticMethod as documented in the aphrodite docs which gives you the html and the css then you expose the html as bodyContent in the output of the render method and you have to set up the stylesheet head tag with the css exported from StyleSheetServer.renderStaticMethod and then you need to add code to src/config/init.browser.js to rehydrate aphrodite before the app is mounted.

It's all possible and we have done it but it would be nice if it were easier.

Update Getting Started

I'm trying out gluestick by following the getting started guide at https://www.drivenbycode.com/getting-started-with-gluestick/, but I'm running into some issues, as it seems to be out of date:

The first issue is that generating the todos.js reducer also generates a test, that then fails when the initial state is changed. I tried to get the test pass by updating it:

import reducer from "reducers/todos";

describe("reducers/todos", () => {
  it("returns the initial state", () => {
    expect(
      reducer(undefined, {})
    ).to.equal(["First Item", "Second Item"]);
  });
});

But this fails with AssertionError: expected [ 'First Item', 'Second Item' ] to equal [ 'First Item', 'Second Item' ] and I have no idea how to debug that.

The second is that I can't get hooking up your data to work. The generated Todos container is not the same as in the guide, and pasting in the version in the guide leads to another test failing, with: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Auto-upgrade process for dependencies

Currently a user might run into an issue of Gluestick continually prompting him or her to update their npm dependencies, even though the dependencies are already installed. The auto-upgrade process should take that into account, and if so, make sure the package.json file reflects that as well. More details to come.

Allow creation of directories by `gluestick generate` command

Right now, users can generate components the following way:

› gluestick generate component MyComponent
New file created: /private/tmp/myproject/src/components/MyComponent.js
New file created: /private/tmp/myproject/test/components/MyComponent.test.js

It would be nice to allow folders as part of the generate step. If the folder doesn't exist, it will be created automatically:

› gluestick generate component common/MyComponent
New file created: /private/tmp/myproject/src/components/common/MyComponent.js
New file created: /private/tmp/myproject/test/components/common/MyComponent.test.js

Apply this to containers as well.

Use production ready `devtool` in webpack when NODE_ENV==="production"

And minified reports are very hard to discern. A few examples https://rollbar.com/TrueCar/consumer-frontend/items/215/ and https://rollbar.com/TrueCar/vipr/items/1661/

A thought is that the SourceMaps for the projects need to be included in production.

A potential location for the issue is https://github.com/TrueCar/gluestick/blob/develop/src/config/getWebpackClientConfig.js#L72

And more information about Rollbar + SourceMaps https://rollbar.com/docs/source-maps/

Gluestick new ExampleApp fails on Windows

C:\Users\sfyir\Code>gluestick new ExampleApp
module.js:341
throw err;
^

Error: Cannot find module 'C:\Users\sfyir\Code\ExampleApp\node_modules\npm\bin\npm-cli.js'
at Function.Module._resolveFilename (module.js:339:15)
at Function.Module._load (module.js:290:25)
at Function.Module.runMain (module.js:447:10)
at startup (node.js:141:18)
at node.js:933:3
module.js:341
throw err;
^

Error: Cannot find module 'C:\Users\sfyir\Code\ExampleApp\node_modules\npm\bin\npm-cli.js'
at Function.Module._resolveFilename (module.js:339:15)
at Function.Module._load (module.js:290:25)
at Function.Module.runMain (module.js:447:10)
at startup (node.js:141:18)
at node.js:933:3

I've tried installing again with npm install gluestick -g but no change, I'm using windows 10 and node v5.7.1

Windows support

Trying to use Gluestick on Windows 10 fails. It looks to be path related. There must be code in Gluestick that is using the home directory. I get errors such as:

./src/components/MasterLayout.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./C:/Users/Michael/AppData/Roaming/npm/node_modules/gluestick/node_modules/webpack/buildin/module.js in D:\dev\fas\web\src\components
resolve file
D:\dev\fas\web\src\components\C:\Users\Michael\AppData\Roaming\npm\node_modules\gluestick\node_modules\webpack\buildin\module.js doesn't exist
D:\dev\fas\web\src\components\C:\Users\Michael\AppData\Roaming\npm\node_modules\gluestick\node_modules\webpack\buildin\module.js.js doesn't exist

Add support for HTTP Headers on assets

There are times where we may want to override HTTP headers on assets, eg: X-Frame-Options and Content-Security-Policy. To do that we need support for that behavior via application configuration.

Default to mocha/node for tests.

Once mocha/node is at feature parity with Karma (debugger and coverage support), set it to the default, remove --mocha-only, and add --karma as an option.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.