serve VS heroku-buildpack-nodejs

The above code starts a static server (Vercel’s serve) in port 3000. Open the URL in Chrome, open the DevTools, and click the Source tab. You’ll see main.ts as follows:

Another alternative that comes to my mind it is to use the node.js buildpack and serve the static files using serve or similar.

If you don't know how to create a backend, you can try https://npmjs.com/package/serve which is a command that will run a simple server that just serves you the files in a folder (kinda like /public does) but it runs separately from CRA/Webpack so will not affect your app. You then have to take care of fetching and updating the data with fetch() as often as you need.

In app.jsx I've tried removing all the root code and just rendered a typical "Hello World" p tag and it doesn't take nearly as long. I've also ran a basic web server infront of the build folder using serve which suggests it might webpack-dev-server that is having issues with the size of the application (Or could it be saying it's built before it actually is?).

Maybe I was lacking context a bit. I was referencing this actually: https://github.com/vercel/serve/pull/680

https://github.com/vercel/serve (nodejs implementation, therefore requires npm or yarn being installed which are package managers for node)

React.js/ Next.js / Material-UI / Browserify (bundle packaging) / Serve (static site serving) / React-Dropzone (file drag drop) / React-Idle-Timer / zxcvbn.js (Password strength estimation)

https://github.com/vercel/serve (that one should run on every system since it's implemented in NodeJS)

No default language could be detected for this app. HINT: This occurs when Heroku cannot detect the buildpack to use for this application automatically. See https://devcenter.heroku.com/articles/buildpacks

Choose a buildpack explicitly https://devcenter.heroku.com/articles/buildpacks

Another alternative that comes to my mind it is to use the node.js buildpack and serve the static files using serve or similar.

Support for Buildpacks from Heroku

You use a buildpack.

Counting objects: 36, done.Delta compression using up to 4 threads.Compressing objects: 100% (33/33), done.Writing objects: 100% (36/36), 19.22 KiB | 0 bytes/s, done.Total 36 (delta 3), reused 0 (delta 0)remote: Compressing source files... done.remote: Building source:remote: remote: -----> Failed to detect set buildpack https://codon-buildpacks.s3.amazonaws.com/buildpacks/heroku/python.tgzremote: More info: https://devcenter.heroku.com/articles/buildpacks#detection-failureremote: remote: ! Push failedremote: Verifying deploy....remote: remote: ! Push rejected to dry-waters-63931.remote: To https://git.heroku.com/dry-waters-63931.git ! [remote rejected] master -> master (pre-receive hook declined)error: failed to push some refs to 'https://git.heroku.com/dry-waters-63931.git' My root directory:

Now that your app is registered to Heroku, we have to set up a buildpack.

-----> Building on the Heroku-20 stack -----> Using buildpack: https://github.com/heroku/heroku-buildpack-nodejs -----> Node.js app detected -----> Creating runtime environment NPM_CONFIG_LOGLEVEL=error NODE_VERBOSE=false NODE_ENV=production NODE_MODULES_CACHE=true -----> Installing binaries engines.node (package.json): unspecified engines.npm (package.json): unspecified (use default) Resolving node version 16.x... Downloading and installing node 16.14.0... Using default npm version: 8.3.1 -----> Installing dependencies Installing node modules npm ERR! code 1 npm ERR! path /tmp/build_1816a6d9/node_modules/argon2 npm ERR! command failed npm ERR! command sh -c node-gyp rebuild npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using [email protected] npm ERR! gyp info using [email protected] | linux | x64 npm ERR! gyp info find Python using Python version 3.8.10 found at "/usr/bin/python3" npm ERR! gyp http GET https://nodejs.org/download/release/v16.14.0/node-v16.14.0-headers.tar.gz npm ERR! gyp http 200 https://nodejs.org/download/release/v16.14.0/node-v16.14.0-headers.tar.gz npm ERR! gyp http GET https://nodejs.org/download/release/v16.14.0/SHASUMS256.txt npm ERR! gyp http 200 https://nodejs.org/download/release/v16.14.0/SHASUMS256.txt npm ERR! gyp info spawn /usr/bin/python3 npm ERR! gyp info spawn args [ npm ERR! gyp info spawn args '/tmp/build_1816a6d9/.heroku/node/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py', npm ERR! gyp info spawn args 'binding.gyp', npm ERR! gyp info spawn args '-f', npm ERR! gyp info spawn args 'make', npm ERR! gyp info spawn args '-I', npm ERR! gyp info spawn args '/tmp/build_1816a6d9/node_modules/argon2/build/config.gypi', npm ERR! gyp info spawn args '-I', npm ERR! gyp info spawn args '/tmp/build_1816a6d9/.heroku/node/lib/node_modules/npm/node_modules/node-gyp/addon.gypi', npm ERR! gyp info spawn args '-I', npm ERR! gyp info spawn args '/app/.cache/node-gyp/16.14.0/include/node/common.gypi', npm ERR! gyp info spawn args '-Dlibrary=shared_library', npm ERR! gyp info spawn args '-Dvisibility=default', npm ERR! gyp info spawn args '-Dnode_root_dir=/app/.cache/node-gyp/16.14.0', npm ERR! gyp info spawn args '-Dnode_gyp_dir=/tmp/build_1816a6d9/.heroku/node/lib/node_modules/npm/node_modules/node-gyp', npm ERR! gyp info spawn args '-Dnode_lib_file=/app/.cache/node-gyp/16.14.0/<(target_arch)/node.lib', npm ERR! gyp info spawn args '-Dmodule_root_dir=/tmp/build_1816a6d9/node_modules/argon2', npm ERR! gyp info spawn args '-Dnode_engine=v8', npm ERR! gyp info spawn args '--depth=.', npm ERR! gyp info spawn args '--no-parallel', npm ERR! gyp info spawn args '--generator-output', npm ERR! gyp info spawn args 'build', npm ERR! gyp info spawn args '-Goutput_dir=.' npm ERR! gyp info spawn args ] npm ERR! gyp: Undefined variable module_name in binding.gyp while trying to load binding.gyp npm ERR! gyp ERR! configure error npm ERR! gyp ERR! stack Error: `gyp` failed with exit code: 1 npm ERR! gyp ERR! stack at ChildProcess.onCpExit (/tmp/build_1816a6d9/.heroku/node/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:259:16) npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:520:28) npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12) npm ERR! gyp ERR! System Linux 4.4.0-1098-aws npm ERR! gyp ERR! command "/tmp/build_1816a6d9/.heroku/node/bin/node" "/tmp/build_1816a6d9/.heroku/node/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild" npm ERR! gyp ERR! cwd /tmp/build_1816a6d9/node_modules/argon2 npm ERR! gyp ERR! node -v v16.14.0 npm ERR! gyp ERR! node-gyp -v v8.4.1 npm ERR! gyp ERR! not ok npm ERR! A complete log of this run can be found in: npm ERR! /tmp/npmcache.9omWv/_logs/2022-02-12T13_14_33_973Z-debug-0.log -----> Build failed We're sorry this build is failing! You can troubleshoot common issues here: https://devcenter.heroku.com/articles/troubleshooting-node-deploys Some possible problems: - Node version not specified in package.json https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version Love, Heroku ! Push rejected, failed to compile Node.js app. ! Push failed

My first instinct was to (cry) manually set the appropriate buildpack for a node.js server as mentioned by Heroku's Dev Center. However, Heroku states that...

Dokku is a popular, open-source, and self-hosted platform as a service (PaaS) that allows users to easily deploy and manage their applications, very similar to your own self-hosted Heroku. Under the hood, Dokku is powered by Docker, uses Heroku buildpacks by default, and has a number of official and community plugins.