serve React build locally - reactjs

I am currently learning React, to eventually pair with Ruby on Rails.
I am following the tutorial:
https://www.youtube.com/watch?v=w7ejDZ8SWv8
to get a handle on the language.
I have successfully compiled the build folder, running the command $ npm run build
I have also run the command $ sudo npm i -g serve in my terminal to install the npm serve
when running the build on localhost:8000, using the command $ serve - s -p 8000 in the terminal, it is serving using WEBrick::HTTPServer, throwing the following up in the terminal:
[2022-09-12 15:03:22] INFO WEBrick 1.7.0
[2022-09-12 15:03:22] INFO ruby 3.0.0 (2020-12-25) [x86_64-darwin19]
[2022-09-12 15:03:22] INFO WEBrick::HTTPServer#start: pid=5412 port=8000
which results in localhost:8000 showing:
My question:
Is there a way of altering this so I can serve my react build successfully, without causing issues when I go back to serving my RoR applications later?

Related

Running react-snap on AWS codebuild

I have a react website that I host on AWS. I have created code pipeline in AWS that connects to my github, which automatically builds the projects using codeBuild and deploys it to S3.
I'm trying to add react-snap to the project. It works well locally but when I try to build it in codebuild I get this error
Error: Failed to launch chrome!
/codebuild/output/src159566889/src/node_modules/puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: error while loading shared libraries: libXss.so.1: cannot open shared object file: No such file or directory
TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md
at onClose (/codebuild/output/src159566889/src/node_modules/puppeteer/lib/Launcher.js:348:14)
at Interface.<anonymous> (/codebuild/output/src159566889/src/node_modules/puppeteer/lib/Launcher.js:337:50)
at Interface.emit (events.js:326:22)
at Interface.close (readline.js:416:8)
at Socket.onend (readline.js:194:10)
at Socket.emit (events.js:326:22)
at endReadableNT (_stream_readable.js:1241:12)
at processTicksAndRejections (internal/process/task_queues.js:84:21)
error Command failed with exit code 1.
I have tried to google it but I didn't find anything specific to codebuild and react-snap. I have found similar questions in regards to running chrome on codebuild but they related to different environments like angular and so I wasn't able to copy their solutions.
This is what my current buildspec.yaml file looks like
version: 0.2
env:
variables:
S3_BUCKET: "xyz"
STAGE: "beta"
phases:
install:
commands:
- yarn install
build:
commands:
- echo "Building for $STAGE"
- yarn build
- sam package --template-file cloudformation/Root.json --s3-bucket ${S3_BUCKET} --s3-prefix WebsiteCF/${CODEBUILD_RESOLVED_SOURCE_VERSION} --output-template-file build/packaged-template.yaml
artifacts:
files:
- '**/*'
base-directory: 'build'
Based on the instruction on the link provided by the error, I tried adding this but it didn't work
install:
commands:
- PYTHON=python2 amazon-linux-extras install epel -y
- yum install -y chromium
- yarn install
I managed to get it working using these steps:
Make sure your AWS code builder is using aws/codebuild/standard:5.0
Go t AWS code builder -> Edit -> Environment -> Override image
Create a addArgs.sh file to your project with this content
# modifies react-snap defaultOptions to add the --no-sandbox and --disable-setuid-sandbox flags so that puppeteer/chromium can run in the codebuild standard image
sed -i "s/puppeteerArgs: \[\],/puppeteerArgs: \[\"--no-sandbox\", \"--disable-setuid-sandbox\"\],/" ./node_modules/react-snap/index.js
echo changed arguments in react-snap
To your buildspec.yml file, add these lines to the install stage
# Install chrome headless
- apt-get -y update
- apt-get --assume-yes install chromium-browser
- sh ./addArgs.sh # run custom script to change options on react-snap to make it work
I found the answer from here - https://github.com/stereobooster/react-snap/issues/122

Cloud Build fails to build App Engine Python 3.8 app (due to pip bug?)

I have a number of Python 3.7 apps on Google App Engine standard, all building and deploying fine. I'm trying to upgrade some of them to the new Python 3.8 runtime, but when I try to deploy, they fail in Cloud Build.
It looks like they're hitting this open pip bug (more background). Odd that only the Python 3.8 runtime triggers this bug, though, and 3.7 builds fine.
Full log below. (Note that it's happening in Cloud Build, not my local machine, so I can't upgrade pip or otherwise change any of the commands or environment.) Anyone know how I can fix or work around this?
File upload done.
Updating service [default]...failed.
ERROR: (gcloud.beta.app.deploy) Error Response: [9] Cloud build 83e346a0-7e88-43dd-b89c-a4820526e4a1 status: FAILURE
Error ID: f8df99ad
Error type: INTERNAL
Error message: ... (setup.py): started
Building wheel for webapp2 (setup.py): finished with status 'done'
Created wheel for webapp2: filename=webapp2-3.0.0b1-py3-none-any.whl size=68362 sha256=9dd9f3ab6a55404492a88eb9a6bacb00faa37efafbc41f21a24d21cfba0eaea3
Stored in directory: /layers/google.python.pip/pipcache/wheels/55/e9/4d/76b030f418cac0bef4a3dcc15ca95c9671f1e826731ce2bc0f
Building wheel for tlslite-ng (setup.py): started
Building wheel for tlslite-ng (setup.py): finished with status 'done'
Created wheel for tlslite-ng: filename=tlslite_ng-0.7.5-py3-none-any.whl size=199869 sha256=b9ead00f0832041fba1e9d3883e57847995c2d6f83ecb7ea87d09cf82c730e8b
Stored in directory: /layers/google.python.pip/pipcache/wheels/a6/e1/a6/09610854c3405202d0b71d8f869811781e40cd26ffb85eacf8
Successfully built gdata humanize mf2py mf2util python-tumblpy ujson webapp2 tlslite-ng
Installing collected packages: six, ecdsa, tlslite-ng, lxml, gdata, certifi, urllib3, chardet, idna, requests, setuptools, protobuf, googleapis-common-protos, pyasn1, pyasn1-modules, rsa, cachetools, google-auth, pytz, grpcio, google-api-core, google-cloud-core, google-cloud-logging, gunicorn, pbr, extras, linecache2, traceback2, python-mimeparse, argparse, unittest2, testtools, fixtures, mox3, soupsieve, beautifulsoup4, gdata-python3, redis, google-cloud-datastore, google-cloud-ndb, humanize, MarkupSafe, jinja2, webencodings, html5lib, mf2py, mf2util, oauthlib, prawcore, websocket-client, update-checker, praw, requests-oauthlib, python-tumblpy, tweepy, ujson, webob, webapp2, oauth-dropins
Running setup.py develop for oauth-dropins
ERROR: Command errored out with exit status 1:
command: /opt/python3.8/bin/python3 -c 'import sys, setuptools, tokenize; sys.argv[0] = '"'"'/workspace/setup.py'"'"'; __file__='"'"'/workspace/setup.py'"'"';f=getattr(tokenize, '"'"'open'"'"', open)(__file__);code=f.read().replace('"'"'\r\n'"'"', '"'"'\n'"'"');f.close();exec(compile(code, __file__, '"'"'exec'"'"'))' develop --no-deps --home /tmp/pip-target-zp53suvg
cwd: /workspace/
Complete output (6 lines):
usage: setup.py [global_opts] cmd1 [cmd1_opts] [cmd2 [cmd2_opts] ...]
or: setup.py --help [cmd1 cmd2 ...]
or: setup.py --help-commands
or: setup.py cmd --help
error: option --home not recognized
----------------------------------------
ERROR: Command errored out with exit status 1: /opt/python3.8/bin/python3 -c 'import sys, setuptools, tokenize; sys.argv[0] = '"'"'/workspace/setup.py'"'"'; __file__='"'"'/workspace/setup.py'"'"';f=getattr(tokenize, '"'"'open'"'"', open)(__file__);code=f.read().replace('"'"'\r\n'"'"', '"'"'\n'"'"');f.close();exec(compile(code, __file__, '"'"'exec'"'"'))' develop --no-deps --home /tmp/pip-target-zp53suvg Check the logs for full command output.
WARNING: You are using pip version 20.1.1; however, version 20.2.2 is available.
You should consider upgrading via the '/opt/python3.8/bin/python3 -m pip install --upgrade pip' command.
Full build logs: https://console.cloud.google.com/cloud-build/builds/83e346a0-7e88-43dd-b89c-a4820526e4a1?project=216076569502
Here's my requirements.txt file. I suspect the -e . might be the problem...but it works with Python 3.7, so if so, that's disappointing.
git+https://github.com/dvska/gdata-python3.git#egg=gdata
google-cloud-logging~=1.14
gunicorn~=20.0
mox3~=0.28
# this includes everything in setup.py's install_requires.
# https://caremad.io/posts/2013/07/setup-vs-requirement/#developing-reusable-things-or-how-not-to-repeat-yourself
-e .
I checked pypi page of oauth-dropins (at which it is failing) and they're mentioning there exactly this issue being caused by -e

Failure in build using Travis, AWS Elasticbeanstalk and Docker

I am facing an issue while building my React project using GitHub as a repository, Travis as CI with AWS ElasticBeanStalk as a service to run my app using Docker. I am able to run my test suite but after that, it is not deploying my app on AWS and also not getting any error in Travis console except below:
Below is my Travis .yml file configuration:
language: generic
services:
- docker
before_install:
- docker build -t heet1996/my-profile -f Dockerfile.dev .
script:
- docker run heet1996/my-profile npm run test -- --coverage
deploy:
provider: elasticbeanstalk
region: "us-east-1"
app: "My-profile"
env: "MyProfile-env"
bucket_name: "elasticbeanstalk-us-east-1-413920612934"
bucket_path: "My-profile"
on:
branch: master
access_key_id: $AWS_ACCESS_KEY
secret_access_key: "$AWS_SECRET_KEY"
Let me know if you need more information
A couple things you could try:
Your script command needs to set the environment var CI=true
So
script:
- docker run heet1996/my-profile npm run test -- --coverage
Becomes
script:
- docker run -e CI=true heet1996/my-profile npm run test -- --coverage
Also AWS needs the access variables to be named differently.
Change
access_key_id: $AWS_ACCESS_KEY
secret_access_key: "$AWS_SECRET_KEY"
To
access_key_id: "$AWS_ACCESS_KEY_ID"
secret_access_key: "$AWS_SECRET_ACCESS_KEY"
Using the option --coverage, your test will hang, waiting for input. Hence the message: "...no output has been received in the last 10m0s...".
At a certain point, --coverage was probably able to stop tests (as some used for that purpose), but I guess it was not meant for that and subsequent versions of docker removed that behavior.
Your test must conclude and the conclusion be a success for the deployment by Travis to begin.
Use instead the option --watchAll=false. So you should have:
...
script:
- docker run heet1996/my-profile npm run test -- --watchAll=false
...
That would take care of the obvious issue of your test never concluding (that could be the only issue). Afterward, make sure that your tests are successful. Then, you can worry about other issues such as authentication on AWS, etc...

Fail to deploy node on Elastic Beanstalk : The command '/bin/sh -c npm install' returned a non-zero code: 1

I am using elastic beanstalk from AWS to deploy and host a react application using Docker.
The deployment fails mysteriously, even though I succeed building the Docker image on my local machine.
An inspection to the logs on the EC2 instance (using eb ssh) does not provide more explanation that this:
--------------------------------
/var/log/eb-commandprocessor.log
--------------------------------
Step 5/14 : COPY package.json /usr/src/app/package.json
---> Using cache
---> f06f2c9d6519
Step 6/14 : RUN npm install
---> Running in 9926fc11431f
The command '/bin/sh -c npm install' returned a non-zero code: 1
Failed to build Docker image aws_beanstalk/staging-app: 2c9d6519
I even tried to run the npm install command inside the last layer of the built container using
sudo docker commit 9926fc11431f test && docker run -it test bash
cd /path/to/wordir
npm install
But the return code is actually 0
Is there any other way this could fail and logs return me wrong errors ?
I'm writing this answer for any future people which come by this. If there is no NPM error message. The issue is memory exhaustion there are two ways to resolve this on Beanstalk specifically:
Use a machine with more memory (instead of say a t2.micro)
(recommended) Switch to yarn. Yarn uses much less memory than npm.
Figure out some other way to reduce your memory footprint
This issue gave me a lot of headache so I hope this helps future folks who come across this issue.

heroku - could not find a javascript runtime

I am getting the following error message in the heroku logs when trying to access the application from the browser:
Gem Load Error is: Could not find a
JavaScript runtime. See https://github.com/rails/execjs for a list of available runtimes.
This is being triggered by a couple of gems - ngannotate-rails and coffee-rails.
This is a rails 4.2 application with a angular.js frontend, being deployed to heroku for the first time.
Heroku stack:
$ heroku stack
=== my_app Available Stacks
heroku-16
* cedar-14
Buildpacks:
$ heroku buildpacks
=== my_app Buildpack URLs
1. https://github.com/prakashmurthy/heroku-buildpack-nodejs
2. heroku/ruby
Both the node.js build and ruby build complete successfully.
PATH seems to be set correctly:
$ heroku run bash
Running bash on ⬢ my_app... up, run.1502 (Free)
~ $ echo $PATH
/app/bin:/app/vendor/bundle/bin:/app/vendor/bundle/ruby/2.3.0/bin:/usr/local/bin:/usr/bin:/bin
Appreciate any help in figuring out this issue.

Resources