Deploying React app on Ubuntu 18.04: build failed because process exited too early - npm

I'm trying to deploy my React app on an Ubuntu 18.04 virtual machine provided by Digital Ocean. Here's my process: I have a git repo linked to the correct directory so all I need to do is a git pull followed by a 'npm run build'. Up until now, this has worked well enough and I could check the site on [my_domain]:8080, which is sufficient for now since I'm still in production.
However, when I tried to run 'npm run build' yesterday, I got this error:
I've looked it up a bit but there's so many different possibilities that it's just confusing me more. The most common issue seems to be a lack of memory on the system, but judging by the data I get when I start up the terminal, this can't be the case.
I have no clue how to proceed but I've also honestly just been starting to use DigitalOcean or Ubuntu for half a year and this is my first React app, so I would very much appreciate an explanation like I'm five ;)
Thanks so much!

The problem was apparently in the amount of RAM I had available. Solution: memory swapping. I followed this tutorial and after doing all this, the problem resolved itself.
https://www.digitalocean.com/community/tutorials/how-to-add-swap-space-on-ubuntu-18-04

You have two options to sort out the situation in your case.
1. Change the memory allocaction from node.
You can achieve this by doing so: run the command
node index.js --max-old-space-size=8000. This settings may not be persitent and you would wanna use a much more long term approach, which is of course the second option.
2. Change your swap space allocation.
Just like the article shared by #Jesse in the previous answer, you can follow that guide to change your swap space settings. it works like a charm.

Related

reSolve and React Native integration

Is there any working example available involving reSolve in React Native?
Suggestions of comparable solutions (running without any back-end connectivity in place) either in React Native or Flutter are also most appreciated.
GitHub contains an example in the reimagined/react-native-example repository but unfortunately it isn't working. It seems the current version is pretty outdated.
Referring to that repository, the command yarn create resolve-app -e shopping-list-advanced shopping-list-advanced results in the following error message.
Error: No such example, shopping-list-advanced. The following examples are available
So you are unable to download the sample code since it does not appear to exist.
So I tried downloading and inflating the ZIP manually. Afterwards I ran yarn install (which takes a while and reports quite a lot of warnings). Next, I used the command yarn start:native. This doesn't work either and results in the following error message.
ERROR: Node.js version 16.13.2 is no longer supported.expo-cli supports following Node.js versions: >=10.13.0 <11.0.0 (Active LTS) >=12.0.0 <13.0.0 (Active LTS) >=13.0.0 <14.0.0 (Current Release)
In an attempt to solve the problem, I updated the expo-cli version in the native\package.json file to 5.0.3. Running yarn install and yarn start:native again results in a new error message being thrown error.
Invalid regular expression:
/(ui[\]node_modules[\]react-native[\].|ui[\]node_modules[\]expo[\].|node_modules[\]react[\]dist[\].|website\node_modules\.|heapCapture\bundle.js|.\tests\.)$/:
Range out of order in character class.
This doesn't seem to go anywhere... In other words, I am a bit stuck here since I don't know what this message actually means.
Thank you for your feedback.
The team decided to extract the React Native example to a separate repository and postpone its maintenance to keep focused on more important tasks like polishing the server-side.
As you mentioned, the example is outdated, there are many changes in the client configuration since then. In the future, we may work on some guide on how to use reSolve in React Native and other frameworks.
In the meantime, you can try to add reSolve in your ReactNative app using our docs.
We provide several client libraries that can be helpful:
https://reimagined.github.io/resolve/docs/api/client/resolve-client/
https://reimagined.github.io/resolve/docs/api/client/resolve-react-hooks/
https://reimagined.github.io/resolve/docs/api/client/resolve-redux/
Feel free to contact us through Github in case of any difficulties, we'll be glad to help you.

How to create and share a VM environment for development

I am working on a college project along with a group of people. Our goal is to add features to an already existing application that runs on the web. Currently, I'm in the process of getting the source code to run on my machine. This consists of cloning a bunch of repos, installing MySQL and some (very old and outdated :-| ) versions of Python, and running some scripts. The process sounds straightforward but it isn't; there are a lot of dependancies that need to be met for the code to run, which means that I need to spend a lot of time looking at error logs trying to figure out what package is missing and needs to be installed or downgraded. But that's not the point of this question.
I'd like to make it easier for people to pick up the project in the future and work on it without having to spend hours just to get the code to compile. I'd like to get the project set up on a Linux VM (something I know how to do using VirtualBox) and then somehow share (?) that VM so that other people can simply set it up and be able to immediately have the code compiling (something that I don't know how to do, or if it is even possible).
Additionally, I'd like to be able to do all the coding on the host OS if possible, and only do the compiling/running on the VM (something I also don't know how to do). I would like some help/pointers with all the "I don't know" 's, as I don't know much about VM's other than how to set one up using VirtualBox.
You can use Vagrant to automate the provisioning of the VM, and setup all your tools and dependencies using Docker.
There are many good tutorials and sample vagrantfiles online to get you started. There is a learning curve involved, but well worth the effort. Many companies use Vagrant to quickly provision dev environments.
Vagrant can automatically download a specific distro/version of a VM from the web if one is not already locally installed. It can also provision a Docker container, in which you can install any required dependencies, tools, etc. You can store the vagrantfile, dockerfile, scripts, etc. in GitHub for easy access by your colleagues. All they would have to do is install Vagrant and run vagrant up from the command line.
If you want to write code on the host machine and compile/test it on the VM, you will need to setup a shared folder in the VM using Guest Additions (see here). Be VERY careful with line endings if you are working in Windows and running in Linux. You can setup the shared folder with Vagrant as well (see here).

How to troubleshoot React Native build error?

Below you can see the output I get when I try to run npx react-native run-android. It suggests some options to try in order to further pinpoint the problem, however they don't work with the aforementioned command so I assume that they are related to a gradle (just an educated guess).
I know ZERO about gradle; I have just seen the name here and there and in the output shown below. So please keep that in mind when you answer. If I need to learn how to run some gradle command(s) directly, please be as verbose as possible in your answer.
The project was working fine just a bit ago, but I wanted the ability to force portrait mode for certain screens but without configuring my entire app to always have to stick to portrait mode. So I found what looked to be a solution in the react-native-orientation-locker module. I installed it with yarn and then proceeded to update files as directed: https://www.npmjs.com/package/react-native-orientation-locker.
After updating the appropriate files, I got an error that suggested axios was the problem. I uninstalled and reinstalled axios. After that didn't work, I proceeded to undo all the file changes I had just made. Then I uninstalled the react-native-orientation-locker module.
To my knowledge, I have undone everything I did between the time the project worked and stopped working.
Sadly, I had not put this into source control yet (a mistake I won't make again), so I can't revert.
Where to go from here?
Problems like this are hard to pin point. What you can do is open the android project in android studio and see the logs as the project is being assembled. I assume you do not have much knowledge about android either so you might need some senior resource to help you.
What I usually do in this case is open android studio and if I am lucky enough, it tells me which file has an issue and I go to the file and do what android studio suggests me. Some times it fixes the problem and sometimes it doesn't.
Another thing I would like to mention is that the documentation of the package you are using is important to follow. I assume you did that already but I would suggest to review it narrowly and closely.
Another guess I can tell you is try to go to your-project/android/build.gradle and over there, you'll see something like this in the start. The package you are using mentions something about target SDK 27. I think you should check that out too. May be it helps
Lastly I would say always use source control while working with react native. It can easily blow up at any time so you should always have a safety net to fallback to :)

Install v4l2loopback in WSL2

I am currently struggling with v4l2loopback installation on WSL2.
Some context:
Recently, I have read about create a virtual video device in Linux and then mock its output from an image or video file.
This is quite important for testing or developing purposes, for example in order to attach a virtual webcam that reproduces a video file as a loop to the android emulator.
After some research I got to the conclusion I don't want to use desktop applications and it might be easy to run even in a CI or similar, therefore v4l2loopback looks nice, but I am currently a Windows user.
I enabled WSL2 on my machine, downloaded the repo, and tried to execute make command like in the repo description.
Building v4l2-loopback driver...
make -C /lib/modules/`uname -r`/build M=/home/angel/v4l2loopback modules
make[1]: *** /lib/modules/4.19.84-microsoft-standard/build: No such file or directory. Stop.
make: *** [Makefile:43: v4l2loopback.ko] Error 2
I googled a little bit and i found that issue on GitHub where a similar output (for another tool) is mentioned.
There, someone mentioned that WSL2 Kernel Config can be adjusted in order to add more modules ( maybe and hopefully one of them could make work v4l2-loopback 😂 or at least that I think).
I also googled in order to check out custom WSL builds but I am not really sure what I need to make it work or even if I am going in the right direction.
Is there something I 've missed in order to make v4l2loopback work?
In the case only a custom WSL2 build would work, how should I proceed?
Thanks in advance 🤘
I am not familiar with WSL...
-- Ah, it appears WSL doesn't have a linux kernel at all: see
https://unix.stackexchange.com/questions/594470/wsl-2-does-not-have-lib-modules .
So it's useless building the v4l2loopback mod; even if you'd be able to build it, there's nothing, no kernel, to load it!
Maybe an alternative for you might be running Virtualbox (it's free, and available for Windows) on your windows machine, and load a real Linux distro of your own choice in it. Then build the v4l2loop module, after installing the kernel development headers, and install the mod (after building, as root do insmod v4l2loop.ko) and play with it.
Thus, you are on your way. Far more elegant, and far easier. Also will have you make an enormous and important climb on the 'getting familiar with Linux' ladder, as well as maybe familiarize yourself with a virtual machine(?).
I'd definitely go for that.

jhipster hot deploy on client side using npm

I am using version 4.5.5 of jhipster.
My OS is Linux Mint.
I am using IntelliJ as my IDE.
Everything is working fine in terms of generating the code, building and running the code.
Client
Unfortunately, when I make changes to the client code (html or ts), the changes are not reflected until I recompile the client code completed. To achieve this I do "mvn -Pdev,webpack". It takes quite a while to restart the client and this is really holding me back.
Hot Deploy
What I expect to happen is that I can run "npm start" and when I save a change to a ts or a html file that it will be picked up and the change immediately visible in the browser.
Questions
Any ideas why the client hot deploy is not working ?
Any ideas how I identify where the issue is ?
For example, how do I know what folders are being watched by the hot deploy ?
Thanks a million for you help.
I am sure others have encountered the same issue and will read the answer gladly.
Kind regards,
Fergal.
PS Need any details, simply ask.
Figured it out.
Somebody else had a similar issue with a globally installed instance of webpack.
I installed a local version and the file updates are being detected and recompiled and the app hot deployed. Now working perfectly.
To install a local version webpack.js.org/guides/installation/#local-installation.