sysgears/create-apollo-app

Joel Poloney

@joelpoloney

Random question... if I'm using create apollo-app and choosing web... can I specify my own index.html? how do I go about doing this?

Ah, it looks like it uses html-webpack-plugin under the covers. I'll read up on that

Joel Poloney

@joelpoloney

Hm, still unclear of where to put the webpack.config.js file. I tried a few different locations and it's not getting picked up. Any help would be great

Joel Poloney

@joelpoloney

Read through the src for zen and it looks for an index.html file of my own first before using the template one. I added an index.html file at the root of the packages/web folder and it's picking that up. Good for now.

Victor Vlasenko

@larixer

@joelpoloney Zen allows to override generated webpack config using this technique:
https://github.com/sysgears/larix/blob/master/packages/zen/docs/configuration.md#toolnameconfig

@joelpoloney I have plans to remove zen from create-apollo-app and use webpack.config.js instead

Joel Poloney

@joelpoloney

Ah great to know 👍

I'm running into an interesting issue where I run "zen build", it errors, but still exits successfully. Causing some issues with my CI tool not detecting build failures. Not sure how to configure this to exit with an error code

Example pastebin: https://pastebin.com/MFnEg34m

I could also put this in the sysgears/zen channel, as well

Joel Poloney

@joelpoloney

I feel I want this webpack option set to true: https://webpack.js.org/configuration/other-options/#bail. But when I add a .zenrc.js file with:

const config = {
  builders: {
    server: {
      webpackConfig: {
        bail: true
      }
    }
  }
}

it doesn't work

Joel Poloney

@joelpoloney

Even adding a "zen" entry to my package.json file doesn't appear to be picking up those changes either...

Joel Poloney

@joelpoloney

Even more interesting... without any zenrc files or config, it fails with code in the web directory but not with code in the server directory

yeah, definitely feels like a bug. I wonder if it's because the server directory is always built before the web directory and it's not following the last exit status code or something

TomPfundt

@TomPfundt

Hi, I'm a student and have just come across the create-apollo-app. For one of my uni projects, I'd like to build it in a docker image and deploy it to an AWS ECS, to run ElasticSearch queries. I have deployed simple front end app nginx images before, but am struggling on writing the Dockerfile to achieve this, as docker is also brand new to me. I was just wondering firstly is it possible to run these both in the same docker image for my application, and secondly if someone could point me in the right direction with the Dockerfile?

Victor Vlasenko

@larixer

Hi @TomPfundt

Though we don’t ship Docker configs with create-apollo-app, we have very similar project to create-apollo-app where we do ship Dockerfile and docker-compose.yml:
Take a look there:
https://github.com/sysgears/apollo-universal-starter-kit/blob/master/docker-compose.prod.yml
https://github.com/sysgears/apollo-universal-starter-kit/blob/master/Dockerfile

I think you should have very similair docker configs

We don’t configure nginx there though, just expose Node app directly

TomPfundt

@TomPfundt

Hi @vlasenko thanks for the information, I will have a look at the stater kit repo!

jbsaeza

@jbsaeza

Hi, I

jbsaeza

@jbsaeza

Hi, I'm a student and I've started a project using your @web configuration. I'm having problems finding the location of the header tag so I can change the title of my app. Help

Victor Vlasenko

@larixer

@jbsaeza Create file src/index.html:

<!DOCTYPE html>
<html>
<head>
    <base href="/">
    <meta charset="utf-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id='root'></div>
</body>
</html>

It will be picked up automatically and you will be able to change the title

Joel Poloney

@joelpoloney

Does anyone know how to attach the VSCode debugger to the node process for the GraphQL code and have source maps read through? When I run my local environment, it puts files in packages/server/build... mainly an index.js and then a index.{hash}.js.map file. I've been struggling to get this in my launch.json file so it has all source maps available

Right now, my launch.json file has a launch type of Attach by Process ID... and then I pick the one that GraphQL is running on. It attaches just fine, but breakpoints aren't working because it can't find the source maps. The error I get is: breakpoint ignored because generated code not found (source map problem?)

Joel Poloney

@joelpoloney

Been trying to follow all the suggestions here: https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_source-maps

Victor Vlasenko

@larixer

Yes, its source map problem

Joel Poloney

@joelpoloney

Do you have any more info?

Victor Vlasenko

@larixer

No, all the info is inside your index.{hash}.js.map and index.js

Joel Poloney

@joelpoloney

I've been playing around with it and have it showing up now but it's finding them, but now getting "Breakpoint set but not yet bound" on all my breakpoints :(

Victor Vlasenko

@larixer

@joelpoloney Have you tried debugging like this?
https://github.com/sysgears/apollo-universal-starter-kit/blob/0ec2357a2f53b2a3a106fa055eb41884add7a377/docs/Debugging.md#debugging-nodejs-backend-server-via-visual-studio-code

Joel Poloney

@joelpoloney

Aha. There we go

I also needed the --inspect on NodeHmrPlugin

Victor Vlasenko

@larixer

Yep

Joel Poloney

@joelpoloney

Thank you again 🙏

is it ok to leave the --inspect?

Victor Vlasenko

@larixer

yes

absolutely

Joel Poloney

@joelpoloney

ah ok great

I also need to add this to my webpack.config.js in the output map

devtoolModuleFilenameTemplate: 'file://[absolute-resource-path]'

Joel Poloney

@joelpoloney

(you may want to add that info to your Debugging readme)

Victor Vlasenko

@larixer

probably yes, I think in zen I used to have much more sophisticated devtoolModuleFilenameTemplate: for the backend

Joel Poloney

@joelpoloney

Ah... yeah I put this in just the webpack.config.js for the server folder. Works like a charm

Where communities thrive

People

Repo info

Activity