Google Cloud not Installing Packages Correctly - google-app-engine

I'm trying to deploy my app to Google Clouds App Engine. It works perfectly as a local instance, but as soon as I upload it to gcloud, it stops working as intended.
I'm creating a bot for discord. Through it, I access discord and youtubes API. Connecting to these seems to work, as the bot comes online after publishing. However, it seems that the music-playing functionality stops working when its running on gcloud. All other functions work as intended. Which is why I'm suspecting that something has gone wrong with some of the packages. Probably related to music or sound.
Question: Is there a way to verify that my node packages have been installed correctly through the cloud Console or cmd? Or better yet, re-install them.
I have looked at Deploy and run App Engine.
I publish using the cmd-tools and by running: gcloud app deploy
app.yaml:
runtime: nodejs
env: flex
manual_scaling:
instances: 1
package.json:
{
"name": "yup",
"version": "1.0.5",
"description": "bot",
"main": "app.js",
"private": true,
"engines": {
"node": ">=8.11.3"
},
"scripts": {
"start": "node app.js",
"deploy": "gcloud app deploy",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Joel",
"license": "ISC",
"dependencies": {
"#types/request": "^2.48.1",
"discord.js": "^11.4.2",
"express": "^4.16.4",
"ffmpeg-binaries": "^4.0.0",
"fs": "0.0.1-security",
"get-youtube-id": "^1.0.1",
"opusscript": "0.0.6",
"request": "^2.88.0",
"youtube-info": "^1.3.2",
"ytdl-core": "^0.29.1",
"ytdl-getinfo": "^1.1.0"
},
"devDependencies": {
"typescript": "^3.3.3333"
}
}
On further inspection, i can see this in the install-logs:
Step #1: npm WARN discord.js#11.4.2 requires a peer of bufferutil#^3.0.3 but none is installed. You must install peer dependencies yourself.
Step #1: npm WARN discord.js#11.4.2 requires a peer of erlpack#discordapp/erlpack but none is installed. You must install peer dependencies yourself.
Step #1: npm WARN discord.js#11.4.2 requires a peer of node-opus#^0.2.7 but none is installed. You must install peer dependencies yourself.
Step #1: npm WARN discord.js#11.4.2 requires a peer of sodium#^2.0.3 but none is installed. You must install peer dependencies yourself.
Step #1: npm WARN discord.js#11.4.2 requires a peer of libsodium-wrappers#^0.7.3 but none is installed. You must install peer dependencies yourself.
Step #1: npm WARN discord.js#11.4.2 requires a peer of uws#^9.14.0 but none is installed. You must install peer dependencies yourself.

To check if dependencies of App Engine app are installed correctly from the Google Cloud Console:
Inspect logs on the Stackdriver Logging > Logs (Logs Viewer) page.
Filter logs:
by resource, selecting from the drop down menu:
Cloud Build,
by text search, to search for package.json or specify
package, for example ffmpeg-binaries,
by date,
It is also possible to get App Engine builds log from Cloud Shell Environment:
Get ID of the build: $ cloud builds list
List complete build log: $ gcloud builds log [build-ID]
In the logs you should see: successfully installed [package name-version]
To reinstall dependencies, you need to deploy new version of your app. In case of the problem with already cached package, try --no-cache flag, mentioned in the documentation.

This was actually caused by multiple things:
If you find yourself in a similar situation where neither the compiler or runtime is complaining and it works in your dev-environment but not in production. Then I would highly recommend looking through any external dependencies.
Cause
FFMPEG-binaries did install from my package-json. BUT - it didn't work until I installed it globally using the -g flag.
Also, in this specific situation I had to verify the integrity of my overall FFMPEG installation, which for some reason, was not working.
You should be able to run ffmpeg in your console and get some basic information regarding usage. If that works, you should be good to go!
Now it works (FFMPEG was the cause)!
I also switched from App engine to VM instance as I could not find any way to install system dependencies on App Engine. Using a VM instance, I could manually install the packages through SSH.
Unrelated: it turns out that peer dependencies are optional.

Related

peer dependency issue in npm install

I am working on a personal site which uses create-react-app and noticed that after installing MUI, every time i npm install, i get peer dependency errors. I think it might have to do with different library versions i have, but im not really sure what the issue is. I think seeing my package might help someone else understand where the problem lies.
Screenshots of my errors in terminal and my package are here! Please help! :)
enter image description here
enter image description here
i've tried uninstalling mui (which it wont let me do because of other peer dependencies?), changing versions of react, deleting node modules and package lock files, but i keep getting the same 'unable to resolve dependency tree'
9:16
--force seems to work temporarily but it seems like its not the actual solution because i still cant install libraries 'naturally'
This is sometimes what I use when dealing with peer dependency problems.
install the version of the peer dependency I need locally to the package.json.
install this npm package: npm-force-resolutions
devDependencies: {
"npm-force-resolutions": "0.0.3" //I'm sure there is a more modern update by now!
}
Provide an additional item - "resolutions" - in the package.json pointing to that peer dependency.
package.json
{
"resolutions": {
"minimist": "1.2.5"
},
"dependencies": {
"minimist": "1.2.5",
}
}
And then add a script which runs after every time you install something new .
"scripts": {
"preinstallAfter": "node ./node_modules/npm-force-resolutions/index.js",
}
Then re-install
(Note: npm ci is better because it does not try to install minor variations of package files. It takes only what is explicitly declared in your package-lock.json file. That way its consistent if sharing on a repo between different operating systems. )
npm ci
Hope it helps

React.version stating older version than is in package.json

I am attempting to use the React devtools to produce a flamegraph profile of my app, but I was greeted with the message:
After checking my package.json version number, I saw it was set to "^16.4.1".
I performed an update to both the React and React-Dom versions: npm i --save react#16.5 && npm i --save react-dom#16.5, which updated both versions in the package json to "^16.5.2". I also cleared my node_modules and deleted the package.lock before doing an npm install once again.
However, when I run both my local instance of the app and push changes to my staging environment, it is outputting 16.14.0 as the version number that I have specified to log out in at the start of the App.jsx...
This is puzzling also as the logged out a version earlier than my package.json originally stated...
Is there somewhere that I am missing to update versions that could be causing this?
I have done a global search in my project for 16.14 to see if there is anything and it seems that some of my dependencies have mentioned this version, but I wouldn't think that it would be an issue?
package.lock
------------
"dependencies": {
...
"react": {
"version": "16.14.0",
...
},
...
"react-dom": {
"version": "16.14.0",
...
},
...
}
I don't understand what is going wrong here?

Showing error in yarn start command says This package doesn't seem to be present in your lockfile; try to make an install to update your resolutions

The error shown when yarn start command is given
Error details:
Internal Error: confusion#workspace:.: This package doesn't seem to be present in your lockfile; try to make an install to update your resolutions
at J.getCandidates (C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:2:276872)
at i.getCandidates (C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:2:266282)
at C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:2:286432 at C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:57:349928
at new Promise (<anonymous>)
at e.exports (C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:57:349910)
at o (C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:57:349611)
at C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:57:349684
at C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:57:349727
at new Promise (<anonymous>)
My package.json file is
{
"name": "confusion",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
}
}
I have tried adding
"scripts":{
"start":"react-scripts start"
}
But no change in the error.
Cross-posting from this question:
The problem in here seems to be an existing yarn.lock file inside of one of the workspaces. Deleting it solves the problem.
More info:
Example: 3 workspaces: 2 create-react-app (app, home) and one shared component: (components)
Inside the component folder a lingering yarn.lock file exists. Remove it.
Also check that:
All your workspaces have "private:true" in each of their package.json (same level as name, private, source).
Check that you have added your workspaces inside a "workspaces" key in the main package.json
When you're executing yarn workspaces myworkspace myworkspace matches the name of your workspace in its package.json. In my case, the name of the workspace inside the components folder is called #schon/components, so I need to address it as yarn worksapces #schon/components instead.
It means a certain package is not installed, and you need to install it.
Try running yarn install to install the required packages.
If this does not work, try deleting the node_modules folder and run yarn install again.
If it fails, delete both node_modules folder and yarn.lock file and run yarn install.
try to remove node_modules by installing this package globally
yarn add global rimraf
then remove the node
the -> rimraf node_moules
then remove the yarn.lock the install it by yarn

What exactly is the 'react-scripts start' command?

I've been working with a React project using create-react-app and I have two options to start the project:
First way:
npm run start with the definition at the package.json like this:
"start": "react-scripts start",
Second way:
npm start
What is the difference between these two commands? And, what is the purpose of the react-scripts start?
I tried to find the definition, but I just found a package with this name. I still don't know what is the use of this command?
create-react-app and react-scripts
react-scripts is a set of scripts from the create-react-app starter pack. create-react-app helps you kick off projects without configuring, so you do not have to setup your project by yourself.
react-scripts start sets up the development environment and starts a server, as well as hot module reloading. You can read here to see what everything it does for you.
with create-react-app you have following features out of the box.
React, JSX, ES6, and Flow syntax support.
Language extras beyond ES6 like the object spread operator.
Autoprefixed CSS, so you don’t need -webkit- or other prefixes.
A fast interactive unit test runner with built-in support for coverage reporting.
A live development server that warns about common mistakes.
A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.
An offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria.
Hassle-free updates for the above tools with a single dependency.
npm scripts
npm start is a shortcut for npm run start.
npm run is used to run scripts that you define in the scripts object of your package.json
if there is no start key in the scripts object, it will default to node server.js
Sometimes you want to do more than the react scripts gives you, in this case you can do react-scripts eject. This will transform your project from a "managed" state into a not managed state, where you have full control over dependencies, build scripts and other configurations.
As Sagiv b.g. pointed out, the npm start command is a shortcut for npm run start. I just wanted to add a real-life example to clarify it a bit more.
The setup below comes from the create-react-app github repo. The package.json defines a bunch of scripts which define the actual flow.
"scripts": {
"start": "npm-run-all -p watch-css start-js",
"build": "npm run build-css && react-scripts build",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"start-js": "react-scripts start"
},
For clarity, I added a diagram.
The blue boxes are references to scripts, all of which you could executed directly with an npm run <script-name> command. But as you can see, actually there are only 2 practical flows:
npm run start
npm run build
The grey boxes are commands which can be executed from the command line.
So, for instance, if you run npm start (or npm run start) that actually translate to the npm-run-all -p watch-css start-js command, which is executed from the commandline.
In my case, I have this special npm-run-all command, which is a popular plugin that searches for scripts that start with "build:", and executes all of those. I actually don't have any that match that pattern. But it can also be used to run multiple commands in parallel, which it does here, using the -p <command1> <command2> switch. So, here it executes 2 scripts, i.e. watch-css and start-js. (Those last mentioned scripts are watchers which monitor file changes, and will only finish when killed.)
The watch-css makes sure that the *.scss files are translated to *.cssfiles, and looks for future updates.
The start-js points to the react-scripts start which hosts the website in a development mode.
In conclusion, the npm start command is configurable. If you want to know what it does, then you have to check the package.json file. (and you may want to make a little diagram when things get complicated).
succinctly - it runs this
node node_modules/react-scripts/bin/react-scripts.js start
"start" is a name of a script, in npm you run scripts like this npm run scriptName, npm start is also a short for npm run start
As for "react-scripts" this is a script related specifically to create-react-app
npm start is the short form for npm run start
You can check about it here Difference between npm start and npm run start
react-scripts start
react-scripts is a set of scripts to support the creation, development and testing of react applications. It is used by create-react-app.
create-react-app is the officially supported way to create single-page React applications. create react app uses webpack to parse and bundle the application.
webpack parses the application and creates a dependency graph from its entry point specified in the webpack config file. while parsing, webpack uses babel to transpile the application to JavaScript, which has better support across browsers.
Webpack uses the generated dependency graph to create a single JavaScript file consisting of the application source code and modules used by the app, injects the file via script tag into public/index.html, and starts a development server on http://localhost:3000. Navigating to this URL in the browser will show a live, interactive instance of your application. Any changes saved to the source code will reflect in the running app instance automatically.
You can read more about this topic more on here

React tutorial - how do I start the node server for a reactJs application?

I'm just starting the react.js tutorial, I've downloaded the files and then it mentions:
"Follow your progress by opening http://localhost:3000 in your browser (after starting the server). "
I know this may sound stupid, (bear with me since I'm a beginner with React) but how do I start the server in this instance?
Thanks.
Marc
Pretty solid chance it's npm start from the project root.
Properly packaged modules will have some node scripts configured in package.json. It's customary to use start as the script to run the dev environment, though some might use build, dev, or other names.
Here's official installation process: link, and officially recommended tutorials
# install react cli
npm install -g create-react-app
# create app
create-react-app my-react-app-name
# go to project folder
cd my-react-app-name
# install dependencies
npm install
# start live server
npm start
output:
$ You can now view my-react-app-name in the browser.
$ Local: http://localhost:3000/
$ On Your Network: http://192.168.0.105:3000/
$ Note that the development build is not optimized.
$ To create a production build, use npm build.
You can run any one of the below mentioned commands to start the node server for your ReactJS application:
npm run-script start
npm run start
npm start
All the above commands are equivalent but people prefer the third one as it is the shortest to type on keyboard.
The start parameter in these commands maps to the start key present under scripts configuration present in package.json file of any ReactJS application. Here is a sample package.json file of my hello-world application:
{
"name": "hello-world",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"devDependencies": {
"react-scripts": "0.9.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
You can see that react-scripts start is written in front of start key. So react-scripts start command will get fired when we run any of the three commands which I had enlisted in the beginning e.g. npm start.
I used Node to run the server. The steps I followed are:
I downloaded the zip package from the Running a server section
here
I had the link open: http://localhost:3000/
I opened up Node.js Command Prompt and navigated to the downloaded
zip project. From Node example here:
Just type the commands in the example:
First npm install and then
node server.js.
See the screen shot below:
When I refresh the localhost web page I see the following:
Sounds like you're following the official React tutorial, in which case the instructions to start the various included server implementations are here.

Resources