I am trying to deploy my angular universal app to AWS Elastic beanstalk. I created a code pipeline on AWS where build output is sent to elastic beanstalk. Now elastic beanstalk needs an app.js or server.js or procfile file or package.json to run application but my build folder is like below
--dist/
--Appname/
--browser/
--server/
-- //here I am expecting package.json file
My Problem:
I am trying to build angular universal but I want to include package.json at root level of dist. folder. I tried multiple approaches but the package.json is going to browser folder of build.
Below is what I tried:
Angular.json
"assets": [
"src/favicon.ico",
"src/assets",
{ "glob": "package.json", "input": "./", "output": "/" }
],
I also tried solution on this link
Also below is my buildspec file on AWS
version: 0.2
env:
variables:
CACHE_CONTROL: "86400"
S3_BUCKET: "arn:aws:s3:::devemr.growthemr.com"
BUILD_FOLDER: "dist"
phases:
install:
runtime-versions:
nodejs: 10
commands:
- echo Installing source NPM dependencies...
- npm install
- npm install -g #angular/cli#next
build:
commands:
- echo Build started
- npm run build:ssr
post_build:
commands:
- bash -c "if [ /"$CODEBUILD_BUILD_SUCCEEDING/" == /"0/" ]; then exit 1; fi"
- aws s3 rm s3://devemr.growthemr.com --recursive
- echo S3 bucket is cleared.
artifacts:
files:
- '**/*'
base-directory: 'dist'
Any solution will be much appreciated. Thanks in advance
I see you are trying to run main js file which is generated after build in case of ssr. To run that you need a script or Procfile as per aws documentation. To do this I added Procfile to my s3 bucket and then run the build command
buildspec file
build:
commands:
- echo Build started
- npm run build:ssr
post_build:
commands:
- aws s3 cp s3://yourbucketname/Procfile ./dist
- bash -c "if [ /"$CODEBUILD_BUILD_SUCCEEDING/" == /"0/" ]; then exit 1; fi"
# - aws s3 rm s3://devemr.growthemr.com --recursive
- echo S3 bucket is cleared.
# - aws cloudfront create-invalidation --distribution-id=E26GLI30EJTNBB --paths '/*'
artifacts:
files:
- '**/*'
base-directory: 'dist'
Also, don't forget to add the permission in your s3 bucket like below
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:*",
"Resource": [
"arn:aws:s3:::bucketname",
"arn:aws:s3:::bucketname/*"
]
}
]
}
I know this topic has been created before, but nothing I tried could fix it. The problem is precisely the following. I have a react script on an AWS ec2 server, that I want to execute automatically, whenever the instance is starting. For this purpose, the following script is executed at the start of the AWS server:
#!/usr/bin/python3
import time
import shlex, subprocess
args = shlex.split('sudo su ubuntu -c "/usr/bin/npm start --prefix /home/ubuntu/my-app > /home/ubuntu/output.txt 2>&1"')
subprocess.Popen(args)
When I run the script manually, everything works just fine. But whenever it is run during the server start, I get the following log:
> my-app#0.1.0 start /home/ubuntu/my-app
> react-scripts start
^[[34mℹ^[[39m ^[[90m｢wds｣^[[39m: Project is running at http://172.31.14.57/
^[[34mℹ^[[39m ^[[90m｢wds｣^[[39m: webpack output is served from
^[[34mℹ^[[39m ^[[90m｢wds｣^[[39m: Content not from webpack is served from /home/ubuntu/my-app/public
^[[34mℹ^[[39m ^[[90m｢wds｣^[[39m: 404s will fallback to /
Starting the development server...
That's all - nothing happens. Does anybody have an idea how to fix this? I thought it had something to do with the fact, that it is started from root. So I tried to fix that by using sudo su ubuntu -c, but it doesn't help either.
My guess is that it's the same problem as this issue. When you call npm start by default it calls the start script in package.json which points to :
"start": "react-scripts start",
There was a change in react-scripts that checks for non interactive shell when CI variable is not set here
But when you start it using sudo su ubuntu -c, it starts a non interactive shell.
What could work is setting CI variable to true like this :
export CI=true
sudo su ubuntu -c "/usr/bin/npm start ....."
You can also create a new script inside package.json :
"scripts": {
"start": "react-scripts start",
"ec2-dev": "CI=true;export CI; react-scripts start",
.....
}
and run :
/usr/bin/npm run ec2-dev
instead of npm start
Starting a development server is only useful if you mount the src folder to a local directory via nfs or other file sharing mechanism in order to use the nodemon capability of react-script to instantly restart your server for live changes during development.
If it's for other purposes. You need to build the app using :
npm run build
Provision the build directory artifacts and serve it using a web server
I have a full-stack app that runs great on LocalHost, but once it gets deployed to the web (either Heroku or netlify), the app stops working properly. My question is what are the necessary changes I need to make in order for the backend to work properly and continue working with the API in order to update the frontend, etc. I've already tried changing the port on express:
const PORT = process.env.PORT || 5000;
app.listen(PORT, "0.0.0.0", err => {
if (err) {
console.error(err)
} else {
console.log(`Running on port ${PORT}`)
}
})
Do I need to add my own .env file for the port, or does heroku do it automatically? Thanks in advance!
if you are going to use netlify you can only host static files which means if you are going to do that you might need to seperate your backend from your frontend code wise
host the backend in heroku
and your frontend on netlify
also you need a procfile to tell heroku what to do with your app if you are going to build react with your backend in the same server hope this help people who are wondering about netlify/heroku deployment
If you are going to be using heroku and assuming you have already setup your heroku account and already have heroku terminal installed and connected (if you are having troubles there let me know)
Then you need the following:
Procfile - this file tells heroku what script to use to run your server. Make sure you name it Procfile and no extensions.
It can include something like the following code
web: yarn heroku-start - Note here I am using yarn as my pacakge manager, you can easily replace it with npm if that's what you are using. I am also calling heroku-start which is a script defined in my package.json
Here is a sample of pacakge.json (I only included important lines)
{
...
"scripts": {
"dev": "nodemon -w src --exec \"babel-node src --presets env,stage-0\"",
"build": "babel src -s -D -d dist --presets env,stage-0",
"start": "pm2 start dist",
"prestart": "yarn -s build",
"heroku-prestart": "yarn global add pm2 && pm2 install pm2-logrotate",
"heroku-start": "node dist",
"heroku": "yarn -s build && git add . && git commit -m \"Rebuilt dist folder\" && git push heroku mj/bug/memory-leak:master",
"lint": "eslint src",
"heroku-postbuild": "echo Skip build on Heroku"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.0.3",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-0": "^6.24.1",
"eslint": "^4.13.0"
},
"eslintConfig": {
"parserOptions": {
"ecmaVersion": 9,
"sourceType": "module"
},
"env": {
"node": true
},
"rules": {
"no-console": 0,
"no-unused-vars": [
"warn",
{
"argsIgnorePattern": "^_"
}
]
}
},
"heroku-run-build-script": true
}
I am using babel to build my project. Please don't get overwhelmed with the amount of scripts I have, some are useless. You should pay attention however to this line "heroku-start": "node dist" under scripts - this is my script to run my application on heroku. yours can say something like node index.js I am using dist because babel is building my application to make it available with older ecma versions while allowing me to use new ecma version, the script build is what generates my dist folder.
I have also included my devDependences just in case you are interested.
You also need app.json - this file basically describes your application for heroku.
Here is a sample
{
"name":"myApp",
"description":"my cool app",
"repository":"https://github.com/mycoolapp/",
"logo":"http://node-js-sample.herokuapp.com/node.svg",
"keywords":["node","express","anothertag"],
"image":"heroku/nodejs"
}
After this is done you can upload your project to heroku and it should run fine. You can setup a hook between heroku and your master branch on github so you have automatic deployment when you push to maser or merge to it.
NEXT:
I have noticed something off in your code, I wouldn't recommend using 0.0.0.0 on heroku, here is some explanation as to why https://help.heroku.com/P1AVPANS/why-is-my-node-js-app-crashing-with-an-r10-error
here is your new code
const PORT = process.env.PORT || 5000;
app.listen(PORT, function(err) {
if (err) {
console.error(err)
} else {
console.log(`Running on port ${PORT}`)
}
}
Also don't use arrow functions as some browsers and heroku may not build it correctly (thats why I use babel).
Finally, this is a good tutorial on creating nodejs apps on heroku.
https://appdividend.com/2018/04/14/how-to-deploy-nodejs-app-to-heroku/
Good luck.
When I run ./gradlew assembleRelease build is failed with this error:
Error:Execution failed for task ':app:bundleReleaseJsAndAssets.
> A problem occurred starting process 'command 'node'
I searched on the internet and found some topics about it, but I couldn't solve my problem.
React-Native version: 0.54.0
EDIT:
Now I'm running ./gradlew assembleRelease --info from the terminal instead of Android Studio and I get different error. Here is the result:
> Task :app:processReleaseResources
Putting task artifact state for task ':app:processReleaseResources' into context took 0.007 secs.
file or directory '**/android/app/libs', not found
file or directory '**/node_modules/appcenter-crashes/android/libs', not found
file or directory '**/node_modules/appcenter-analytics/android/libs', not found
file or directory '**/node_modules/appcenter/android/libs', not found
file or directory '**/node_modules/react-native-interactable/lib/android/libs', not found
file or directory '**/node_modules/react-native-navigation/android/app/libs', not found
file or directory '**/android/app/libs', not found
file or directory '**/node_modules/appcenter-crashes/android/libs', not found
file or directory '**/appcenter-analytics/android/libs', not found
file or directory '**/node_modules/appcenter/android/libs', not found
file or directory '**/node_modules/react-native-interactable/lib/android/libs', not found
file or directory '**/node_modules/react-native-navigation/android/app/libs', not found
Executing task ':app:processReleaseResources' (up-to-date check took 0.035 secs) due to:
Task has failed previously.
All input files are considered out-of-date for incremental task ':app:processReleaseResources'.
Unable do incremental execution: full task run
file or directory '**/android/app/libs', not found
file or directory '**/node_modules/appcenter-crashes/android/libs', not found
file or directory '**/node_modules/appcenter-analytics/android/libs', not found
file or directory '**/node_modules/appcenter/android/libs', not found
file or directory '**/node_modules/react-native-interactable/lib/android/libs', not found
file or directory '**/node_modules/react-native-navigation/android/app/libs', not found
file or directory '**/android/app/libs', not found
file or directory '**/node_modules/appcenter-crashes/android/libs', not found
file or directory '**/node_modules/appcenter-analytics/android/libs', not found
file or directory '**/node_modules/appcenter/android/libs', not found
file or directory '**/node_modules/react-native-interactable/lib/android/libs', not found
file or directory '**/node_modules/react-native-navigation/android/app/libs', not found
Aapt2QueuedResourceProcessor is using **/Android/sdk/build-tools/26.0.2/aapt2
Failed to execute aapt
com.android.ide.common.process.ProcessException: Failed to execute aapt
*
*
*
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:processReleaseResources'.
> Failed to execute aapt
It seems gradle is looking for libs folder in all modules, but there are no libs folders in the node modules. It's true, but I don't know why gradle is looking for libs folder.
First:
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
finally build:
./gradlew assembleRelease -x bundleReleaseJsAndAssets
Looks like you haven't made a js bundle so please make a bundle first by using command :-
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
then in your project directory
cd android
Clean your gradle
./gradlew clean
and make a build finally
./gradlew assembleDebug
Try this.
Hope it will helps you.
For me the creating the bundle failed, but I noticed this comment by Sahin Elidemir:
just ./gradlew assembleRelease -x bundleReleaseJsAndAssets saved me.
It almost worked for me. What worked at the end was (notice the app:, which for me it fails without, and a clean for good measure):
./gradlew clean app:assembleRelease -x bundleReleaseJsAndAssets
Just using ./gradlew --stop and then ./gradlew assembleRelease worked for me.
I had the same problem, the solution was :
cd to yourApp/android folder
run this
./gradlew --stop
and then
./gradlew assembleRelease
This gonna build your app.
After build is done, go to see your application(apk).
android\app\build\outputs\apk\release
This is working for me, Please follow the below steps:-
1) Stop Running Gradle
$ cd RectNatoveProjectName & cd android (Open your project and go to android folder)
$ ./gradlew --stop (Run this command to stop old running Gradle service )
2) Update the android app build gradle
project.ext.react = [
nodeExecutableAndArgs : ["/usr/local/bin/node"]
];
3) Get Node details
$ which node
> (Result will be like "/usr/username/.nvm/versions/node/v10.7.0/bin/node")
4) Link node (very imp step copy the above result in step 3)
- ln -s /usr/username/.nvm/versions/node/v10.7.0/bin/node /usr/local/bin/node
5) If Step - 4 return file exist
- then to go the folder /usr/local/bin/ and delete the "node" file and perform the step -4 again.
6) If Step - 4 run successfully then this node issue will be resolved.
I now this is late. may be this will help somebody.
For me it i had to upgrade to latest react-native-sentry.
apply from: "../../node_modules/react-native-sentry/sentry.gradle"
was causing problem
The steps above really helped.
Here's the scripts that work for us with react-native 0.55.3.
Run the android-build command locally or CI to generate an APK.
/packages.json (react-native):
"android-bundle": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res",
"android-release-fix": "node ./android-release-gradle-fix.js",
"android-build": "yarn killbin && yarn android-clean && yarn android-release-fix && yarn android-bundle && cd android && ./gradlew assembleRelease -x bundleReleaseJsAndAssets --info",
"android-clean": "cd android && ./gradlew clean",
"killbin": "rm -rf ./node_modules/.bin",
android-release-gradle-fix.js:
const fs = require('fs')
// Fix issues with Android resources like duplicate files
// CI: run install with --unsafe-perm option
// https://stackoverflow.com/questions/47084810/react-native-android-duplicate-file-error-when-generating-apk
try {
var curDir = __dirname
var rootDir = process.cwd()
var file = `${rootDir}/node_modules/react-native/react.gradle`
var dataFix = fs.readFileSync(`${curDir}/android-react-gradle-fix`, 'utf8')
var data = fs.readFileSync(file, 'utf8')
var doLast = "doLast \{"
if (data.indexOf(doLast) !== -1) {
throw "Already fixed."
}
var result = data.replace(/ \/\/ Set up inputs and outputs so gradle can cache the result/g, dataFix);
fs.writeFileSync(file, result, 'utf8')
console.log('Done')
} catch (error) {
console.error(error)
}
android-react-gradle-fix
doLast {
def moveFunc = { resSuffix ->
File originalDir = file("${resourcesDir}/drawable-${resSuffix}")
if (originalDir.exists()) {
File destDir = file("${resourcesDir}/drawable-${resSuffix}-v4")
ant.move(file: originalDir, tofile: destDir)
}
}
moveFunc.curry("ldpi").call()
moveFunc.curry("mdpi").call()
moveFunc.curry("hdpi").call()
moveFunc.curry("xhdpi").call()
moveFunc.curry("xxhdpi").call()
moveFunc.curry("xxxhdpi").call()
}
// Set up inputs and outputs so gradle can cache the result
/android/build.gradle:
buildscript {
ext {
buildToolsVersion = "27.0.3"
minSdkVersion = 21
compileSdkVersion = 27
targetSdkVersion = 27
supportLibVersion = "27.1.1"
googlePlayServicesVersion = "15.0.1"
androidMapsUtilsVersion = "0.5+"
}
...
subprojects {
afterEvaluate {project ->
if (project.hasProperty("android")) {
android {
compileSdkVersion 27
buildToolsVersion '27.0.3'
}
}
}
}
/android/app/build.gradle:
dependencies {
implementation project(':amazon-cognito-identity-js')
implementation project(':appcenter-push')
implementation project(':react-native-fbsdk')
implementation(project(':react-native-google-signin')) {
exclude group: "com.google.android.gms" // very important
}
implementation project(':react-native-image-picker')
implementation project(':react-native-vector-icons')
implementation project(':react-native-sentry')
implementation project(':react-native-maps')
implementation "com.google.android.gms:play-services-auth:$googlePlayServicesVersion" // Google signin
implementation project(':react-native-sentry')
implementation(project(':react-native-maps')) {
exclude group: 'com.google.android.gms', module: 'play-services-base'
exclude group: 'com.google.android.gms', module: 'play-services-maps'
}
implementation "com.google.android.gms:play-services-base:$googlePlayServicesVersion"
implementation "com.google.android.gms:play-services-maps:$googlePlayServicesVersion"
implementation "com.google.firebase:firebase-core:15.0.2"
implementation "com.google.firebase:firebase-messaging:15.0.2"
implementation project(':react-native-vector-icons')
implementation fileTree(include: ['*.jar'], dir: 'libs')
implementation "com.android.support:appcompat-v7:$supportLibVersion"
implementation 'com.facebook.react:react-native:+'
// implementation "com.android.support:$supportLibVersion"
}
if you are using macOS and using react native try this:
brew install react-native-cli
./gradlew --stop
./gradlew clean
./gradlew aRor ./gradlew assembleRelease
I did it like this and it works:
Removed node modules (you can do it by running this command rm -rf node_modules)
Run npm install or yarn install
Then run ./gradlew clean && ./gradlew app:assembleRelease or ./gradlew app:assembleDebug
For me:
OS: Windows.
I just copied the .keystore file to android\app.
cd android && gradlew --stop then gradlew assembleRelease.
This error also occurs when you have stacked your project inside many folders
Try copying your project folder into one of your hard drives without putting that project into any folder.
I was using the wrong image size (i.e image#5x.png) which caused me this problem. When I deleted that image#5x.png file...it worked!!
As of RN 0.58, for CI builds the commands is as follows:
First create directories:
mkdir -p app/build/generated/assets/react/production/release/ && mkdir -p app/build/generated/res/react/production/release
Next:
node ../node_modules/react-native/local-cli/cli.js bundle --platform android --dev false --entry-file index.android.js --bundle-output app/build/generated/assets/react/production/release/index.android.bundle --assets-dest app/build/generated/res/react/production/release --max-workers 1 --reset-cache
Also you may also want to add for your production builds according to this;
--minify true
Taken from RN's source
NOTE: We added --max-workers 1 not to deplete CI resources since they are limited to lower numbers (mem&cpu).
Consider checking all your JS (React native). I faced this issue coz have a coding error in the JS file (React native).
if you are running these commands in VS code,
Just open the project in cmd (administrator mode) in android folder run
$ gradlew clean
$ gradlew assembleRelease
I had the same problem. In my case, after a few hours, I saw this on GitHub: https://github.com/getsentry/sentry-react-native/issues/578#issuecomment-503428032.
I had renamed the project on Sentry. If you renamed the project on, update the android/sentry.properties and ios/sentry.properties file.
defaults.url=https://sentry.io/
defaults.org=yourorg
defaults.project=newprojectname
auth.token=🔑
And that's it
Solution :
1- android\app\build.gradle
project.ext.react = [
enableHermes: false,
]
2-
cd android
gradlew clean
3- gradlew bundleRelease
Check your project to make sure that you didn't name any of your folders with spaces in between.
For me, there was a space in the name of my project's parent folder.
When I remove the space (from Source Codes to codes) my build was successful.
In my case
npx was not able to go into the correct directory due to a space in the parent directory name
example :-
D:\dk\native\aiims raipur\aiimsraipur
Removed space from directory -> aiims raipur to aiims_raipur
Build works fine.
try android/app/build.gradle
def enableSeparateBuildPerCPUArchitecture = false
in new rn versions it is set to true
then
gradlew clean
gradlew assembleRelease
In my case,
The solution is so simple,
your project ancestors folder names should not contain spaces, like:
D:\Documents\React Native\MyRNProjectTest
in this "React Native" folder has space in it, removing the space from folder name could solve the problem, like this "ReactNative".
I'd like to facilitate a way to start a harp.js server and run a browser-sync process at the same time. It's working like a charm on Linux. This is the content of my package.json
{
"scripts": {
"dev": "bash ./serve.sh"
}
}
And this is the serve.sh
#!/bin/bash
harp server &
browser-sync start --proxy 'localhost:9000' --files '*.jade, *.less'
When doing this on windows, I am supposed to do a bat file I presume, but isn't there a way to translate harp server & browser-sync etc etc to a corresponding command on windows?
for a package.json file, we would do something like this instead.
{
"scripts": {
"dev": "harp server & browser-sync start --proxy 'localhost:9000' --files '*.jade, *.less'"
}
}
give that a spin.