sysgears / create-apollo-app Goto Github PK

Create Apollo App is a command-line tool designed to generate fully-configured starter Apollo GraphQL projects with essential dependencies for developing web, server and mobile applications and zero build configuration.

Home Page: https://apolloapp.org

License: MIT License

JavaScript 12.27% TypeScript 87.73%

javascript build mobile web angular react react-native vue apollo graphql

create-apollo-app's Introduction

Create Apollo App

Description

Create Apollo App is a command-line tool that generates a fully configured starter Apollo (GraphQL) project with only essential dependencies. With Create Apollo App, you can start developing a client, server, or mobile app, or a universal application in no time.

The projects generated with Create Apollo App are built of familiar technologies from the JavaScript ecosystem: TypeScript, Webpack, React, Express, and React Native. Depending on the type of the project you want to develop, the mentioned technologies are used in different combinations to provide particular setups for server, client, or mobile development.

Create Apollo App relieves you from the pain of installing and configuring an Apollo project while making it easy to change project configurations if necessary.

Generating a Project with Create Apollo App

Prerequisites

Install the following dependencies:

Node.js 6.x or higher (Node.js 8.x is recommended)
NPM or Yarn to manage JavaScript packages and run scripts

Besides the dependencies for Node.js, you may also need to install and set up additional tools for mobile development:

iOS Simulator or Android emulation software
Xcode (optional; an IDE for iOS development)
Android Studio (optional; an IDE for Android development)

Installing Expo Client is also optional. If you set up iOS Simulator or a similar tool, Create Apollo App will automatically download Expo Client if it's not installed.

Generating a Project

Start a new project with Create Apollo App using the following command (the default NPM utility is used):

npx create-apollo-app new-apollo-app

If you’re using Yarn, run:

yarn create apollo-app my-app

yarn create will automatically prefix apollo-app with create-. For more information, you can consult this blog post on Yarn.

From this point onward, we'll use Yarn in our examples for running the project.

During installation, the terminal will prompt the following six options:

❯ @server-web: TypeScript, Apollo (GraphQL), Express server, React for web
  @server-mobile: TypeScript, Apollo (GraphQL), Express server, React Native for mobile
  @universal: TypeScript, Apollo (GraphQL), Express server, React for web, React Native for mobile
  @server: TypeScript, Apollo (GraphQL), Express server
  @web: TypeScript, Apollo (GraphQL), React web app
  @mobile: TypeScript, Apollo (GraphQL), React Native for mobile

You can select the necessary project template using the arrow keys on your keyboard. Alternatively, you can start typing the name of the template to filter the list.

You can also specify the name of the template by attaching the @name_of_the_template after the project name, for example:

yarn create apollo-app my-app@web

If you run the command above, Create Apollo App will create a my-app/ project directory with the @web template meaning the client-side Apollo app. Similarly, add @server-web, @universal, or other template name instead of @web to choose a particular template.

Consult the Apollo Project Templates section to know what templates are currently available.

Select the first (default) option @server-web from the list and press Enter. Create Apollo App will generate a client-server application.

Note that it may take a while (usually up to a minute) for all dependencies to be installed and for the project to be configured. The terminal will confirm when the project is ready.

Running the Project in Development Mode

Once the installation is complete, run:

cd my-app
yarn start

A development build will be generated. You can start changing the source code in the project files located in the packages/server/src/ and packages/web/src/ directories.

NOTE: If you want to add CSS, SCSS, Sass, or Less to the frontend React application, you need to add the PostCSS configuration file postcss.config.js under the {app-root}/src for the @web template or the {app-root}/packages/web/src folder for the @server-web and @universal templates.

The PostCSS configuration file can be empty, like this:

module.exports = {};

The client-side application will be automatically opened in your default browser at http://localhost:3000. The server-side GraphQL application runs on http://localhost:8080.

If you installed a template for mobile development, the React Native app will be opened at http://localhost:3020 for iOS and at http://localhost:3010 for Android.

Generating the Production-Ready Code

If you want to build a production version of the app (i.e., the code will be minified), run:

yarn build

The production-ready code will be saved to packages/server/build/ and packages/web/build/ directories for server-side and client-side code respectively.

Apollo Project Templates

Create Apollo App provides you with the default configurations for different kinds of projects. For example, if you need to build only a client-side application, you can select a respective template – @web – during installation.

Overall, you can choose one of the six templates:

@web for a client-side application.
@server for a server-side application.
@mobile for a mobile application.
@server-web – (default) a complete solution for building a client-server app.
@server-mobile – a complete solution for building a server-side app and mobile front end.
@universal – the most comprehensive solution for building an app for the client, server, and mobile.

Project Structure

We'll review the structure of the @universal project, meaning it will have the client/, server/, and mobile/ packages under the packages/ directory. The @server-web template that you installed comes without the mobile package.

Here's an overview of the @universal project structure:

my-apollo-app
├── node_modules/
├── packages/
    ├── mobile
        ├── node_modules/
        ├── src/
            ├── App.tsx
            ├── AwakeInDevApp.js
            └── index.ts
        ├── typings/
        ├── app.json
        ├── package.json
        ├── tsconfig.json
        └── tslint.json        
    ├── server/
        ├── node_modules/
        ├── src/
            ├── index.ts
            ├── resolvers.ts
            ├── schema.graphql
            ├── schema.ts
            └── server.ts
        ├── typings/
        ├── package.json
        ├── tsconfig.json
        └── tslint.json
    └── web/
        ├── src/
            ├── App.tsx
            └── index.tsx
        ├── typings/
        ├── package.json
        ├── tsconfig.json
        └── tslint.json
├── .gitignore
├── package.json
├── tsconfig.json
├── tslint.json
└── yarn.lock

You'll work with the files located in packages/mobile/src/, packages/server/src, and packages/web/src/ when working on your Apollo project. In those directories, you can view the default project files, which you may freely change or delete.

License

create-apollo-app's People

Contributors

Stargazers

Watchers

Forkers

egoliuk justinr1234 mitjade gitter-badger veeramarni aga5tya cianixru tennox codespent smyrick devmuch

create-apollo-app's Issues

Problem with lack of extra option support for CSS/LESS loaders

SpinJS does not allow the addition of extra option (similar to babelConfig/webpackConfig) for CSS/LESS loaders leading to the following error when we bump the version of the less package to 3.0.0 :

ERROR in /mnt/c/Repos/apollo-universal-starter-kit/node_modules/css-loader??ref--7-1!/mnt/c/Repos/apollo-universal-starter-kit/node_modules/postcss-loader/lib??ref--7-2!/mnt/c/Repos/apollo-universal-starter-kit/node_modules/less-loader/dist/cjs.js??ref--7-3!../client/src/modules/common/styles/styles.less
Module build failed:

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
      in /mnt/c/Repos/apollo-universal-starter-kit/node_modules/antd/lib/style/color/bezierEasing.less (line 110, column 0)
 @ ../client/src/modules/common/styles/styles.less 2:18-239 19:6-27:8 20:18-239
 @ ../client/src/modules/common/index.jsx
 @ ./src/middleware/html.jsx
 @ ./src/middleware/website.jsx
 @ ./src/app.js
 @ ./src/server.js
 @ ./src/index.ts
 @ multi raf/polyfill babel-polyfill webpack/hot/signal.js ./src/index.ts

It does not seem to be addressable by use of webConfig to merge with the final webpack configuration since the loader configurations are in anonymous arrays/objects.

Drop GraphiQL in favor of already integrated playground?

It seems to me GraphiQL is obsolete - https://www.prisma.io/blog/introducing-graphql-playground-f1e0a018f05d#how-is-this-different-compared-to-graphiql

Shouldn't we drop it from this boilerplate?

upgrade the expo dependencies

I have been trying to upgrade the dependencies but don't have a background in js so any help here would be great

TypeError: stack.hasAll is not a function

Note: not part of starter kit, but after merging in your latest spin changes I'm having issues.

Update Having issue with starter kit too

yarn watch v0.27.5
$ spin watch
TypeError: stack.hasAll is not a function
    at WebAssetsPlugin.configure (/Users/justin/bv/ironworks_2/iron-works/node_modules/spinjs/src/plugins/WebAssetsPlugin.ts:9:19)
    at /Users/justin/bv/ironworks_2/iron-works/node_modules/spinjs/src/spin.config.ts:68:69
    at Array.forEach (native)
    at _loop_1 (/Users/justin/bv/ironworks_2/iron-works/node_modules/spinjs/src/spin.config.ts:68:28)
    at createConfig (/Users/justin/bv/ironworks_2/iron-works/node_modules/spinjs/lib/spin.config.js:75:13)
    at Object.exports.default (/Users/justin/bv/ironworks_2/iron-works/node_modules/spinjs/src/createConfig.ts:11:12)
    at Object.<anonymous> (/Users/justin/bv/ironworks_2/iron-works/node_modules/spinjs/src/index.ts:18:26)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
TypeError: Cannot read property 'name' of undefined
    at /Users/justin/bv/ironworks_2/iron-works/node_modules/spinjs/src/executor.ts:552:53
    at buildDll (/Users/justin/bv/ironworks_2/iron-works/node_modules/spinjs/src/executor.ts:550:12)
    at _loop_1 (/Users/justin/bv/ironworks_2/iron-works/node_modules/spinjs/src/executor.ts:786:21)
    at /Users/justin/bv/ironworks_2/iron-works/node_modules/spinjs/lib/executor.js:849:17
TypeError: Cannot read property 'name' of undefined
    at /Users/justin/bv/ironworks_2/iron-works/node_modules/spinjs/src/executor.ts:552:53
    at buildDll (/Users/justin/bv/ironworks_2/iron-works/node_modules/spinjs/src/executor.ts:550:12)
    at _loop_1 (/Users/justin/bv/ironworks_2/iron-works/node_modules/spinjs/src/executor.ts:786:21)
    at /Users/justin/bv/ironworks_2/iron-works/node_modules/spinjs/lib/executor.js:849:17
webpack-for-server Time: 146ms

ERROR in ./src/server/api_server.js
Module parse failed: /Users/justin/bv/ironworks_2/iron-works/src/server/api_server.js Unexpected token (52:12)
You may need an appropriate loader to handle this file type.
|           return {
|             query: invertedMap[body.id],
|             ...body
|           };
|         });
 @ ./src/server/index.js 2:0-22
 @ multi ./src/server/index.js webpack/hot/signal.js

[Enhancement] support for Docker

By adding the client, mobile and server to its each Docker container, and then managing that with Docker Compose would ease deployment and developer experience by having a homogeneous way to transport create-apollo-app to different environments. 🚢

__dirname return '/'

"options": {
"backendBuildDir": "backend/dist",
"frontendBuildDir": "frontend/dist",
"dllBuildDir": ".build/dll",
"overridesConfig": "tools/webpackAppConfig.js",
"stack": [
"apollo",
"ts",
"react",
"webpack",
"css"
],
"webpackDevPort": 3009,
"apiPort": 8080,
"defines": {
"GRAPHQL_URL": "path"
},
"ssr": false,
"useDefaultPostCss": true,
"webpackDll": true,
"reactHotLoader": false,
"persistGraphQL": false,
"frontendRefreshOnBackendChange": true,
"apolloLogging": true
}

OUTPUT does not have __dirname: true

spin watch "-v"

spin debug webDll = { name: 'webDll',
devtool: '#cheap-module-source-map',
module:
{ rules:
[ { test: /.tsx?$/,
use:
[ { loader: 'loaderPath',
options: { configFileName: 'configPath' } } ] },
{ test: /.html$/,
loader: 'loaderPath } ] },
resolve:
{ modules:
[ 'node_modulesPath',
'node_modules' ],
extensions:
[ '.web.tsx',
'.web.ts',
'.web.jsx',
'.web.js',
'.tsx',
'.ts',
'.jsx',
'.js' ] },
watchOptions: { ignored: /build/ },
bail: false,
plugins:
[ DefinePlugin {
definitions: { DEV: true, 'process.env.NODE_ENV': '"development"' } },
DllPlugin {
options: { name: 'vendor_web', path: '.build/dll/vendor_web_dll.json' } },
CheckerPlugin {} ],
node: { fs: 'empty', net: 'empty', tls: 'empty' },
entry:
{ vendor:
[ 'ajv',
'apollo-client',
'apollo-link',
'apollo-logger',
'browser-bunyan',
'redux-injectable-reducer',
'redux-injectable-store',
'redux-thunk',
'reselect',
'rxjs',
'styled-components',
'subscriptions-transport-ws' ] },
output:
{ filename: 'vendor_web.[hash]_dll.js',
path: 'dllPath',
library: 'vendor_web' } }
spin debug web = { name: 'web',
devtool: '#cheap-module-source-map',
module:
{ rules:
[ { test: /.(png|ico|jpg|xml)$/,
use:
{ loader: 'loaderPath',
options: { name: '[hash].[ext]', limit: 100000 } } },
{ test: /.woff(2)?(?v=[0-9].[0-9].[0-9])?$/,
use:
{ loader: 'loaderPath',
options: { name: './assets/[hash].[ext]', limit: 100000 } } },
{ test: /.(ttf|eot|svg)(?v=[0-9].[0-9].[0-9])?$/,
use:
{ loader: 'loaderPath',
options: { name: './assets/[hash].[ext]' } } },
{ test: /.css$/,
use:
[ { loader: 'loaderPath' },
{ loader: 'loaderPath',
options: { sourceMap: true, importLoaders: 1 } },
{ loader: 'loaderPath',
options: { plugins: [Function: plugins], sourceMap: true } } ] },
{ test: /.graphqls/,
use: 'usePath' },
{ test: /.(graphql|gql)$/,
exclude: /node_modules/,
use: [ 'usePath' ] },
{ test: /.tsx?$/,
use:
[ { loader: 'usePath',
options: { configFileName: 'path' } } ] },
{ test: /.html$/,
loader: 'usePath' } ] },
resolve:
{ modules:
[ 'node_modulesPath',
'node_modules' ],
extensions:
[ '.web.tsx',
'.web.ts',
'.web.jsx',
'.web.js',
'.tsx',
'.ts',
'.jsx',
'.js' ] },
watchOptions: { ignored: /build/ },
bail: false,
plugins:
[ NamedModulesPlugin { options: {} },
HotModuleReplacementPlugin {
options: {},
multiStep: undefined,
fullBuildTimeout: 200,
requestTimeout: 10000 },
NoEmitOnErrorsPlugin {},
DefinePlugin {
definitions:
{ CLIENT: true,
SERVER: false,
SSR: false,
DEV: true,
'process.env.NODE_ENV': '"development"',
BACKEND_URL: '"http://localhost:8080"',
GRAPHQL_URL: ''http://localhost:8080/graphql'' } },
ManifestPlugin {
opts:
{ basePath: '',
publicPath: '',
fileName: 'assets.json',
stripSrc: null,
transformExtensions: /^(gz|map)$/i,
writeToFileEmit: false,
cache: null,
seed: null,
filter: null,
map: null,
reduce: null } },
HtmlWebpackPlugin {
options:
{ template: './tools/html-plugin-template.ejs',
filename: 'index.html',
hash: false,
inject: 'body',
compile: true,
favicon: false,
minify: false,
cache: true,
showErrors: true,
chunks: 'all',
excludeChunks: [],
title: 'Webpack App',
xhtml: false } },
DefinePlugin { definitions: { PERSIST_GQL: false } },
PersistGraphQLPlugin {
options: { moduleName: 'optionsPath' },
_listeners: [],
virtualModules: VirtualModulesPlugin { _staticModules: undefined } },
CheckerPlugin {} ],
node: { fs: 'empty', net: 'empty', tls: 'empty' },
entry: { index: [ 'entryPath' ] },
output:
{ filename: '[name].[hash].js',
path: 'myPath',
publicPath: '/' },
devServer:
{ hot: true,
contentBase: '/',
publicPath: '/',
headers: { 'Access-Control-Allow-Origin': '' },
quiet: false,
noInfo: true,
historyApiFallback: true,
stats: { colors: true, chunkModules: false },
port: 3009,
proxy: { '!/.hot-update.{json,js}': { target: 'http://localhost:8080', logLevel: 'info' } } } }

using npm library in babelrc

trying to
.babelrc plugins:
["transform-react-jsx", {
"pragma": "Snabbdom.createElement"
}]

Snabbdom coming from: "snabbdom-pragma": "^2.7.0", and it says it's not found. I tried installing in on client and including babelrc in there. I suspect I should react webpack docs?

[question] for a typescript project do we need to put es6 in stack

I'm wondering for a typescript project, do we still need to put es6 in the stack.

Without it, I'm getting following error

config options

    "options": {
        "backendBuildDir": "servers/backend-server/dist",
        "frontendBuildDir": "servers/frontend-server/dist",
        "dllBuildDir": "build/dll",
        "overridesConfig": "tools/webpackAppConfig.js",
        "stack": ["apollo", "typescript", "react", "sass",  "webpack"],
        "backendUrl": "http://localhost:8080/graphql",
        "ssr": true,
        "webpackDll": true,
        "reactHotLoader": false,
        "persistGraphQL": false,
        "frontendRefreshOnBackendChange": true
      }

Run time error

> spin watch

webpack-for-server No loader specified Error: No loader specified

error package.json: Name contains illegal characters

When using npx create-apollo-app new-app and yarn create apollo-app some-app I am getting the error error package.json: Name contains illegal characters. This is happening on all of the templates.

LP-RJERUE-OSX:CAMP rjerue$ yarn create apollo-app someapp
yarn create v1.16.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
[4/4] 🔨  Building fresh packages...
success Installed "[email protected]" with binaries:
      - create-apollo-app
? Choose template @server-mobile: TypeScript, Apollo (GraphQL), Express server, React Native for mobile
yarn install v1.16.0
error package.json: Name contains illegal characters
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
App someapp generated successfully! Execute commands below to start it:

cd someapp
yarn start

I'm on node v10.16.3
NPM: 6.9.0
Yarn: 1.16.0

This is also on OSX.

Any tips on troubleshooting?

Broken `historyApiFallback`

I can't get my app to properly implement historyApiFallback the proxy gets in the way. Even if I hack at the spinjs source to disable the proxy I webpack can't find anything other than the index.

Node arguments?

Is it possible to specify command line arguments to be passed to node?

I am trying to use Visual Studio Code to debug, and it requires the --inspect flag to be passed to node on startup.

Thanks!

custom webpack plugin

To be honest spin.js works very well and most of it comes out of the box. It frees up a lot of build configuration time, but what if we want to overwrite the out of the box webpack configuration or add new webpack plugin. For example like I was referring in #10 which needs css plugin.

I do see you have plugins option, was there any example how to use it. Will this be the way to add custom webpack plugins based on our needs? I don't feel like I need any additional plugins other than that comes from out of the box from spin.js right now but want to make sure this is supported as well.

spin build fails with Cannot read property 'loader' of undefined

spin build failing with the latest version of spinjs. The issue can be reproduced with https://github.com/sysgears/apollo-universal-starter-kit on angularjs branch.

ran with ios.enabled = true

$ spin build
spin error TypeError: Cannot read property 'loader' of undefined
    at asyncLib.map (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/apollo-universal-starter-kit/node_modules/webpack/lib/NormalModuleFactory.js:249:48)
    at /Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/apollo-universal-starter-kit/node_modules/async/dist/async.js:1121:9
    at eachOfArrayLike (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/apollo-universal-starter-kit/node_modules/async/dist/async.js:1055:9)
    at eachOf (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/apollo-universal-starter-kit/node_modules/async/dist/async.js:1103:5)
    at _asyncMap (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/apollo-universal-starter-kit/node_modules/async/dist/async.js:1119:5)
    at Object.map (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/apollo-universal-starter-kit/node_modules/async/dist/async.js:1108:16)
    at NormalModuleFactory.resolveRequestArray (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/apollo-universal-starter-kit/node_modules/webpack/lib/NormalModuleFactory.js:248:12)
    at /Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/apollo-universal-starter-kit/node_modules/async/dist/async.js:3866:24
    at eachOfArrayLike (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/apollo-universal-starter-kit/node_modules/async/dist/async.js:1055:9)
    at eachOf (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/apollo-universal-starter-kit/node_modules/async/dist/async.js:1103:5)
    at _parallel (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/apollo-universal-starter-kit/node_modules/async/dist/async.js:3865:5)
    at Object.parallelLimit [as parallel] (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/apollo-universal-starter-kit/node_modules/async/dist/async.js:3948:5)
    at asyncLib.parallel (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/apollo-universal-starter-kit/node_modules/webpack/lib/NormalModuleFactory.js:186:14)
    at /Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/apollo-universal-starter-kit/node_modules/async/dist/async.js:3874:9
    at /Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/apollo-universal-starter-kit/node_modules/async/dist/async.js:473:16
    at iteratorCallback (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/apollo-universal-starter-kit/node_modules/async/dist/async.js:1050:13)

[at-loader] Using [email protected] from typescript and "tsconfig.json" from /Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/apollo-universal-starter-kit/tsconfig.json.

Eslint fails on Apollo Universal App's client directory.

Version 0.4.72 of sysgears/spinjs causes the files in the client directory of Apollo Universal Starter Kit to not validate. It says cannot find module '../node_modules/eslint/.spinrc.json'. It seems new .js files are linted correctly whereas .jsx files are not so it might have something to do with the extension name. Also, when I copy and post .spinrc.json into the /node_modules/eslint/.spinrc.json directory it works fine. So for some reason it is looking for .spinrc.json in the wrong directory.

server restart when webpack throws warning [HMR] Cannot find update.

When we externalize the node_modules, webpack hot loader on the server side ignores any (lerna) packages that compiled recently by throwing the warning. Instead, we want the server to restart when we see this warning. In the earlier version, like 0.4.18 I noticed the server restart but in the latest version, I don't see this happening.

[HMR] Cannot find update.

I'm using this workaround, to check the status idle (noticed the status as idle when it throws the warning), if idle I'm exiting the process so it restarts.

if (module.hot) {
    module.hot.status(event => {
        logger.trace(event);
        if (event === 'abort' || event === 'fail') {
            logger.error('HMR error status: ' + event);
            // Signal webpack.run.js to do full-reload of the back-end
            process.exit(250);
        }
        if (event === 'idle') {
            process.exit(250);
        }
    });

    module.hot.accept();
}

Do you have any better suggestion?

Electron target

I've been working with https://github.com/chentsulin/electron-react-boilerplate lately ; pretty end-to-end like apollo-universal-starter-kit

What are your thoughts on adding something like this into SpinJS ?

Add babel-plugin-import for modular imports

https://github.com/ant-design/babel-plugin-import

Useful for projects where antd or material-ui is used.
Maybe you should add antd and material-ui to the stack list, with each adding this babel plugin. For material-ui I guess setup should be even more complicated since it uses JSS.

Thoughts?

BTW, great project :)

Add .gitignore to scaffolding process

I'm not sure if this is an oversight, or intentional, but I'd love to have the discussion documented. There is currently no .gitignore boilerplate, which adds a little extra work after starting the project. I'm proposing adding this, and potentially also adding the git init step to the scaffolding process.

I think it is fair to assume (or just provide an option) that someone would be using git for these projects, so could be a tiny win to go from running the create apollo-app command to writing code straight away.

I'm happy to contribute this if maintainers approve of this idea?

Yarn errors when trying to create a React app

I try to create a react app with the following command:
create-react-app eth-todo-list-react

I then receive these errors

'yarnpkg' is not recognized as an internal or external command,
operable program or batch file.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

'yarnpkg' is not recognized as an internal or external command,
operable program or batch file.
events.js:167
      throw er; // Unhandled 'error' event
      ^

Error: spawn yarnpkg ENOENT
    at notFoundError (C:\Users\Aristophanes\node_modules\create-react-app\node_modules\cross-spawn\lib\enoent.js:6:26)
    at verifyENOENT (C:\Users\Aristophanes\node_modules\create-react-app\node_modules\cross-spawn\lib\enoent.js:40:16)
    at ChildProcess.cp.emit (C:\Users\Aristophanes\node_modules\create-react-app\node_modules\cross-spawn\lib\enoent.js:27:25)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:246:12)
Emitted 'error' event at:
    at ChildProcess.cp.emit (C:\Users\Aristophanes\node_modules\create-react-app\node_modules\cross-spawn\lib\enoent.js:30:37)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:246:12)

Any help fixing this would be much appreciated, thanks.

external plugins

I was not able to load external plugins which I add under the config.options. Also, i have noticed we are not doing anything the plugins that defined in options.

https://github.com/sysgears/spinjs/blob/master/src/ConfigReader.ts#L60

Below is my .spinjs file.

const config = {
    builders: {
        server: {
            entry: './src/index.ts',
            stack: ['server'],
            tsLoaderOptions: {
                "configFileName": "./tsconfig.json"
            },
            defines: {
                __SERVER__: true
            },
            enabled: true
        },
        test: {
            stack: ['server'],
            roles: ['test'],
            defines: {
                __TEST__: true
            }
        }
    },
    options: {
        stack: [
            'apollo',
            'ts',
            'css',
            'webpack'
        ],
        cache: '../../.cache',
        ssr: false,
        backendBuildDir: "dist",
        frontendBuildDir: "dist",
        dllBuildDir: "dist/.build/dll",
        webpackDll: false,
        reactHotLoader: false,
        persistGraphQL: false,
        backendUrl: "http://{ip}:8080",
        frontendRefreshOnBackendChange: true,
        nodeDebugger: false,
        defines: {
            __DEV__: process.env.NODE_ENV !== 'production',
            __GRAPHQL_URL__: '"http://localhost:8080/graphql"',
        },
        plugins: [
            new Dotenv({
                path: process.env.ENV_FILE
            })
        ],
    }
};

error Cannot create "/usr/local/bin/create-apollo-app" due to insufficient permissions.

fack... sudo, real ???

Using with code coverage [nyc + babel-plugin-istanbul]

How can I use this module to get coverage of my code? (nyc + babel-plugin-istanbul)
I figured out that under the hood you are using mocha-webpack.
I found 🔍 good issue for that
How about using with spinjs?

Also I have found lines where is possible change path for that:
https://github.com/sysgears/spinjs/blob/d76a58b4512ecf3bc6dda5b336eac135d47a1efa/src/executor.ts#L966-L975

docker question

Do we need to install any specific package for spinjs to work in the container? With the new version, it seems failing for us with following error.

> [email protected] spin:watch /usr/src/app/fullstack-pro
> spin watch

Error: Cannot find module './lib/cli'
    at Function.Module._resolveFilename (module.js:538:15)
    at Function.Module._load (module.js:468:25)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/usr/src/app/fullstack-pro/node_modules/spinjs/spin.js:4:1)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)

Docker file

FROM node:8.9.4

COPY startup /opt/startup
COPY sshd_config /etc/ssh/

RUN npm install -g pm2 \
     && mkdir -p /home/LogFiles \
     && echo "root:Docker!" | chpasswd \
     && echo "cd /home" >> /etc/bash.bashrc \
     && apt update \
     && apt install -y --no-install-recommends openssh-server vim curl wget tcptraceroute \
     && cd /opt/startup \
     && npm install \
     && chmod 755 /opt/startup/init_container.sh

EXPOSE 2222 8080

ENV PM2HOME /pm2home

ENV PORT 8080
ENV WEBSITE_ROLE_INSTANCE_ID localRoleInstance
ENV WEBSITE_INSTANCE_ID localInstance

WORKDIR /usr/src/app

backendUrl vs __BACKEND_URL__ clarification

Noticed that you have backendUrl mentioned twice in the README.md and in the code.

Based on my understanding from the Doc, it was encouraged to use __BACKEND_URL__. If that is the case then I have noticed some discrepancy as __BACKEND_URL__ won't help in SSR. So to clarify we still need to use backendUrl for changing the default URL. And __BACKEND_URL__ will be defined automatically by spinjs based on backendUrl. This is what used to be, so wondering if that was changed as I noticed it was defined explicitly in here https://github.com/sysgears/apollo-universal-starter-kit/blob/master/packages/server/.spinrc.js#L9

how to run multiple builds with spin.js?

Based on the code here spinjs look for local node modules from where it runs.

But withlerna type of setup, we can have all node_modules installed in the root. And all sub folder packages can use them (which lerna handles it transparently). And we may need to include the module in package.jsonthat brings in binaries. More details are here

But in this case, I need to manually symbolic link the node_modules as the requireModule is resolving to only local node_modules directory.

For more clarity, following are two .spinrc.json files, each configured for a different build. But due to above issue, i cannot build it from servers/frontend-server as it fails with following error.
https://github.com/cdmbase/fullstack-pro/blob/spinjs/.spinrc.json
https://github.com/cdmbase/fullstack-pro/blob/spinjs/servers/frontend-server/.spinrc.json

error


spin error { Error: Cannot find module '/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/projects/fullstack-pro/servers/frontend-server/node_modules/webpack'
    at Function.Module._resolveFilename (module.js:489:15)
    at Function.Module._load (module.js:439:25)
    at Module.require (module.js:517:17)
    at require (internal/module.js:11:18)
    at Object.requireModule [as default] (/Users/veeramar

Fresh install no matter what type of app I create gets error envelope routines unsupported

Fresh install windows 10
node: v17.4.0
npm: 8.3.1
yarn: 1.22.17

$ zen start
zen info Version 0.1.8
clean-webpack-plugin: C:\Users\ondro\Desktop\new-apollo-app\build has been removed.
Starting type checking service...
Using 1 worker with 2048MB memory limit
zen error Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:135:10)
    at module.exports (C:\Users\ondro\Desktop\new-apollo-app\node_modules\webpack\lib\util\createHash.js:90:53)
    at NormalModule._initBuildHash (C:\Users\ondro\Desktop\new-apollo-app\node_modules\webpack\lib\NormalModule.js:401:16)
    at handleParseError (C:\Users\ondro\Desktop\new-apollo-app\node_modules\webpack\lib\NormalModule.js:449:10)
    at C:\Users\ondro\Desktop\new-apollo-app\node_modules\webpack\lib\NormalModule.js:481:5
    at C:\Users\ondro\Desktop\new-apollo-app\node_modules\webpack\lib\NormalModule.js:342:12
    at C:\Users\ondro\Desktop\new-apollo-app\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (C:\Users\ondro\Desktop\new-apollo-app\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at Array.<anonymous> (C:\Users\ondro\Desktop\new-apollo-app\node_modules\loader-runner\lib\LoaderRunner.js:205:4) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
zen error Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:135:10)
    at module.exports (C:\Users\ondro\Desktop\new-apollo-app\node_modules\webpack\lib\util\createHash.js:90:53)
    at NormalModule._initBuildHash (C:\Users\ondro\Desktop\new-apollo-app\node_modules\webpack\lib\NormalModule.js:401:16)
    at handleParseError (C:\Users\ondro\Desktop\new-apollo-app\node_modules\webpack\lib\NormalModule.js:449:10)
    at C:\Users\ondro\Desktop\new-apollo-app\node_modules\webpack\lib\NormalModule.js:481:5
    at C:\Users\ondro\Desktop\new-apollo-app\node_modules\webpack\lib\NormalModule.js:342:12
    at C:\Users\ondro\Desktop\new-apollo-app\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (C:\Users\ondro\Desktop\new-apollo-app\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at C:\Users\ondro\Desktop\new-apollo-app\node_modules\loader-runner\lib\LoaderRunner.js:186:6 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

ios production build failing

When running production build with spin, it fails with the following error.

Errors

ERROR in ./node_modules/@expo/vector-icons/createIconSet.js
Module build failed: TypeError: /Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/@expo/vector-icons/createIconSet.js: Cannot read property 'add' of undefined
    at ScopeTracker.addReference (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/babel-plugin-minify-mangle-names/lib/scope-tracker.js:55:36)
    at ReferencedIdentifier (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/babel-plugin-minify-mangle-names/lib/index.js:190:28)
    at newFn (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/babel-traverse/lib/visitors.js:318:17)
    at bfsTraverse (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/babel-plugin-minify-mangle-names/lib/bfs-traverse.js:34:43)
    at Mangler.collect (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/babel-plugin-minify-mangle-names/lib/index.js:269:9)
    at Mangler.run (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/babel-plugin-minify-mangle-names/lib/index.js:70:14)
    at PluginPass.exit (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/babel-plugin-minify-mangle-names/lib/index.js:589:19)
    at newFn (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/babel-traverse/lib/path/context.js:48:17)
 @ ./node_modules/@expo/vector-icons/index.js 1:680-706
 @ ./src/client/modules/contact/index.jsx
 @ ./src/client/modules/index.js
 @ ./src/mobile/App.js
 @ ./src/mobile/AwakeInDevApp.js
 @ ./src/mobile/index.js
 @ multi ./node_modules/spinjs/react-native-polyfills/react-native-polyfill-16.js raf/polyfill ./src/mobile/index.js

ERROR in ./node_modules/expo/src/AuthSession.js
Module build failed: TypeError: /Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/expo/src/AuthSession.js: Cannot read property 'add' of undefined
    at ScopeTracker.addReference (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/babel-plugin-minify-mangle-names/lib/scope-tracker.js:55:36)
    at ReferencedIdentifier (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/babel-plugin-minify-mangle-names/lib/index.js:190:28)
    at newFn (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/babel-traverse/lib/visitors.js:318:17)
    at bfsTraverse (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/babel-plugin-minify-mangle-names/lib/bfs-traverse.js:34:43)
    at Mangler.collect (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/babel-plugin-minify-mangle-names/lib/index.js:269:9)
    at Mangler.run (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/babel-plugin-minify-mangle-names/lib/index.js:70:14)
    at PluginPass.exit (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/babel-plugin-minify-mangle-names/lib/index.js:589:19)
    at newFn (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/babel-traverse/lib/path/context.js:48:17)
 @ ./node_modules/expo/src/Expo.js 1:1146-1170
 @ ./src/mobile/AwakeInDevApp.js
 @ ./src/mobile/index.js
 @ multi ./node_modules/spinjs/react-native-polyfills/react-native-polyfill-16.js raf/polyfill ./src/mobile/index.js

ERROR in ./node_modules/expo/src/Location.js
Module build failed: TypeError: /Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/expo/src/Location.js: Cannot read property 'add' of undefined
    at ScopeTracker.addReference (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/babel-plugin-minify-mangle-names/lib/scope-tracker.js:55:36)
    at ReferencedIdentifier (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/babel-plugin-minify-mangle-names/lib/index.js:190:28)
    at newFn (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/babel-traverse/lib/visitors.js:318:17)
    at bfsTraverse (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/babel-plugin-minify-mangle-names/lib/bfs-traverse.js:34:43)
    at Mangler.collect (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/babel-plugin-minify-mangle-names/lib/index.js:269:9)
    at Mangler.run (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/babel-plugin-minify-mangle-names/lib/index.js:70:14)
    at PluginPass.exit (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/babel-plugin-minify-mangle-names/lib/index.js:589:19)
    at newFn (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/examples/starter-kit/node_modules/babel-traverse/lib/path/context.js:48:17)
 @ ./node_modules/expo/src/Expo.js 1:239-260 1:3293-3314
 @ ./src/mobile/AwakeInDevApp.js
 @ ./src/mobile/index.js
 @ multi ./node_modules/spinjs/react-native-polyfills/react-native-polyfill-16.js raf/polyfill ./src/mobile/index.js

The issue seems to be related to babel-plugin-minify as mentioned here

New Logo/Icon

Hi, I am a graphic designer, I want to help others in graphic design.

After I reviewed your project, you have no logo on this project. Therefore I want to contribute to this project by creating a new logo / icon. what do you think?

when using react-hot-loader and typescript throws errors

Noticed when using react-hot-loader as well as ts in the stack, it throws following error.

Stack tried

        stack: [
            "apollo",
            "ts",
            "react",
            "webpack",
            "react-hot-loader",
            "css"
        ],

Error

spin error TypeError: Cannot read property 'loader' of undefined
    at ReactHotLoaderPlugin.configure (/Users/user/Documents/common-stack/node_modules/spinjs/src/plugins/ReactHotLoaderPlugin.ts:24:38)
    at /Users/user/Documents/common-stack/node_modules/spinjs/src/createConfig.ts:88:62
    at Array.forEach (<anonymous>)
    at _loop_1 (/Users/user/Documents/common-stack/node_modules/spinjs/src/createConfig.ts:88:21)
    at Object.createConfig [as default] (/Users/user/Documents/common-stack/node_modules/spinjs/lib/createConfig.js:110:9)
    at Object.<anonymous> (/Users/user/Documents/common-stack/node_modules/spinjs/src/cli.ts:37:28)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/user/Documents/common-stack/node_modules/spinjs/spin.js:4:1)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)

Spin config

spin debug SpinJS Config:
 { 'servers/backend-server[server]':
   { entry: './src/index.ts',
     stack:
      Stack {
        technologies: [ 'apollo', 'ts', 'css', 'webpack', 'server' ],
        platform: 'server' },
     tsLoaderOptions: { configFileName: './tsconfig.json' },
     defines:
      { __DEV__: true,
        __GRAPHQL_URL__: '"http://localhost:8080/graphql"',
        __SSR__: false,
        __PERSIST_GQL__: false,
        __FRONTEND_BUILD_DIR__: '"../frontend-server/dist/build"',
        __DLL_BUILD_DIR__: '"../frontend-server/dist/build/dll"',
        __SERVER__: true },
     enabled: true,
     name: 'server',
     require:
      { [Function: require]
        resolve: [Function],
        probe: [Function],
        cwd: '/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/projects/IDE/adminIde-stack/servers/backend-server' },
     plugins:
      [ WebpackPlugin {},
        WebAssetsPlugin {},
        CssProcessorPlugin {},
        ApolloPlugin {},
        TypeScriptPlugin {},
        BabelPlugin {},
        ReactPlugin {},
        ReactHotLoaderPlugin {},
        TCombPlugin {},
        FlowRuntimePLugin {},
        ReactNativePlugin {},
        ReactNativeWebPlugin {},
        StyledComponentsPlugin {},
        AngularPlugin {},
        VuePlugin {} ],
     roles: [ 'build', 'watch' ],
     cache: '../../.cache',
     ssr: false,
     backendBuildDir: 'dist',
     frontendBuildDir: 'dist',
     dllBuildDir: 'dist/.build/dll',
     webpackDll: false,
     reactHotLoader: false,
     persistGraphQL: false,
     backendUrl: 'http://{ip}:8080',
     frontendRefreshOnBackendChange: true,
     nodeDebugger: false,
     externals: [ [Function], [Function] ],
     devProxy: false,
     id: 'servers/backend-server[server]',
     buildDir: undefined,
     sourceMap: true },
  'servers/backend-server[test]':
   { stack:
      Stack {
        technologies: [ 'apollo', 'ts', 'css', 'webpack', 'server' ],
        platform: 'server' },
     roles: [ 'test' ],
     defines:
      { __DEV__: true,
        __GRAPHQL_URL__: '"http://localhost:8080/graphql"',
        __SSR__: false,
        __PERSIST_GQL__: false,
        __FRONTEND_BUILD_DIR__: '"../frontend-server/dist/build"',
        __DLL_BUILD_DIR__: '"../frontend-server/dist/build/dll"',
        __TEST__: true },
     name: 'test',
     require:
      { [Function: require]
        resolve: [Function],
        probe: [Function],
        cwd: '/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/projects/IDE/adminIde-stack/servers/backend-server' },
     plugins:
      [ WebpackPlugin {},
        WebAssetsPlugin {},
        CssProcessorPlugin {},
        ApolloPlugin {},
        TypeScriptPlugin {},
        BabelPlugin {},
        ReactPlugin {},
        ReactHotLoaderPlugin {},
        TCombPlugin {},
        FlowRuntimePLugin {},
        ReactNativePlugin {},
        ReactNativeWebPlugin {},
        StyledComponentsPlugin {},
        AngularPlugin {},
        VuePlugin {} ],
     cache: '../../.cache',
     ssr: false,
     backendBuildDir: 'dist',
     frontendBuildDir: 'dist',
     dllBuildDir: 'dist/.build/dll',
     webpackDll: false,
     reactHotLoader: false,
     persistGraphQL: false,
     backendUrl: 'http://{ip}:8080',
     frontendRefreshOnBackendChange: true,
     nodeDebugger: false,
     externals: [ [Function], [Function] ],
     devProxy: false,
     id: 'servers/backend-server[test]',
     buildDir: undefined,
     sourceMap: true },
  'servers/frontend-server[web]':
   { entry: './src/index.tsx',
     stack:
      Stack {
        technologies:
         [ 'apollo',
           'ts',
           'react',
           'webpack',
           'react-hot-loader',
           'css',
           'web' ],
        platform: 'web' },
     tsLoaderOptions: { configFileName: './tsconfig.json' },
     webpackDevPort: 3000,
     openBrowser: true,
     defines:
      { __DEV__: true,
        __GRAPHQL_URL__: '"http://localhost:8080/graphql"',
        __SSR__: false,
        __PERSIST_GQL__: '\'false\'',
        __FRONTEND_BUILD_DIR__: '\'dist\'',
        __DLL_BUILD_DIR__: '\'dist/.build/dll\'',
        __CLIENT__: true },
     htmlTemplate: '../../tools/html-plugin-template.ejs',
     waitOn: [ 'tcp:localhost:8080' ],
     enabled: true,
     name: 'web',
     require:
      { [Function: require]
        resolve: [Function],
        probe: [Function],
        cwd: '/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/projects/IDE/adminIde-stack/servers/frontend-server' },
     plugins:
      [ WebpackPlugin {},
        WebAssetsPlugin {},
        CssProcessorPlugin {},
        ApolloPlugin {},
        TypeScriptPlugin {},
        BabelPlugin {},
        ReactPlugin {},
        ReactHotLoaderPlugin {},
        TCombPlugin {},
        FlowRuntimePLugin {},
        ReactNativePlugin {},
        ReactNativeWebPlugin {},
        StyledComponentsPlugin {},
        AngularPlugin {},
        VuePlugin {} ],
     roles: [ 'build', 'watch' ],
     cache: '../../.cache',
     backendBuildDir: 'dist',
     frontendBuildDir: 'dist',
     dllBuildDir: 'dist/.build/dll',
     ssr: false,
     backendUrl: 'http://localhost:8080',
     webpackDll: true,
     reactHotLoader: true,
     persistGraphQL: false,
     frontendRefreshOnBackendChange: true,
     nodeDebugger: false,
     overridesConfig: './tools/webpackAppConfig.js',
     devProxy: false,
     id: 'servers/frontend-server[web]',
     buildDir: undefined,
     sourceMap: true },
  'servers/frontend-server[server]':
   { entry: './src/backend/app.ts',
     stack:
      Stack {
        technologies:
         [ 'apollo',
           'ts',
           'react',
           'webpack',
           'react-hot-loader',
           'css',
           'server' ],
        platform: 'server' },
     tsLoaderOptions: { configFileName: './tsconfig.json' },
     defines:
      { __DEV__: true,
        __GRAPHQL_URL__: '"http://localhost:8080/graphql"',
        __SSR__: false,
        __PERSIST_GQL__: '\'false\'',
        __FRONTEND_BUILD_DIR__: '\'dist\'',
        __DLL_BUILD_DIR__: '\'dist/.build/dll\'',
        __SERVER__: true },
     enabled: false,
     name: 'server',
     require:
      { [Function: require]
        resolve: [Function],
        probe: [Function],
        cwd: '/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/projects/IDE/adminIde-stack/servers/frontend-server' },
     plugins:
      [ WebpackPlugin {},
        WebAssetsPlugin {},
        CssProcessorPlugin {},
        ApolloPlugin {},
        TypeScriptPlugin {},
        BabelPlugin {},
        ReactPlugin {},
        ReactHotLoaderPlugin {},
        TCombPlugin {},
        FlowRuntimePLugin {},
        ReactNativePlugin {},
        ReactNativeWebPlugin {},
        StyledComponentsPlugin {},
        AngularPlugin {},
        VuePlugin {} ],
     roles: [ 'build', 'watch' ],
     cache: '../../.cache',
     backendBuildDir: 'dist',
     frontendBuildDir: 'dist',
     dllBuildDir: 'dist/.build/dll',
     ssr: false,
     backendUrl: 'http://localhost:8080',
     webpackDll: true,
     reactHotLoader: true,
     persistGraphQL: false,
     frontendRefreshOnBackendChange: true,
     nodeDebugger: false,
     overridesConfig: './tools/webpackAppConfig.js',
     devProxy: false,
     id: 'servers/frontend-server[server]',
     buildDir: undefined,
     sourceMap: true },
  'servers/frontend-server[test]':
   { stack:
      Stack {
        technologies:
         [ 'apollo',
           'ts',
           'react',
           'webpack',
           'react-hot-loader',
           'css',
           'server' ],
        platform: 'server' },
     roles: [ 'test' ],
     defines:
      { __DEV__: true,
        __GRAPHQL_URL__: '"http://localhost:8080/graphql"',
        __SSR__: false,
        __PERSIST_GQL__: '\'false\'',
        __FRONTEND_BUILD_DIR__: '\'dist\'',
        __DLL_BUILD_DIR__: '\'dist/.build/dll\'',
        __TEST__: true },
     name: 'test',
     require:
      { [Function: require]
        resolve: [Function],
        probe: [Function],
        cwd: '/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/projects/IDE/adminIde-stack/servers/frontend-server' },
     plugins:
      [ WebpackPlugin {},
        WebAssetsPlugin {},
        CssProcessorPlugin {},
        ApolloPlugin {},
        TypeScriptPlugin {},
        BabelPlugin {},
        ReactPlugin {},
        ReactHotLoaderPlugin {},
        TCombPlugin {},
        FlowRuntimePLugin {},
        ReactNativePlugin {},
        ReactNativeWebPlugin {},
        StyledComponentsPlugin {},
        AngularPlugin {},
        VuePlugin {} ],
     cache: '../../.cache',
     backendBuildDir: 'dist',
     frontendBuildDir: 'dist',
     dllBuildDir: 'dist/.build/dll',
     ssr: false,
     backendUrl: 'http://localhost:8080',
     webpackDll: true,
     reactHotLoader: true,
     persistGraphQL: false,
     frontendRefreshOnBackendChange: true,
     nodeDebugger: false,
     overridesConfig: './tools/webpackAppConfig.js',
     devProxy: false,
     id: 'servers/frontend-server[test]',
     buildDir: undefined,
     sourceMap: true } }

css loader missing

Not able to load css file.

I have entrypoint for web pointing to index.tsx which as import './index.css' and it fails with following error.

spin debug web =  { name: 'web',
  devtool: '#cheap-module-source-map',
  module:
   { rules:
      [ { test: /\.(png|ico|jpg|xml)$/,
          use:
           { loader: 'url-loader',
             options: { name: '[hash].[ext]', limit: 100000 } } },
        { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
          use:
           { loader: 'url-loader',
             options: { name: './assets/[hash].[ext]', limit: 100000 } } },
        { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
          use:
           { loader: 'file-loader',
             options: { name: './assets/[hash].[ext]' } } },
        { test: /.scss$/,
          use:
           [ { loader: 'style-loader' },
             { loader: 'css-loader',
               options: { sourceMap: true, importLoaders: 1 } },
             { loader: 'postcss-loader', options: { sourceMap: true } },
             { loader: 'sass-loader', options: { sourceMap: true } } ] },
        { test: /\.graphqls/, use: 'raw-loader' },
        { test: /\.(graphql|gql)$/,
          exclude: /node_modules/,
          use: [ 'graphql-tag/loader' ] },
        { test: /\.tsx?$/,
          use:
           [ { loader: '/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/projects/fullstack-pro/node_modules/awesome-typescript-loader/dist/entry.js',
               options: { configFileName: './servers/frontend-server/tsconfig.json' } } ] },
        { test: /\.html$/, loader: 'html-loader' } ] },
  resolve:
   { modules:
      [ '/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/projects/fullstack-pro/node_modules',
        'node_modules' ],
     extensions:
      [ '.web.tsx',
        '.web.ts',
        '.web.jsx',
        '.web.js',
        '.tsx',
        '.ts',
        '.jsx',
        '.js' ] },
  watchOptions: { ignored: /build/ },
  bail: false,
  plugins:
   [ NamedModulesPlugin { options: {} },
     HotModuleReplacementPlugin {
       options: {},
       multiStep: undefined,
       fullBuildTimeout: 200,
       requestTimeout: 10000 },
     NoEmitOnErrorsPlugin {},
     DefinePlugin {
       definitions:
        { __CLIENT__: true,
          __SERVER__: false,
          __SSR__: false,
          __DEV__: true,
          'process.env.NODE_ENV': '"development"',
          __BACKEND_URL__: '"http://localhost:8080/graphql"' } },
     ManifestPlugin {
       opts:
        { basePath: '',
          publicPath: '',
          fileName: 'assets.json',
          stripSrc: null,
          transformExtensions: /^(gz|map)$/i,
          writeToFileEmit: false,
          cache: null,
          seed: null,
          filter: null,
          map: null,
          reduce: null } },
     HtmlWebpackPlugin {
       options:
        { template: '/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/projects/fullstack-pro/node_modules/spinjs/html-plugin-template.ejs',
          filename: 'index.html',
          hash: false,
          inject: 'body',
          compile: true,
          favicon: false,
          minify: false,
          cache: true,
          showErrors: true,
          chunks: 'all',
          excludeChunks: [],
          title: 'Webpack App',
          xhtml: false } },
     DefinePlugin { definitions: { __PERSIST_GQL__: false } },
     PersistGraphQLPlugin {
       options: { moduleName: '/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/projects/fullstack-pro/node_modules/persisted_queries.json' },
       _listeners: [],
       virtualModules: VirtualModulesPlugin { _staticModules: undefined } },
     CheckerPlugin {} ],
  node: { fs: 'empty', net: 'empty', tls: 'empty' },
  entry: { index: [ './servers/frontend-server/src/index.tsx' ] },
  output:
   { filename: '[name].[hash].js',
     path: '/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/projects/fullstack-pro/servers/frontend-server/dist/web',
     publicPath: '/' },
  devServer:
   { hot: true,
     contentBase: '/',
     publicPath: '/',
     headers: { 'Access-Control-Allow-Origin': '*' },
     quiet: false,
     noInfo: true,
     historyApiFallback: true,
     stats: { colors: true, chunkModules: false },
     port: 3000,
     proxy: { '!/*.hot-update.{json,js}': { target: 'http://localhost:8080', logLevel: 'info' } } } }
[HPM] Proxy created: !/*.hot-update.{json,js}  ->  http://localhost:8080

error

ERROR in ./servers/frontend-server/src/index.css
Module parse failed: /Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/projects/fullstack-pro/servers/frontend-server/src/index.css Unexpected token (7:5)
You may need an appropriate loader to handle this file type.
|  * 3. Prevent adjustments of font size after orientation changes in IE and iOS.
|  */
| html {
|   font-family: sans-serif;
|   /* 1 */
 @ ./servers/frontend-server/src/index.tsx 12:0-22
 @ multi ./servers/frontend-server/src/index.tsx

external persist queries file

I would like to see if we can add extracted queries through import if we running front-end and back-end in separate containers.

For example import <package>/extracted_queries.json

Right now it fails with below error when persist queries json file is not found.

[at-loader] Checking started in a separate process...
TypeError: Cannot read property 'length' of undefined
    at RawSource.size (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/projects/fullstack-pro/node_modules/webpack-sources/lib/Source.js:17:23)
    at obj.assets.compilationAssets.map.asset (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/projects/fullstack-pro/node_modules/webpack/lib/Stats.js:258:38)
    at Array.map (<anonymous>)
    at Stats.toJson (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/projects/fullstack-pro/node_modules/webpack/lib/Stats.js:255:35)
    at ManifestPlugin.<anonymous> (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/projects/fullstack-pro/node_modules/webpack-manifest-plugin/lib/plugin.js:45:40)
    at Compiler.applyPluginsAsyncSeries (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/projects/fullstack-pro/node_modules/tapable/lib/Tapable.js:206:13)
    at Compiler.emitAssets (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/projects/fullstack-pro/node_modules/webpack/lib/Compiler.js:358:8)
    at onCompiled (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/projects/fullstack-pro/node_modules/webpack/lib/Compiler.js:57:19)
    at applyPluginsAsync.err (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/projects/fullstack-pro/node_modules/webpack/lib/Compiler.js:514:14)
    at next (/Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/projects/fullstack-pro/node_modules/tapable/lib/Tapable.js:202:11)
    at /Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/projects/fullstack-pro/node_modules/awesome-typescript-loader/src/instance.ts:488:25
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

vendor_web is not defined

"spinjs": "^0.4.18"

sometime if set "spinjs": "0.4.18", everything work

Absolute paths in stats.json

Hello, I have a little problem. I'm using spinjs with your apollo devstack. I encoutered problem with build script. I'm using teamcity for deployment. But when I build for example on server with build agent and then copy build directory to other server I'm getting error beacuse of absolute paths to node modules in builded files. So I decided to use other way and that is call yarn build command via SSH on destination server. But yarn build is doing two things and that is build backend and build frontend. And there is another problem beacause as soon as backend build finishes teamcity get exit error and thinks that build step is finished. So maybe there would be better to have something like yarn build backend and yarn build frontend commands separatly?

This is the error whem copying build directory from build server to other server.

$ node --harmony build/server Error: Cannot find module '!../../../node_modules/isomorphic-style-loader/lib/in sertCss.js' at Function.Module._resolveFilename (module.js:469:15) at Function.Module._load (module.js:417:25) at require (internal/module.js:20:19)

postcss configuration for css-loader

Thanks for releasing 0.4.11 to support css out of the box. I'm getting following error, as it is looking for postcss.config.js. Should it be by default taken care of it and may provide way to customize it if needed. In my case, it is really not required for using css-loader.

Error

ERROR in ./node_modules/css-loader?{"sourceMap":true,"importLoaders":1}!./node_modules/postcss-loader/lib?{"sourceMap":true}!./servers/frontend-server/src/index.css
Module build failed: Error: No PostCSS Config found in: /Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/projects/fullstack-pro/servers/frontend-server/src
    at /Users/veeramarni/Documents/eclipse/workspace/phoneapps/development/projects/fullstack-pro/node_modules/postcss-load-config/index.js:51:26
    at <anonymous>
 @ ./servers/frontend-server/src/index.css 4:14-150 18:2-22:4 19:20-156
 @ ./servers/frontend-server/src/index.tsx
 @ multi ./servers/frontend-server/src/index.tsx

Error: spawn yarnpkg ENOENT (windows)

Error: spawn yarnpkg ENOENT
    at _errnoException (util.js:992:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:190:19)
    at onErrorNT (internal/child_process.js:372:16)
    at _combinedTickCallback (internal/process/next_tick.js:138:11)
    at process._tickCallback (internal/process/next_tick.js:180:9)
    at Function.Module.runMain (module.js:695:11)
    at startup (bootstrap_node.js:191:16)
    at bootstrap_node.js:612:3
error Command failed.

yarnpkg exists and in path. I believe i saw stackoverflow adress the issue on windows (if youre author)

spin error WebpackOptionsValidationError

What I did?

git clone https://github.com/sysgears/create-apollo-app.git
yarn create apollo-app my-app@mobile
cd my-app/
yarn start

What the problem is?

After yarn start, it throws this error,

yarn run v1.9.4
$ spin start
spin error WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module.rules[0] has an unknown property 'type'. These properties are valid:
   object { enforce?, exclude?, include?, issuer?, loader?, loaders?, oneOf?, options?, parser?, query?, resource?, resourceQuery?, compiler?, rules?, test?, use? }
   -> A rule
    at webpack (/home/sisir/Atomic-Design/create-apollo-app/my-app/node_modules/webpack/lib/webpack.js:19:9)
    at /home/sisir/Atomic-Design/create-apollo-app/my-app/node_modules/spinjs/src/executor.ts:717:24
    at new Promise (<anonymous>)
    at buildDll (/home/sisir/Atomic-Design/create-apollo-app/my-app/node_modules/spinjs/src/executor.ts:705:10)
    at runBuilder (/home/sisir/Atomic-Design/create-apollo-app/my-app/node_modules/spinjs/src/executor.ts:1022:57)
    at Object.execute (/home/sisir/Atomic-Design/create-apollo-app/my-app/node_modules/spinjs/src/executor.ts:1147:5)
    at Object.<anonymous> (/home/sisir/Atomic-Design/create-apollo-app/my-app/node_modules/spinjs/src/cli.ts:42:12)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
(node:1752) [DEP0079] DeprecationWarning: Custom inspection function on Objects via .inspect() is deprecated
spin error WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module.rules[0] has an unknown property 'type'. These properties are valid:
   object { enforce?, exclude?, include?, issuer?, loader?, loaders?, oneOf?, options?, parser?, query?, resource?, resourceQuery?, compiler?, rules?, test?, use? }
   -> A rule
    at webpack (/home/sisir/Atomic-Design/create-apollo-app/my-app/node_modules/webpack/lib/webpack.js:19:9)
    at /home/sisir/Atomic-Design/create-apollo-app/my-app/node_modules/spinjs/src/executor.ts:717:24
    at new Promise (<anonymous>)
    at buildDll (/home/sisir/Atomic-Design/create-apollo-app/my-app/node_modules/spinjs/src/executor.ts:705:10)
    at runBuilder (/home/sisir/Atomic-Design/create-apollo-app/my-app/node_modules/spinjs/src/executor.ts:1022:57)
    at Object.execute (/home/sisir/Atomic-Design/create-apollo-app/my-app/node_modules/spinjs/src/executor.ts:1147:5)
    at Object.<anonymous> (/home/sisir/Atomic-Design/create-apollo-app/my-app/node_modules/spinjs/src/cli.ts:42:12)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
(node:1744) [DEP0079] DeprecationWarning: Custom inspection function on Objects via .inspect() is deprecated

node externals for backend

We noticed in the latest version, the backend server build also bundles the code from node_modules.

How do we exclude all the node_modules from bundle for just on the server side? Normally, we use the following code to exclude the node_modules in webpack configuration. But this was not helping.

To exclude node_modules in lerna project

        externals: [
            nodeExternals({ modulesDir: "../../node_modules" }), // for excluding node_modules in parent location (especially when using lerna)
            nodeExternals() // for excluding node_modules in current directory
        ],

I was using the following spinjs configuration for backend.

const url = require('url');
var nodeExternals = require('webpack-node-externals');

const config = {
    builders: {
        server: {
            entry: './src/index.ts',
            stack: ['server'],
            tsLoaderOptions: {
                "configFileName": "./tsconfig.json"
            },
            defines: {
                __SERVER__: true
            },
            enabled: true
        },
        test: {
            stack: ['server'],
            roles: ['test'],
            defines: {
                __TEST__: true
            }
        }
    },
    options: {
        stack: [
            'apollo',
            'ts',
            'css',
            'webpack'
        ],
        cache: '../../.cache',
        ssr: false,
        backendBuildDir: "dist",
        frontendBuildDir: "dist",
        dllBuildDir: "dist/.build/dll",
        webpackDll: false,
        reactHotLoader: false,
        persistGraphQL: false,
        backendUrl: "http://{ip}:8080",
        frontendRefreshOnBackendChange: true,
        nodeDebugger: false,
        defines: {
            __DEV__: process.env.NODE_ENV !== 'production',
            __GRAPHQL_URL__: '"http://localhost:8080/graphql"',
        },
        externals: [
            nodeExternals({ modulesDir: "../../node_modules" }),
            nodeExternals()
        ],
    }
};

and the generated webpack configuration from spinjs

spin debug SpinJS Config:
 { 'servers/backend-server[server]':
   { entry: './src/index.ts',
     stack:
      Stack {
        technologies: [ 'apollo', 'ts', 'css', 'webpack', 'server' ],
        platform: 'server' },
     tsLoaderOptions: { configFileName: './tsconfig.json' },
     defines:
      { __DEV__: true,
        __GRAPHQL_URL__: '"http://localhost:8080/graphql"',
        __SSR__: false,
        __PERSIST_GQL__: false,
        __FRONTEND_BUILD_DIR__: '"../frontend-server/dist/build"',
        __DLL_BUILD_DIR__: '"../frontend-server/dist/build/dll"',
        __SERVER__: true },
     enabled: true,
     name: 'server',
     require:
      { [Function: require]
        resolve: [Function],
        probe: [Function],
        cwd: '/Users/test/check-stack/servers/backend-server' },
     plugins:
      [ WebpackPlugin {},
        WebAssetsPlugin {},
        CssProcessorPlugin {},
        ApolloPlugin {},
        TypeScriptPlugin {},
        BabelPlugin {},
        ReactPlugin {},
        ReactHotLoaderPlugin {},
        TCombPlugin {},
        FlowRuntimePLugin {},
        ReactNativePlugin {},
        ReactNativeWebPlugin {},
        StyledComponentsPlugin {},
        AngularPlugin {},
        VuePlugin {} ],
     roles: [ 'build', 'watch' ],
     cache: '../../.cache',
     ssr: false,
     backendBuildDir: 'dist',
     frontendBuildDir: 'dist',
     dllBuildDir: 'dist/.build/dll',
     webpackDll: false,
     reactHotLoader: false,
     persistGraphQL: false,
     backendUrl: 'http://{ip}:8080',
     frontendRefreshOnBackendChange: true,
     nodeDebugger: false,
     externals: [ [Function], [Function] ],
     devProxy: false,
     id: 'servers/backend-server[server]',
     buildDir: undefined,
     sourceMap: true },
  'servers/backend-server[test]':
   { stack:
      Stack {
        technologies: [ 'apollo', 'ts', 'css', 'webpack', 'server' ],
        platform: 'server' },
     roles: [ 'test' ],
     defines:
      { __DEV__: true,
        __GRAPHQL_URL__: '"http://localhost:8080/graphql"',
        __SSR__: false,
        __PERSIST_GQL__: false,
        __FRONTEND_BUILD_DIR__: '"../frontend-server/dist/build"',
        __DLL_BUILD_DIR__: '"../frontend-server/dist/build/dll"',
        __TEST__: true },
     name: 'test',
     require:
      { [Function: require]
        resolve: [Function],
        probe: [Function],
        cwd: '/Users/test/check-stack/servers/backend-server' },
     plugins:
      [ WebpackPlugin {},
        WebAssetsPlugin {},
        CssProcessorPlugin {},
        ApolloPlugin {},
        TypeScriptPlugin {},
        BabelPlugin {},
        ReactPlugin {},
        ReactHotLoaderPlugin {},
        TCombPlugin {},
        FlowRuntimePLugin {},
        ReactNativePlugin {},
        ReactNativeWebPlugin {},
        StyledComponentsPlugin {},
        AngularPlugin {},
        VuePlugin {} ],
     cache: '../../.cache',
     ssr: false,
     backendBuildDir: 'dist',
     frontendBuildDir: 'dist',
     dllBuildDir: 'dist/.build/dll',
     webpackDll: false,
     reactHotLoader: false,
     persistGraphQL: false,
     backendUrl: 'http://{ip}:8080',
     frontendRefreshOnBackendChange: true,
     nodeDebugger: false,
     externals: [ [Function], [Function] ],
     devProxy: false,
     id: 'servers/backend-server[test]',
     buildDir: undefined,
     sourceMap: true },
  'servers/frontend-server[web]':
   { entry: './src/index.tsx',
     stack:
      Stack {
        technologies: [ 'apollo', 'ts', 'react', 'webpack', 'css', 'web' ],
        platform: 'web' },
     tsLoaderOptions: { configFileName: './tsconfig.json' },
     webpackDevPort: 3000,
     openBrowser: true,
     defines:
      { __DEV__: true,
        __GRAPHQL_URL__: '"http://localhost:8080/graphql"',
        __SSR__: false,
        __PERSIST_GQL__: '\'false\'',
        __FRONTEND_BUILD_DIR__: '\'dist\'',
        __DLL_BUILD_DIR__: '\'dist/.build/dll\'',
        __CLIENT__: true },
     htmlTemplate: '../../tools/html-plugin-template.ejs',
     waitOn: [ 'tcp:localhost:8080' ],
     enabled: false,
     name: 'web',
     require:
      { [Function: require]
        resolve: [Function],
        probe: [Function],
        cwd: '/Users/test/check-stack/servers/frontend-server' },
     plugins:
      [ WebpackPlugin {},
        WebAssetsPlugin {},
        CssProcessorPlugin {},
        ApolloPlugin {},
        TypeScriptPlugin {},
        BabelPlugin {},
        ReactPlugin {},
        ReactHotLoaderPlugin {},
        TCombPlugin {},
        FlowRuntimePLugin {},
        ReactNativePlugin {},
        ReactNativeWebPlugin {},
        StyledComponentsPlugin {},
        AngularPlugin {},
        VuePlugin {} ],
     roles: [ 'build', 'watch' ],
     cache: '../../.cache',
     backendBuildDir: 'dist',
     frontendBuildDir: 'dist',
     dllBuildDir: 'dist/.build/dll',
     ssr: false,
     backendUrl: 'http://localhost:8080',
     webpackDll: true,
     reactHotLoader: true,
     persistGraphQL: false,
     frontendRefreshOnBackendChange: true,
     nodeDebugger: false,
     overridesConfig: './tools/webpackAppConfig.js',
     devProxy: false,
     id: 'servers/frontend-server[web]',
     buildDir: undefined,
     sourceMap: true },
  'servers/frontend-server[server]':
   { entry: './src/backend/app.ts',
     stack:
      Stack {
        technologies: [ 'apollo', 'ts', 'react', 'webpack', 'css', 'server' ],
        platform: 'server' },
     tsLoaderOptions: { configFileName: './tsconfig.json' },
     defines:
      { __DEV__: true,
        __GRAPHQL_URL__: '"http://localhost:8080/graphql"',
        __SSR__: false,
        __PERSIST_GQL__: '\'false\'',
        __FRONTEND_BUILD_DIR__: '\'dist\'',
        __DLL_BUILD_DIR__: '\'dist/.build/dll\'',
        __SERVER__: true },
     enabled: false,
     name: 'server',
     require:
      { [Function: require]
        resolve: [Function],
        probe: [Function],
        cwd: '/Users/test/check-stack/servers/frontend-server' },
     plugins:
      [ WebpackPlugin {},
        WebAssetsPlugin {},
        CssProcessorPlugin {},
        ApolloPlugin {},
        TypeScriptPlugin {},
        BabelPlugin {},
        ReactPlugin {},
        ReactHotLoaderPlugin {},
        TCombPlugin {},
        FlowRuntimePLugin {},
        ReactNativePlugin {},
        ReactNativeWebPlugin {},
        StyledComponentsPlugin {},
        AngularPlugin {},
        VuePlugin {} ],
     roles: [ 'build', 'watch' ],
     cache: '../../.cache',
     backendBuildDir: 'dist',
     frontendBuildDir: 'dist',
     dllBuildDir: 'dist/.build/dll',
     ssr: false,
     backendUrl: 'http://localhost:8080',
     webpackDll: true,
     reactHotLoader: true,
     persistGraphQL: false,
     frontendRefreshOnBackendChange: true,
     nodeDebugger: false,
     overridesConfig: './tools/webpackAppConfig.js',
     devProxy: false,
     id: 'servers/frontend-server[server]',
     buildDir: undefined,
     sourceMap: true },
  'servers/frontend-server[test]':
   { stack:
      Stack {
        technologies: [ 'apollo', 'ts', 'react', 'webpack', 'css', 'server' ],
        platform: 'server' },
     roles: [ 'test' ],
     defines:
      { __DEV__: true,
        __GRAPHQL_URL__: '"http://localhost:8080/graphql"',
        __SSR__: false,
        __PERSIST_GQL__: '\'false\'',
        __FRONTEND_BUILD_DIR__: '\'dist\'',
        __DLL_BUILD_DIR__: '\'dist/.build/dll\'',
        __TEST__: true },
     name: 'test',
     require:
      { [Function: require]
        resolve: [Function],
        probe: [Function],
        cwd: '/Users/test/check-stack/servers/frontend-server' },
     plugins:
      [ WebpackPlugin {},
        WebAssetsPlugin {},
        CssProcessorPlugin {},
        ApolloPlugin {},
        TypeScriptPlugin {},
        BabelPlugin {},
        ReactPlugin {},
        ReactHotLoaderPlugin {},
        TCombPlugin {},
        FlowRuntimePLugin {},
        ReactNativePlugin {},
        ReactNativeWebPlugin {},
        StyledComponentsPlugin {},
        AngularPlugin {},
        VuePlugin {} ],
     cache: '../../.cache',
     backendBuildDir: 'dist',
     frontendBuildDir: 'dist',
     dllBuildDir: 'dist/.build/dll',
     ssr: false,
     backendUrl: 'http://localhost:8080',
     webpackDll: true,
     reactHotLoader: true,
     persistGraphQL: false,
     frontendRefreshOnBackendChange: true,
     nodeDebugger: false,
     overridesConfig: './tools/webpackAppConfig.js',
     devProxy: false,
     id: 'servers/frontend-server[test]',
     buildDir: undefined,
     sourceMap: true } }
spin debug servers/backend-server[server] =  { name: 'server',
  module:
   { rules:
      [ { test: /\.(png|ico|jpg|xml)$/,
          use: { loader: 'ignore-loader' } },
        { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
          use: { loader: 'ignore-loader' } },
        { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
          use: { loader: 'ignore-loader' } },
        { test: /^(?!.*\/node_modules\/).*\.css$/,
          use:
           [ { loader: 'isomorphic-style-loader' },
             { loader: 'css-loader', options: { sourceMap: true } },
             { loader: 'postcss-loader', options: { sourceMap: true } } ] },
        { test: /^.*\/node_modules\/.*\.css$/,
          use:
           [ { loader: 'isomorphic-style-loader' },
             { loader: 'css-loader', options: { sourceMap: true } } ] },
        { test: /\.graphqls/, use: 'raw-loader' },
        { test: /\.(graphql|gql)$/,
          exclude: /node_modules/,
          use: [ 'graphql-tag/loader' ] },
        { test: /^(?!.*[\\\/]node_modules[\\\/]).*\.ts$/,
          use:
           [ { loader: 'awesome-typescript-loader',
               options: { configFileName: './tsconfig.json' } } ] } ],
     unsafeCache: false },
  resolve:
   { symlinks: false,
     unsafeCache: false,
     extensions: [ '.ts', '.js', '.json' ] },
  watchOptions: { ignored: /build/ },
  bail: false,
  stats:
   { hash: false,
     version: false,
     timings: true,
     assets: false,
     chunks: false,
     modules: false,
     reasons: false,
     children: false,
     source: true,
     errors: true,
     errorDetails: true,
     warnings: true,
     publicPath: false,
     colors: true },
  devtool: '#cheap-module-source-map',
  output:
   { devtoolModuleFilenameTemplate: [Function],
     filename: '[name].js',
     path: '/Users/test/check-stack/servers/backend-server/dist',
     publicPath: '/',
     sourceMapFilename: '[name].[chunkhash].js.map' },
  plugins:
   [ NamedModulesPlugin { options: {} },
     HotModuleReplacementPlugin {
       options: {},
       multiStep: undefined,
       fullBuildTimeout: 200,
       requestTimeout: 10000 },
     NoEmitOnErrorsPlugin {},
     BannerPlugin {
       options:
        { banner: 'require("source-map-support").install();',
          raw: true,
          entryOnly: false },
       banner: 'require("source-map-support").install();' },
     DefinePlugin {
       definitions:
        { __CLIENT__: false,
          __SERVER__: true,
          __SSR__: false,
          __DEV__: true,
          __TEST__: false,
          'process.env.NODE_ENV': '"development"',
          __BACKEND_URL__: '\'http://192.168.0.10:8080\'',
          __GRAPHQL_URL__: '"http://localhost:8080/graphql"',
          __PERSIST_GQL__: false,
          __FRONTEND_BUILD_DIR__: '"../frontend-server/dist/build"',
          __DLL_BUILD_DIR__: '"../frontend-server/dist/build/dll"' } },
     DefinePlugin { definitions: { __PERSIST_GQL__: false } },
     PersistGraphQLPlugin {
       options:
        { moduleName: '/Users/test/check-stack/node_modules/persisted_queries.json',
          excludeRegex: /[\\\/]node_modules[\\\/]/,
          graphqlRegex: /(.graphql|.gql)$/,
          jsRegex: /(.jsx?|.tsx?)$/ },
       _listeners: [],
       virtualModules: VirtualModulesPlugin { _staticModules: undefined } } ],
  target: 'node',
  externals: [Function: externals],
  entry: { index: [ 'webpack/hot/signal.js', './src/index.ts' ] } }

Storybook

Can you help adding story book to this starter kit?

I would like to add it if you point me some direction and do code review :)

Dependency installation

I had to install all the dependencies that spin introduced as part of the stack that I configured. Is there a way for spin to declare these so I don't have to. Or at least provide a command to insure they are all added to my package?

Adding 'ts' breaks jsx

Have added 'ts' to my stack and as a result am getting

ERROR in ./src/client/index.jsx
Module parse failed: Unexpected token (17:9)
You may need an appropriate loader to handle this file type.
|   let frontendReloadCount = 0;
|
|   render(<Main key={frontendReloadCount} />, root);
|
|   if (module.hot) {
 @ multi babel-polyfill webpack-hot-middleware/client ./src/client/index.jsx

Maybe related to #9
Am on spinjs v0.4.20

NativeBase UI Plugin

Opening this for discussion on adding Native Base to this.

@Vlasenko First question, what's the best way to go about adding packagerOpts to expo?

How to pass custom tsconfig.json

How to pass custom tsconfig.json based on each build environment. For example i use following awesome-typescript-loader with options to use a specific tsconfig.json. How do I do with spin.js

        rules: [
            {
                test: /\.tsx?$/,
                use: [
                    {
                        loader: 'awesome-typescript-loader',
                        options: {
                            configFileName: './servers/backend-server/tsconfig.json'
                        }
                    }]
                    .concat(IS_PERSIST_GQL ? ['persistgraphql-webpack-plugin/js-loader'] : []),
                exclude: [/node_modules/],
            },

Next.js

@Vlasenko Have you considered next.js possibilities? They have their own webpack / command line tools and whatnot. Let me know if anything comes to mind immediately, but I'm considering it would be nice to be able to have that as another option.

sysgears / create-apollo-app Goto Github PK

create-apollo-app's Introduction

Create Apollo App

Description

Generating a Project with Create Apollo App

Prerequisites

Generating a Project

Running the Project in Development Mode

Generating the Production-Ready Code

Apollo Project Templates

Project Structure

License

create-apollo-app's People

Contributors

Stargazers

Watchers

Forkers

create-apollo-app's Issues

config options

Run time error

Docker file

error

Errors

Error

Spin config

Error

Recommend Projects

Recommend Topics

Recommend Org