Add development build feature to the razzle build script (on master) #1693

silviubogan · 2021-08-21T01:33:16Z

so that the razzle build script can produce a development build (which is sometimes useful for testing) using just a parameter --node-env=development

see #1289

Tasks

the modified build script also seems to start a background process that still writes to the terminal after appearantly exiting the process
I replaced "nodeEnv === 'production' ? 'prod' : 'dev'," with "prod", as it was before and I don't know why it is was a mistake (?) but it solves this problem:

it produces the development build but it also starts it which seems wrong to me, although I put --noninteractive and when removing the --node-env=development it produces the production build without starting it

I think I still have to make some sort of test for the improved --node-env option, am I right?

@fivethreeo Please let me know if you can help me with any of these tasks/questions listed above. Any feedback is appreciated. Thanks.

so that the razzle build script can produce a development build which is sometimes useful for testing using just a parameter --node-env=development see jaredpalmer#1289

vercel · 2021-08-21T01:33:21Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/jared/razzle/Dfd8hegKwM1hzaAA9aCP2T2ru6Tu
✅ Preview: https://razzle-git-fork-silviubogan-build-for-development-jared.vercel.app

that should remain local

silviubogan · 2021-08-21T01:46:37Z

@fivethreeo For some reason the command npm run build in the new example does not produce a dev build (I remember that, before this new PR, it produced a dev build). Now I have no idea how to make it produce a dev build.

> razzle build --node-env=development

If you have issues with css make sure postcss resolves to v8.2.4.
See: https://razzlejs.org/getting-started#common-issues

CssMinimizerPlugin currently uses clean-css,
we will switch to cssnano once it supports postcss v8.2.4.

Compiling client default build...

Client default build compiled with warnings


asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  static/js/client.14b40ff8.js (272 KiB)

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  client (272 KiB)
      static/css/client.aeb8fc1a.css
      static/js/client.14b40ff8.js


webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/


Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

  83.42 KB  build/public/static/js/client.14b40ff8.js
  185 B     build/assets.json
  185 B     build/public/static/css/client.aeb8fc1a.css

Compiling server default build...

Compiled server default build successfully.

The output files contain obfuscated and minified code.

fivethreeo · 2021-08-21T02:59:45Z

Oh, you mean dev in that way. Actually that has to be done for each case because razzle decides how to configure webpack by the 'dev' 'prod' string. So using 'dev' will start the server and add react refresh and hot reloading code. So we have to change that in createConfigAsync but IS_DEV and IS_PROD vars decide what plugins to add in big if blocks and also decides what mode webpack runs in and assumes we run in razzle start. So what we need to do is to check actual env and set a different webpack mode, set the dev tool, change splitchunks, disable terser, maybe change something in the define plugin options. This is sort of a legacy from early razzle and will need to be addressed better in the next major version. But we can fix it for now by brute force without changing the razzle api.

fivethreeo · 2021-08-21T03:16:08Z

'prod' and 'dev' should be 'start' and 'build' really, but backwards compatibility is a must until 5.0

fivethreeo · 2021-08-21T06:06:22Z

I think I need to do this actually, needs lots of internal knowledge. But I can pull this one after I fix it 😀

silviubogan · 2021-08-21T06:49:33Z

@fivethreeo

I think I need to do this actually, needs lots of internal knowledge. But I can pull this one after I fix it grinning

Thanks. If you need some help from a beginner like me, please let me know, especially if my help can speed things up. I am restlessly waiting for the new version that has this feature.

fivethreeo · 2021-08-21T16:34:26Z

Are you able to try out the master branch?

silviubogan · 2021-08-21T17:05:37Z

Are you able to try out the master branch?

I think that in about 30 minutes I'll start an attempt. Thank you very much for your work!

silviubogan · 2021-08-21T17:36:42Z

@fivethreeo How can I use npm link with the Razzle monorepo to reference the razzle package in it? Should I try to use Yalc?

silviubogan · 2021-08-21T17:45:41Z

@fivethreeo

$ NODE_ENV=development npx tsc -b && NODE_ENV=development npx razzle build --noninteractive --node-env=development

ERROR  Unexpected error

TypeError: Cannot set property 'noEmitOnErrors' of undefined
    at /some/path/to/razzle/monorepo/packages/razzle/config/createConfigAsync.js:971:46

fivethreeo · 2021-08-21T18:04:21Z

Pushed a fix, retry now

silviubogan · 2021-08-21T18:12:01Z

Pushed a fix, retry now

I ran git pull.

fivethreeo · 2021-08-21T18:24:34Z

Using yalc?

silviubogan · 2021-08-21T18:26:21Z

Using npm link. Should I try with Yalc?

fivethreeo · 2021-08-21T18:28:31Z

Don't think you got the changes somehow, yalc works too.

silviubogan · 2021-08-21T18:29:36Z

@fivethreeo Yes, you are right.

fivethreeo · 2021-08-21T18:30:15Z

https://github.com/jaredpalmer/razzle/blob/master/packages/razzle/config/createConfigAsync.js#L935

silviubogan · 2021-08-21T18:36:08Z

The razzle repo is up-to-date, but npm link does not work. When I run npm link razzle inside the directory of the app I am working on I get:

/path/to/app/directory/node_modules/razzle -> /home/silviub/.nvm/versions/node/v12.22.5/lib/node_modules/razzle -> /path/to/razzle/monorepo/packages/razzle

Does this look right?

fivethreeo · 2021-08-21T18:41:42Z

Not sure, I only use yarn.

fivethreeo · 2021-08-21T18:42:31Z

try rerunning npm install?

silviubogan · 2021-08-21T18:52:57Z

I solved with Yalc and now I get:

TypeError: ManifestPlugin is not a constructor
    at /path/to/my/app/node_modules/razzle/config/createConfigAsync.js:744:9

fivethreeo · 2021-08-21T18:54:00Z

Ah, sorry, I missed one ;)

silviubogan · 2021-08-21T19:09:17Z

The masked log is here. Good night!

fivethreeo · 2021-08-21T21:09:18Z

https://github.com/jaredpalmer/razzle/blob/master/test/e2e/razzle-build.test.js#L212

silviubogan · 2021-08-22T13:48:36Z

When deploying, it requests the JS and CSS bundles from localhost instead of the domain name/IP address. It almost works. I think it has to do with the environment variable called RAZZLE_ASSETS_MANIFEST which is set by Razzle.

silviubogan · 2021-08-22T14:02:43Z

It seems to me that on the remote server RAZZLE_ASSETS_MANIFEST is set to /local/path/to/my/app/build/assets.json.

fivethreeo · 2021-08-22T14:43:56Z

Fixed

fivethreeo · 2021-08-22T14:46:27Z

https://github.com/jaredpalmer/razzle/blob/master/examples/with-webpack-public-path/src/server.js

silviubogan · 2021-08-22T15:49:57Z

When running NODE_ENV=development npx tsc -b && NODE_ENV=development npx razzle build --noninteractive --node-env=development I get, after successful client build,

Failed to compile server default build.

[
  {
    moduleIdentifier: '/path/to/my/app/node_modules/razzle/config/babel-loader/razzle-babel-loader.js??razzle-babel-loader!/path/to/my/app/src/server/index.tsx',
    moduleName: './src/server/index.tsx',
    loc: '95:11-54',
    message: "Module not found: Error: Can't resolve 'build/assets.json' in '/path/to/my/app/src/server'",
    moduleId: './src/server/index.tsx',
    moduleTrace: [ [Object] ],
    details: "resolve 'build/assets.json' in '/path/to/my/app/src/server'\n" +
      '  Parsed request is a module\n' +
      '  using description file: /path/to/my/app/package.json (relative path: ./src/server)\n' +
      '    resolve as module\n' +
      "      /path/to/my/app/src/server/node_modules doesn't exist or is not a directory\n" +
      "      /path/to/my/app/src/node_modules doesn't exist or is not a directory\n" +
      '      looking for modules in /path/to/my/app/node_modules\n' +
      "        /path/to/my/app/node_modules/build doesn't exist\n" +
      '      looking for modules in /run/media/silviub/T7-Touch/Lucru/node_modules\n' +
      "        /run/media/silviub/T7-Touch/Lucru/node_modules/build doesn't exist\n" +
      "      /run/media/silviub/T7-Touch/node_modules doesn't exist or is not a directory\n" +
      "      /run/media/silviub/node_modules doesn't exist or is not a directory\n" +
      "      /run/media/node_modules doesn't exist or is not a directory\n" +
      "      /run/node_modules doesn't exist or is not a directory\n" +
      "      /node_modules doesn't exist or is not a directory\n" +
      '      looking for modules in /path/to/my/app/node_modules\n' +
      "        /path/to/my/app/node_modules/build doesn't exist\n" +
      '      looking for modules in /path/to/my/app/src\n' +
      "        /path/to/my/app/src/build doesn't exist",
    stack: "ModuleNotFoundError: Module not found: Error: Can't resolve 'build/assets.json' in '/path/to/my/app/src/server'\n" +
      '    at /path/to/my/app/node_modules/webpack/lib/Compilation.js:1773:28\n' +
      '    at /path/to/my/app/node_modules/webpack/lib/NormalModuleFactory.js:811:13\n' +
      '    at eval (eval at create (/path/to/my/app/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:8:1)\n' +
      '    at /path/to/my/app/node_modules/webpack/lib/NormalModuleFactory.js:286:22\n' +
      '    at eval (eval at create (/path/to/my/app/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)\n' +
      '    at /path/to/my/app/node_modules/webpack/lib/NormalModuleFactory.js:442:22\n' +
      '    at /path/to/my/app/node_modules/webpack/lib/NormalModuleFactory.js:124:11\n' +
      '    at /path/to/my/app/node_modules/webpack/lib/NormalModuleFactory.js:673:25\n' +
      '    at /path/to/my/app/node_modules/webpack/lib/NormalModuleFactory.js:882:8\n' +
      '    at /path/to/my/app/node_modules/webpack/lib/NormalModuleFactory.js:1002:5\n' +
      '    at /path/to/my/app/node_modules/neo-async/async.js:6883:13\n' +
      '    at /path/to/my/app/node_modules/webpack/lib/NormalModuleFactory.js:985:45\n' +
      '    at finishWithoutResolve (/path/to/my/app/node_modules/enhanced-resolve/lib/Resolver.js:296:11)\n' +
      '    at /path/to/my/app/node_modules/enhanced-resolve/lib/Resolver.js:362:15\n' +
      '    at /path/to/my/app/node_modules/enhanced-resolve/lib/Resolver.js:410:5\n' +
      '    at eval (eval at create (/path/to/my/app/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)'
  }
]

Thanks.

silviubogan · 2021-08-22T16:02:21Z

@fivethreeo The normal (production) build throws the same error.

fivethreeo · 2021-08-22T16:12:57Z

If you git reset to the previous rev is the assets inlined in build/server.js

…

On Sun, 22 Aug 2021 at 18:02, Silviu Bogan ***@***.***> wrote: @fivethreeo <https://github.com/fivethreeo> The normal (production) build throws the same error. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1693 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAADGV4JKAKVYYEHQOWX73T6ENRTANCNFSM5CRJS2XQ> .

-- Øyvind Saltvik

fivethreeo · 2021-08-22T16:37:41Z

I checked it, loaded by webpack and inlined. I will just undo the relative path :)

fivethreeo · 2021-08-22T16:45:45Z

By the way

You can just run

yarn try-example with-development-build

In the razzle monorepo

Then

cd example
yarn build

If you change something in razzle run

yarn updateyalc

In the example dir

#1695

silviubogan · 2021-08-22T17:50:17Z

Now the remote server serves the JS bundle from e.g. http://localhost:3005/static/js/client.f7b441b5.js (similar issue) which is unavailable. But the local production build works well.

silviubogan · 2021-08-22T17:54:05Z

The local development build also does not work. The JS and CSS bundles are requested from similar URLs but the response from the server is SSR. I want to take another look at with-webpack-public-path to see if I'm missing some functionality in the SSR server.

fivethreeo · 2021-08-22T18:49:55Z

What is the env vars in remote?

fivethreeo · 2021-08-22T20:47:34Z

Also does the remote run start:prod

silviubogan · 2021-08-23T06:40:27Z

@fivethreeo

What is the env vars in remote?

I have this part of code in the server:

let assets: any;

const syncLoadAssets = () => {
  fs.writeFileSync("env-vars.json", JSON.stringify(process.env, null, 2));
  assets = require(process.env.RAZZLE_ASSETS_MANIFEST!);
};
syncLoadAssets();

that produces the following masked output in env-vars.json:

{
  "USER": "root",
  "SSH_CLIENT": "<some numbers>",
  "SSH_AGENT_PID": "<some numeric ID>",
  "XDG_SESSION_TYPE": "tty",
  "SHLVL": "3",
  "MOTD_SHOWN": "pam",
  "HOME": "/root",
  "SSH_TTY": "/dev/pts/0",
  "nvm_current_version": "v12.22.5",
  "DBUS_SESSION_BUS_ADDRESS": "unix:path=/run/user/0/bus",
  "FORCE_COLOR": "2",
  "LOGNAME": "root",
  "_": "/root/.local/share/nvm/v12.22.5/bin/npx",
  "PUBLIC_PATH": "http://<some IP address>:3005/",
  "XDG_SESSION_CLASS": "user",
  "TERM": "screen.xterm-256color",
  "XDG_SESSION_ID": "<some numeric ID>",
  "PATH": "/root/path/to/my/app/on/remote/node_modules/.bin:/root/.local/share/nvm/v12.22.5/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin",
  "SSH_ENV": "/root/.ssh/environment",
  "XDG_RUNTIME_DIR": "/run/user/0",
  "LANG": "C.UTF-8",
  "STY": "<screen session identifier>",
  "SSH_AUTH_SOCK": "<irrelevant>",
  "SHELL": "/usr/bin/fish",
  "WINDOW": "0",
  "PWD": "</absolute/path/to/app/dir/in/remote/server>",
  "SSH_CONNECTION": "<some numbers here>",
  "TERMCAP": "SC|screen.xterm-256color|VT 100/ANSI X3.64 virtual terminal:DO=\\E[%dB:LE=\\E[%dD:RI=\\E[%dC:UP=\\E[%dA:bs:bt=\\E[Z:cd=\\E[J:ce=\\E[K:cl=\\E[H\\E[J:cm=\\E[%i%d;%dH:ct=\\E[3g:do=^J:nd=\\E[C:pt:rc=\\E8:rs=\\Ec:sc=\\E7:st=\\EH:up=\\EM:le=^H:bl=^G:cr=^M:it#8:ho=\\E[H:nw=\\EE:ta=^I:is=\\E)0:li#41:co#140:am:xn:xv:LP:sr=\\EM:al=\\E[L:AL=\\E[%dL:cs=\\E[%i%d;%dr:dl=\\E[M:DL=\\E[%dM:dc=\\E[P:DC=\\E[%dP:im=\\E[4h:ei=\\E[4l:mi:IC=\\E[%d@:ks=\\E[?1h\\E=:ke=\\E[?1l\\E>:vi=\\E[?25l:ve=\\E[34h\\E[?25h:vs=\\E[34l:ti=\\E[?1049h:te=\\E[?1049l:us=\\E[4m:ue=\\E[24m:so=\\E[3m:se=\\E[23m:mb=\\E[5m:md=\\E[1m:mh=\\E[2m:mr=\\E[7m:me=\\E[m:ms:Co#8:pa#64:AF=\\E[3%dm:AB=\\E[4%dm:op=\\E[39;49m:AX:vb=\\Eg:G0:as=\\E(0:ae=\\E(B:ac=\\140\\140aaffggjjkkllmmnnooppqqrrssttuuvvwwxxyyzz{{||}}~~..--++,,hhII00:po=\\E[5i:pf=\\E[4i:Km=\\E[M:k0=\\E[10~:k1=\\EOP:k2=\\EOQ:k3=\\EOR:k4=\\EOS:k5=\\E[15~:k6=\\E[17~:k7=\\E[18~:k8=\\E[19~:k9=\\E[20~:k;=\\E[21~:F1=\\E[23~:F2=\\E[24~:kB=\\E[Z:kh=\\E[1~:@1=\\E[1~:kH=\\E[4~:@7=\\E[4~:kN=\\E[6~:kP=\\E[5~:kI=\\E[2~:kD=\\E[3~:ku=\\EOA:kd=\\EOB:kr=\\EOC:kl=\\EOD:km:",
  "PUBLIC_URL": "http://<SOME IP ADDRESS>:3005/",
  "NODE_ENV": "production",
  "PORT": "3005",
  "CONNECTION_STRING": "<MongoDB connection string>",
  "ABS_PATH_TO_CA": "<Some path to a certificate file>"
}

Also does the remote run start:prod

The development bundle of the app on the remote server is started with:

PUBLIC_URL=http://<some IP address>:3005/ PUBLIC_PATH=http://<the same IP address>:3005/ NODE_ENV=production npx concurrently "node build/server.js" "node build/wsserver.js"

fivethreeo · 2021-08-23T11:37:36Z

If you look in build/server.js what does webpack_public_path say?

silviubogan · 2021-08-23T11:50:48Z

silviubogan · 2021-08-23T11:53:36Z

In build/public/static/js/client.d41c432c.js I have

fivethreeo · 2021-08-23T12:04:39Z

Try searching for localhost

silviubogan · 2021-08-23T12:14:29Z

In the client JS bundle:

silviubogan · 2021-08-23T12:16:31Z

In .env.local, which is manually loaded in the server, I have:

PORT=3005
PUBLIC_URL=http://localhost:3005/
PUBLIC_PATH=http://localhost:3005/
CONNECTION_STRING=<some MongoDB connection string>

silviubogan · 2021-08-23T12:20:39Z

Not .env.local but .env.production should be loaded. I check NODE_ENV and based on that, in the server, I load either .env.local or .env.production.

silviubogan · 2021-08-23T12:21:15Z

Does Razzle somehow load .env.local automatically?

fivethreeo · 2021-08-23T12:43:35Z

https://github.com/jaredpalmer/razzle/blob/master/packages/razzle/config/env.js#L15

fivethreeo · 2021-08-23T12:44:07Z

During build that is

fivethreeo · 2021-08-23T14:56:10Z

PUBLIC_PATH is a build time var only, that is what causes the confusion, use your own var in deployment.

silviubogan · 2021-08-23T14:56:28Z

I've changed the .env.local file's name and correctly set the env vars at build time and, when I access the home page of the app, SSR runs, but the JS bundle request returns SSR HTML too.

silviubogan · 2021-08-23T15:15:05Z

@fivethreeo I had to set RAZZLE_PUBLIC_DIR before build time and now this new feature works very very well! Thank you for your work! You are awesome!

fivethreeo · 2021-08-23T16:02:33Z

I often do process.env.PUBLIC_DIR||process.env.RAZZLE_PUBLIC_DIR

silviubogan added 3 commits August 21, 2021 04:16

feat(build-script): add development build feature

497159d

so that the razzle build script can produce a development build which is sometimes useful for testing using just a parameter --node-env=development see jaredpalmer#1289

Add @silviubogan as a contributor

ef81852

docs(example) improve with-development-build's README

b35b7ce

vercel bot deployed to Preview August 21, 2021 01:33 View deployment

Undo changes in razzle's package.json

7befb61

that should remain local

vercel bot deployed to Preview August 21, 2021 01:38 View deployment

fivethreeo marked this pull request as ready for review August 21, 2021 15:30

fivethreeo merged commit 29eb51e into jaredpalmer:master Aug 21, 2021

Add development build feature to the razzle build script (on master) #1693

Add development build feature to the razzle build script (on master) #1693

Conversation

silviubogan commented Aug 21, 2021 • edited

Tasks

vercel bot commented Aug 21, 2021 • edited

silviubogan commented Aug 21, 2021

fivethreeo commented Aug 21, 2021

fivethreeo commented Aug 21, 2021

fivethreeo commented Aug 21, 2021

silviubogan commented Aug 21, 2021

fivethreeo commented Aug 21, 2021

silviubogan commented Aug 21, 2021

silviubogan commented Aug 21, 2021

silviubogan commented Aug 21, 2021

fivethreeo commented Aug 21, 2021

silviubogan commented Aug 21, 2021

fivethreeo commented Aug 21, 2021

silviubogan commented Aug 21, 2021

fivethreeo commented Aug 21, 2021

silviubogan commented Aug 21, 2021

fivethreeo commented Aug 21, 2021

silviubogan commented Aug 21, 2021

fivethreeo commented Aug 21, 2021

fivethreeo commented Aug 21, 2021

silviubogan commented Aug 21, 2021

fivethreeo commented Aug 21, 2021

silviubogan commented Aug 21, 2021

fivethreeo commented Aug 21, 2021

silviubogan commented Aug 22, 2021

silviubogan commented Aug 22, 2021 • edited

fivethreeo commented Aug 22, 2021

fivethreeo commented Aug 22, 2021

silviubogan commented Aug 22, 2021

silviubogan commented Aug 22, 2021

fivethreeo commented Aug 22, 2021 via email

fivethreeo commented Aug 22, 2021

fivethreeo commented Aug 22, 2021 • edited

silviubogan commented Aug 22, 2021

silviubogan commented Aug 22, 2021

fivethreeo commented Aug 22, 2021

fivethreeo commented Aug 22, 2021

silviubogan commented Aug 23, 2021

fivethreeo commented Aug 23, 2021

silviubogan commented Aug 23, 2021

silviubogan commented Aug 23, 2021

fivethreeo commented Aug 23, 2021

silviubogan commented Aug 23, 2021

silviubogan commented Aug 23, 2021

silviubogan commented Aug 23, 2021

silviubogan commented Aug 23, 2021

fivethreeo commented Aug 23, 2021

fivethreeo commented Aug 23, 2021

fivethreeo commented Aug 23, 2021

silviubogan commented Aug 23, 2021

silviubogan commented Aug 23, 2021

fivethreeo commented Aug 23, 2021

silviubogan commented Aug 21, 2021 •

edited

vercel bot commented Aug 21, 2021 •

edited

silviubogan commented Aug 22, 2021 •

edited

fivethreeo commented Aug 22, 2021 •

edited