More or less only applicable to beginners...
First time deployment of application on Heroku and received the following errors after using the standard Heroku Deploy instructions in the Heroku Dashboard:
2017-05-10T21:43:59.732215+00:00 heroku[web.1]: Process running mem=543M(106.1%)
2017-05-10T21:43:59.732277+00:00 heroku[web.1]: Error R14 (Memory quota exceeded)
Heroku Deploy Instructions:
$ git add .
$ git commit -am "make it better"
$ git push heroku master
Turns out that I was deploying the application as it is in the dev environment, which WOULD cause a significantly larger memory use. My thinking is that it would be running the entire dev environment on Heroku...
Instead, you need to build the application and deploy that (static) version of the application. This is done using the following!
Create-React-App Deployment
And adding this buildpack to the Heroku. Instructions on site:
create-react-app buildpack
I have no idea how this actually works.
I had the same issue. I figured out the app on Heroku was running in the development environment.
Fixed it by:
Installing the serve package (Run npm install serve -g)
Changing the start script to "start": "serve -s build"
You also need to add the script to use for dev environment, just a normal tract script start ("dev": "react-scripts start")
So, my scripts look like this:
...
"start": "serve -s build",
"dev": "react-scripts start",
"build": "react-scripts build"
...
In my case I'm using Express and React in the same application, so I have to build react and then start the express server. I was not aware that heroku runs the build script before running the start script, so I initially put my build script in my start script which caused the out of memory issue.
The problem:
"start": "npm run build && npm run start:server"
Related
I'm trying to deploy a react app with gh-pages for the first time and I keep hitting this same problem when I run deploy.
> cvproj#0.1.0 deploy
> gh-pages -d build
Remote url mismatch. Got "/home/savannaha/Desktop/the_odin_project/cvproj/cvproj/git#github.com:savwiley/cvproject.git" but expected "git#github.com:savwiley/cvproject.git" in /home/savannaha/Desktop/the_odin_project/cvproj/cvproj/node_modules/.cache/gh-pages/git#github.com!savwiley!cvproject.git. Try running the `gh-pages-clean` script first.
npm ERR! code 1
npm ERR! path /home/savannaha/Desktop/the_odin_project/cvproj/cvproj
npm ERR! command failed
npm ERR! command sh -c gh-pages -d build
npm ERR! A complete log of this run can be found in:
npm ERR! /home/savannaha/.npm/_logs/2021-03-19T01_29_49_032Z-debug.log
The first thing I did was run gh-pages-clean with node but it doesn't do anything. I've manually deleted the .cache folder in the node_modules, deleted the node_modules folder, uninstalled/reinstalled gh-pages, updated all of the programs I'm using, created a whole new repo, tried to use yarn instead of npm, made sure I didn't have gh-pages installed globally, emptied my computer's .cache folder, and it still comes back with this error.
When I really dug into the code to try to backtrack the problem, I narrowed it down to it coming back with the wrong url when it clones the repo, but I don't know how to fix it.
I originally followed this article on how to use gh-pages. Parts of my package.json:
{
"name": "cvproj",
"homepage": "http://savwiley.github.io/cvproj",
"version": "0.1.0",
...
},
"scripts": {
"start": "react-scripts start",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
...
}
Kind of feel like whatever I'm doing wrong is something really obvious since I was unable to find anyone else with this problem online, unless I just totally missed them. If you know anything, I'd love some help. And if you want to see anything else I didn't think about sharing, just ask. Thank you.
In case anyone else has this problem, I finally resolved the issue with some awesome help.
First, make sure the issue is an isolated one by deploying a bare bones app with nothing added or installed. I went ahead and added everything step-by-step and redeployed every time with no problems, but my older repos still came back with the error.
If you want to deploy your original app:
Make sure all of your dependencies and programs are up to date. Git was tricky because the terminal said it was when it wasn't so check on their site. If you're using Ubuntu, this is a good how-to.
Delete the build folder if it already added one.
Delete the node_modules > .cache > gh-pages folder
Make sure everything is pushed to github.
Make sure your repo doesn't have a github pages site running already.
Run deploy.
I have no idea why but it worked for me. It really feels like I did all of this already but maybe I didn't at the same time? Anyway, I hope no one else has this frustrating problem, but I'll leave this solution here in case it can help someone.
I added the command 'gh-pages-clean' in front of the deploy script. Seemed to fix the issue.
So in your scripts section in the package.json file, replace
"deploy": "gh-pages -d build",
with
"deploy": "gh-pages-clean gh-pages -d build",
then I changed it back to deploy the changes to gh pages
I have created react application without using boilerplate create-react-app. I want to deploy it with git hub. Can I deploy it ? if yes, can anyone suggest steps ?
Assuming you have gh-pages package installed and you know how to deploy a index.html for example, add this in your package.json scripts:
scripts: {
...,
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
Then run npm run deploy.
Take a look at this in depth article about it, if you get stuck, or leave some comments to this answer
https://dev.to/yuribenjamin/how-to-deploy-react-app-in-github-pages-2a1f
npm run build creates production build of the project. How do I create development build? I'm using gradle-node-plugin to build the artifact. The project has standard create-react-app configuration.
This is not really doable with just create-react-app, there is an open issue Here and it doesn't look like it will be added anytime soon.
However, you can use a package called dotenv for that, following are the steps you should take:
Install dotenv (make sure to add save dev) npm install dotenv-cli --save-dev
In package.json scripts section add new script: "build:dev": "dotenv -e .env.development react-scripts build",
And you can build for development with npm run build:dev
PS: if you want to avoid mistakenly deploying dev builds to production (as mentioned here) you can add build:prod to package.json and disable the regular build command, see code:
"build:dev": "dotenv -e .env.development react-scripts build",
"build:prod": "dotenv -e .env.production react-scripts build",
"build": "echo \"Please use build:dev or build:prod \" && exit 1",
Also note that process.env.NODE_ENV will still be production but it'll load your .env.development file
Thanks, #Moses. This is an extension to the answer posted by Moses Schwartz. You can also make the build pick the environment files dynamically by exporting the value of the environment(development, test, production) in the bash shell. And then you don't have to have different build commands for different environments.
You can use this in your package.json
"start": "dotenv -e .env react-scripts start",
"build": "dotenv -e .env.${REACT_APP_ENVIRONMENT} react-scripts build",
So when your run npm start, it will pick the environment values from .env
and when you run npm run build, it will pick the environment values from .env.{REACT_APP_ENVIRONMENT}
To define the REACT_APP_ENVIRONMENT, you can do:
export REACT_APP_ENVIRONMENT="development" or
export REACT_APP_ENVIRONMENT="test" or
export REACT_APP_ENVIRONMENT="production"
Hope this helps. This will help in staging the react application for multiple environments.
Thanks to #Tx_monster comment
github.com/Nargonath/cra-build-watch
A script for create-react-app that writes development builds to the disk
npm install -D cra-build-watch
package.json:
{
"scripts": {
"watch": "cra-build-watch"
}
}
npm run watch
I have a repository of react code that I deployed to github pages. The code deployed properly and is showing up at the right url, but the repository completely changed. A static folder was created with a bunch of chunk.js files and whatnot. My problem is that I am unsure how to update my code now that it is full of these strange files.
I'm not exactly sure what I should do. A solution I have in mind is just to redeploy to a different branch every time, though I assume that isn't the most elegant way to do things.
I ran npm run deploy.
What I expected was that after deploying, my regular repository would show up with all the code I wrote, but there's now a static folder with a bunch of chunk files that I have no idea how to work with. Any help would be appreciated.
Follow following steps --
Step 1: Add homepage to package.json
"homepage": "https://myusername.github.io/my-app",
Step 2: Install gh-pages and add deploy to scripts in package.json
npm install --save gh-pages
Add the following scripts in your package.json:
"scripts": {
+ "predeploy": "npm run build",
+ "deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
Step 3: Deploy the site by running npm run deploy
npm run deploy
Step 4: For a project page, ensure your project’s settings use gh-pages
Finally, make sure GitHub Pages option in your GitHub project settings is set to use the gh-pages branch:
Step 5: Optionally, configure the domain
mywebsite.com
reference : https://create-react-app.dev/docs/deployment GitHub Pages Section
I'm deploying the create-react-app using docker on AWS ECS. I'm testing using dockerhub image that's pretty much the stock version of create-react-app. When launch the task, it's able to pull the container image, launch the docker container, however it hangs on running react-scripts start. All I can see in the container logs are:
01:51:38 npm info it worked if it ends with ok
01:51:38 npm info using npm#2.15.11
01:51:38 npm info using node#v4.7.3
01:51:42 npm info prestart test-react#0.1.0
01:51:42 npm info start test-react#0.1.0
01:51:42 > test-react#0.1.0 start /usr/src/app
01:51:42 > react-scripts start
01:52:06 Starting the development server...
It just hangs there and never finishes. However, when I manually run the docker container, everything works fine:
Starting the development server...
Compiled successfully!
The app is running at:
http://localhost:3000/
My Dockerfile is:
FROM node:4-onbuild
# Prepare app directory
RUN mkdir -p /usr/src/app
ADD . /usr/src/app
# Install dependencies
WORKDIR /usr/src/app
RUN npm install
# Build the app
RUN npm build
# Expose the app port
EXPOSE 3000
# Start the app
CMD npm start --loglevel debug
My package.json:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Looking for advice on how to debug or if there's additional logging I can do, thanks!
I figured it out - when I created defined the container in the ECS task, I didn't allocate enough memory to the docker container so when it was starting the server it ran out of memory and froze up. I changed the settings to allocate more memory to the docker container and now everything works.