⚛️ Heroku Buildpack for create-react-app: static hosting for React.js web apps
License: MIT License
After a long, useful run, this buildpack is now at its end of life 🌅
The underlying static web server buildpack is deprecated and will not be supported on Heroku-22 or newer stacks.
Please look into using Next.js or Remix to develop React apps which are deployable using the Node.js buildpack.
Original README is still available on the final release tag.
The app doesn't redirect to https. any ideas why?
static.json:
{
"root": "build/",
"clean_urls": false,
"https_only": true,
"routes": {
"/**": "index.html"
}
}
Thank you 🙏
I had some hesitation going through the readme when I reached the heroku create step.
In particular, I was confused because it uses a github URL and there were no steps asking me to push my app to github.
Eventually I looked up -b and buildpack and realized I should use the command as-is instead of replacing it.
But, since other first-timers are using create-react-app, it might be helpful to add some further clarification to the readme.
Otherwise didn't run into any challenges! Thanks!
Hi. Heroku can't build create-react-app project. Localy npm run build works ok.
Error output:
remote: > react-scripts build
remote:
remote: Creating an optimized production build...
remote: Failed to compile.
remote:
remote: Module build failed: BrowserslistError: Unknown browser query `op_mini all`
remote: at error (/tmp/build_aa1153ea93115ef463a11431c946d409/node_modules/browserslist/index.js:23:15)
remote: at /tmp/build_aa1153ea93115ef463a11431c946d409/node_modules/browserslist/index.js:90:13
remote: at Array.forEach (native)
remote: at browserslist (/tmp/build_aa1153ea93115ef463a11431c946d409/node_modules/browserslist/index.js:62:16)
remote: at isSupported (/tmp/build_aa1153ea93115ef463a11431c946d409/node_modules/caniuse-api/dist/index.js:75:10)
remote: at /tmp/build_aa1153ea93115ef463a11431c946d409/node_modules/postcss-merge-rules/dist/lib/ensureCompatibility.js:87:66
remote: at /tmp/build_aa1153ea93115ef463a11431c946d409/node_modules/postcss-selector-parser/dist/selectors/container.js:170:26
remote: at Selector.each (/tmp/build_aa1153ea93115ef463a11431c946d409/node_modules/postcss-selector-parser/dist/selectors/container.js:153:22)
remote: at Selector.walk (/tmp/build_aa1153ea93115ef463a11431c946d409/node_modules/postcss-selector-parser/dist/selectors/container.js:169:21)
remote: at /tmp/build_aa1153ea93115ef463a11431c946d409/node_modules/postcss-selector-parser/dist/selectors/container.js:173:31
remote: at Root.each (/tmp/build_aa1153ea93115ef463a11431c946d409/node_modules/postcss-selector-parser/dist/selectors/container.js:153:22)
remote: at Root.walk (/tmp/build_aa1153ea93115ef463a11431c946d409/node_modules/postcss-selector-parser/dist/selectors/container.js:169:21)
remote: at Processor.func (/tmp/build_aa1153ea93115ef463a11431c946d409/node_modules/postcss-merge-rules/dist/lib/ensureCompatibility.js:80:17)
remote: at Processor.process (/tmp/build_aa1153ea93115ef463a11431c946d409/node_modules/postcss-selector-parser/dist/processor.js:34:14)
remote: at /tmp/build_aa1153ea93115ef463a11431c946d409/node_modules/postcss-merge-rules/dist/lib/ensureCompatibility.js:121:12
remote: at Array.every (native)
Looks like it is not using last version of browserslist. Do you have a ideas how to solve the issue?
Hi, I just started my new project and have about 4 flows, no images no videos and of course am using the create react app boilerplate, I pushed the code to heroku according to the instructions but the slug size seems huge to me. its 50+mb
is this normal?
pushing to heroku came from the project folder and not from the build folder. that is correct isnt it?
Thanks for creating this buildpack, extremely useful and much appreciated!
With the release of react-scripts 0.2.3 it seems like we should have access to environment variables that start with REACT_APP. I confirmed locally that this is the case, but when I deploy to heroku and use config:set to define say REACT_APP_EXAMPLE_VARIABLE, process.env.REACT_APP_EXAMPLE_VARIABLE is undefined.
I'm not sure if this is an issue with the buildpack or create-react-app, but just wanted to bring it up in case anyone has some insight into this.
Hi,
I am using react-router for my routing, so far successfully. In my routes, I was also able to define a fallback route for 404 pages, which also works perfectly.
However, it seems that we always return 200, even on those 404 routes, which is something I'd like to avoid for SEO reasons.
The only solution I found so far is explicitly defining the routes in the static.json instead of using **/, redirecting all of them to index.html - but that comes with the drawback of having the route definitions duplicated. Also, there is a high risk about forgetting amending the static.json when I introduce a new page, which would mean that a "valid" page that is normally rendered would return 404.
Any help would be appreciated.
Best regards,
Philipp
I changed the package.json according to the Sass support docs, (all css to scss and package.json)
package json looks now like so:
"scripts": { "build-css": "node-sass src/ -o src/", "watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive", "start-js": "react-scripts start", "start": "npm-run-all -p watch-css start-js", "build": "npm run build-css react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" }
npm-run-all is also installed under devDep.
As far as the code goes, only changed css to sass. locally everything works fine
when I push to heroku, logs seem fine but Im getting the 404 Not Found nginx.
any idea whats wrong here?
I realize after reading the other issue I'm kind of in the same boat so I will need to follow your options provided; but I wanted to let you know this is what I'm getting back when using the heroku cli for installing the build pack:
Possibly it's a mistake on my part. This is how I would set the build pack for meteor.js and looking at the Heroku docs it seems to be the right way. Just an FYI if this really is an issue.
I followed all instructions in the README. Everything worked perfectly except for heroku browse which threw this error:
I'm able to manually get to the dashboard at https://dashboard.heroku.com/apps/{my-app-id}.
Although this is probably not related to this project, the README should probably be updated with the correct command.
p.s. create-react-app-buildpack is a fantastic idea. CRA + Heroku = ❤️. Thank you.
In a dokku (https://github.com/dokku/dokku) enviornment, it does not appear to install devDependencies, so the build fails when attempting to run react-scripts build. I guess Heroku installs devDepencies? I'm not sure if dokku is non-standard here or Heroku, but moving the react-scripts to dependencies from devDependencies worked for me.
Not sure if this an issue I should file with create-react-app or dokku :-/.
I was trying to push my code to heroku and this error happen .
ExternalModuleFactoryPlugin.js:37 handleExternals
[build_56fd8eac2fb60590722f9b5429d2a529]/[webpack]/lib/ExternalModuleFactory Plugin.js:37:33
ExternalModuleFactoryPlugin.js:46 next
[build_56fd8eac2fb60590722f9b5429d2a529]/[webpack]/lib/ExternalModuleFactory Plugin.js:46:8
ExternalModuleFactoryPlugin.js:59 handleExternals
[build_56fd8eac2fb60590722f9b5429d2a529]/[webpack]/lib/ExternalModuleFactory Plugin.js:59:7
ExternalModuleFactoryPlugin.js:79 ExternalModuleFactoryPlugin.
[build_56fd8eac2fb60590722f9b5429d2a529]/[webpack]/lib/ExternalModuleFactory Plugin.js:79:5
NormalModuleFactory.js:246 applyPluginsAsyncWaterfall
[build_56fd8eac2fb60590722f9b5429d2a529]/[react-scripts]/[webpack]/lib/Norma lModuleFactory.js:246:4
Tapable.js:204
[build_56fd8eac2fb60590722f9b5429d2a529]/[react-scripts]/[tapable]/lib/Tapab le.js:204:11
IgnorePlugin.js:56 IgnorePlugin.checkIgnore
[build_56fd8eac2fb60590722f9b5429d2a529]/[react-scripts]/[webpack]/lib/Ignor ePlugin.js:56:10
Tapable.js:208 NormalModuleFactory.applyPluginsAsyncWaterfall
[build_56fd8eac2fb60590722f9b5429d2a529]/[react-scripts]/[tapable]/lib/Tapab le.js:208:13
NormalModuleFactory.js:230 NormalModuleFactory.create
[build_56fd8eac2fb60590722f9b5429d2a529]/[react-scripts]/[webpack]/lib/Norma lModuleFactory.js:230:8
Compilation.js:382 Compilation._addModuleChain
[build_56fd8eac2fb60590722f9b5429d2a529]/[react-scripts]/[webpack]/lib/Compi lation.js:382:17
Compilation.js:464 Compilation.addEntry
[build_56fd8eac2fb60590722f9b5429d2a529]/[react-scripts]/[webpack]/lib/Compi lation.js:464:8
SingleEntryPlugin.js:22 SingleEntryPlugin.
[build_56fd8eac2fb60590722f9b5429d2a529]/[webpack]/lib/SingleEntryPlugin.js: 22:15
Tapable.js:229 Compiler.applyPluginsParallel
[build_56fd8eac2fb60590722f9b5429d2a529]/[react-scripts]/[tapable]/lib/Tapab le.js:229:14
Compiler.js:488
[build_56fd8eac2fb60590722f9b5429d2a529]/[react-scripts]/[webpack]/lib/Compi ler.js:488:8
Tapable.js:131 Compiler.applyPluginsAsyncSeries
[build_56fd8eac2fb60590722f9b5429d2a529]/[react-scripts]/[tapable]/lib/Tapab le.js:131:46
Compiler.js:481 Compiler.compile
[build_56fd8eac2fb60590722f9b5429d2a529]/[react-scripts]/[webpack]/lib/Compi ler.js:481:7
npm ERR! Linux 3.13.0-112-generic
npm ERR! argv "/tmp/build_56fd8eac2fb60590722f9b5429d2a529/.heroku/node/bin/node" "/tmp/build_56fd8eac2fb60590722f9b5429d2a529/.heroku/node/bin/npm" "run" "build"
npm ERR! node v6.11.0
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: react-scripts build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script 'react-scripts build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the btfWeb2 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! react-scripts build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs btfWeb2
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls btfWeb2
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /tmp/build_56fd8eac2fb60590722f9b5429d2a529/npm-debug.log
! Push rejected, failed to compile React.js (create-react-app) multi app.
! Push failed
Can you please help ?
Hi,
i have created a react app using create-react-app and trying to push to heroku.
i am seeing the below error message when i try to push using
git push heroku master.
Build succeeded!
remote: =====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git
remote: =====> Detected Framework: React.js (create-react-app)
remote: Writing static.json to support create-react-app
remote: Enabling runtime environment variables
remote:
remote: > [email protected] build /tmp/build_12bfae77e82681d2d6968585377319b8
remote: > react-scripts build
remote:
remote: Could not find a required file.
remote: Name: index.js
remote: Searched in: /tmp/build_12bfae77e82681d2d6968585377319b8/src
remote:
remote: npm ERR! Linux 3.13.0-112-generic
remote: npm ERR! argv "/tmp/build_12bfae77e82681d2d6968585377319b8/.heroku/node/bin/node" "/tmp/build_12bfae77e82681d2d6968585377319b8/.heroku/node/bin/npm" "run" "build"
remote: npm ERR! node v6.11.0
remote: npm ERR! npm v3.10.10
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! [email protected] build: react-scripts build
can you please help
I’m having trouble trying to deploy my create-react-app on to Heroku. I’ve had it working fine before, however when I tried to incorporate my rails 5 api only back-end I get the following error: 500 Internal Server Error nginx. One of the pages I built out is a test page that has nothing but text, and I still get this error. Everything works fine in development.
I am running a rails 5 api only bac-kend along side this as a separate app.
static.json, package.json, heroku logs, and build logs below
Thank you!
static.json
{
"root": "build/",
"clean_urls": false,
"routes": {
"/**": "index.html"
},
"proxies": {
"/api/": {
"origin": "${API_URL}"
}
}
}
package.json
{
"name": "APP-client",
"version": "0.1.0",
"private": true,
"proxy": "https://APP-NAME.c9users.io",
"dependencies": {
"axios": "^0.16.1",
"google-maps-react": "^1.0.19",
"react": "^15.5.4",
"react-bootstrap": "^0.30.8",
"react-dom": "^15.5.4",
"react-redux": "^5.0.4",
"react-router-dom": "^4.1.1",
"redux": "^3.6.0",
"redux-form": "^6.6.3",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"react-scripts": "0.9.5"
},
"scripts": {
"start": "PORT=8082 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
heroku logs
2017-04-25T02:25:34.692144+00:00 heroku[router]: at=info method=GET path="/address" host=APP-client.herokuapp.com request_id=d5833019-ca43-458e-af40-92695e7583cf fwd="100.38.166.199" dyno=web.1 connect=0ms service=2ms status=500 bytes=758 protocol=https
2017-04-25T02:25:34.690580+00:00 app[web.1]: 2017/04/25 02:25:34 [error] 29#0: *7 mrb_run failed: return 500 HTTP status code to client: error: /app/bin/config/lib/ngx_mruby/headers.rb:7: invalid json (ArgumentError), client: 10.93.229.188, server: , request: "GET /address HTTP/1.1", host: "APP-client.herokuapp.com"
2017-04-25T02:25:34.691875+00:00 app[web.1]: 10.93.229.188 - - [25/Apr/2017:02:25:34 +0000] "GET /address HTTP/1.1" 500 588 "-" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36"
2017-04-25T02:25:35.421955+00:00 heroku[router]: at=info method=GET path="/favicon.ico" host=APP-client.herokuapp.com request_id=b95cc10e-f4d5-4298-9b85-cd429e08975f fwd="100.38.166.199" dyno=web.1 connect=0ms service=2ms status=500 bytes=758 protocol=https
2017-04-25T02:25:35.420279+00:00 app[web.1]: 2017/04/25 02:25:35 [error] 28#0: *8 mrb_run failed: return 500 HTTP status code to client: error: /app/bin/config/lib/ngx_mruby/headers.rb:7: invalid json (ArgumentError), client: 10.93.229.188, server: , request: "GET /favicon.ico HTTP/1.1", host: "APP-client.herokuapp.com", referrer: "https://APP-client.herokuapp.com/address"
2017-04-25T02:25:35.422600+00:00 app[web.1]: 10.93.229.188 - - [25/Apr/2017:02:25:35 +0000] "GET /favicon.ico HTTP/1.1" 500 588 "https://APP-client.herokuapp.com/address" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36"
Here is by build log
Counting objects: 3, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 305 bytes | 0 bytes/s, done.
Total 3 (delta 2), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> React.js (create-react-app) multi app detected
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
remote: =====> Detected Framework: Multipack
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
remote: =====> Detected Framework: Node.js
remote:
remote: -----> Creating runtime environment
remote:
remote: NPM_CONFIG_LOGLEVEL=error
remote: NPM_CONFIG_PRODUCTION=false
remote: NODE_VERBOSE=false
remote: NODE_ENV=development
remote: NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote: engines.node (package.json): unspecified
remote: engines.npm (package.json): unspecified (use default)
remote:
remote: Resolving node version 6.x via semver.io...
remote: Downloading and installing node 6.10.2...
remote: Using default npm version: 3.10.10
remote:
remote: -----> Restoring cache
remote: Loading 2 from cacheDirectories (default):
remote: - node_modules
remote: - bower_components (not cached - skipping)
remote:
remote: -----> Building dependencies
remote: Installing node modules (package.json)
remote:
remote: -----> Caching build
remote: Clearing previous node cache
remote: Saving 2 cacheDirectories (default):
remote: - node_modules
remote: - bower_components (nothing to cache)
remote:
remote: -----> Build succeeded!
remote: =====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git
remote: =====> Detected Framework: React.js (create-react-app)
remote: Using existing `static.json`
remote: Enabling runtime environment variables
remote:
remote: > [email protected] build /tmp/build_7a246c6552958b6ed245ea00d8951bae
remote: > react-scripts build
remote:
remote: Creating an optimized production build...
remote: Compiled successfully.
remote:
remote: File sizes after gzip:
remote:
remote: 79.01 KB build/static/js/main.345844f4.js
remote: 289 B build/static/css/main.9a0fe4f1.css
remote:
remote: The project was built assuming it is hosted at the server root.
remote: To override this, specify the homepage in your package.json.
remote: For example, add this to build it for GitHub Pages:
remote:
remote: "homepage": "http://myname.github.io/myapp",
remote:
remote: The build folder is ready to be deployed.
remote: You may serve it with a static server:
remote:
remote: npm install -g serve
remote: serve -s build
remote:
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static.git
remote: =====> Detected Framework: Static HTML
remote: % Total % Received % Xferd Average Speed Time Time Time Curren
remote: Dload Upload Total Spent Left Speed
remote: 100 838k 100 838k 0 0 13.0M 0 --:--:-- --:--:-- --:--:-- 13.2M
remote: -----> Installed directory to /app/bin
remote: Using release configuration from last framework (Static HTML).
remote: -----> Discovering process types
remote: Procfile declares types -> (none)
remote: Default types for buildpack -> web
remote:
remote: -----> Compressing...
remote: Done: 33.6M
remote: -----> Launching...
remote: Released v21
remote: https://APP-client.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy.... done.
To https://git.heroku.com/APP-client.git
c2631c6..85d1eab master -> master
I am stumped by an error that occurred while I was attempting to deploy a react-js app, which was created with create-react-app, to heroku.
1). When I included a static.json file as per the instructions given here for deploying a create-react-app to heroku, i got a 404 error.
2). When static.json was not include, deployment goes well.
3). This is what the included static.json file looked like.
{
"root": "build/",
"https_only": true,
"headers": {
"/**": {
"Strict-Transport-Security": "max-age=7776000"
}
},
"proxies": {
"/api/": {
"origin": "${API_URL}"
}
}
}
Thanks!
I have an express server setup, and I found a way to make all the routes go through the server in development.
However as soon as I'm in production, using heroku and this buildpack I have to run 2 servers. Express and the buildpacks.
Is there a way to only use the express server while still using the buildpack?
Thank you 🙏
Hi,
I use react-router and react-router-redux inside my app.
When I access the root URL of the app, I receive the page. However when accessing directly to a specific path, I get nginx 404 error.
This does not happen locally.
I assumed nginx needs to be configured, but I saw you allow to add a static.json file which does:
{
"root": "build/",
"clean_urls": false,
"routes": {
"/**": "index.html"
}
}
This seems like it should fix the problem but it doesnt.
Any idea?
It is possible to insert addional node.js proxy that will take the request and either forward to static webserver or do-other-specific-stuff?
I tried to create Procfile
web: node ./proxy/server
with content like this:
const express = require('express'),
path = require('path'),
app = express(),
request = require('request'),
PORT = 5000;
// TODO use 5000 port
const redirectToReactApp = (req, res) => {
console.log("redirecto to reactp app");
res.send("redirectToReactApp");
};
const redirectToOpenGraph = (req, res) => {
console.log("redirecto to open graph");
res.send("redirectToOpenGraph");
};
app.get('*', true ? redirectToOpenGraph : redirectToReactApp);
app.listen(PORT, () => console.log(`server.js is running on port: ${PORT}`));But it did not help me. Any ideas? Thanks in advance.
Hi,
When I run git push heroku master with the buildpack, I can see that the build is created. When I view my index.html file on my production website, I see it non minified with one js file inserted (/static/js/bundle.js).
This is my static.json
{
"root": "build/",
"https_only": true,
"routes": {
"/**": "index.html"
},
"headers": {
"/": {
"Cache-Control": "no-store, no-cache"
},
"**.js": {
"Cache-Control": "public, max-age=31536000"
},
"**.css": {
"Cache-Control": "public, max-age=31536000"
}
}
}
I see this when inspecting index.html in production:
<div id="root"></div>
<script type="text/javascript" src="/static/js/bundle.js"></script></body>
Any idea why this is happening? It seems weird because the build/ directory is the one that should be served, but it seems like its serving something else. Is there something I'm missing?
Hey there,
https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md#browserhistory
link in a Routing clean URLs chapter is broken.
Probably should be https://github.com/ReactTraining/react-router/blob/v3/docs/guides/Histories.md#browserhistory
Great buildpack, btw!
Hi,
Getting:
remote: > react-scripts build
remote:
remote: Creating an optimized production build...
remote: Failed to compile.
remote:
remote: Module not found: Error: Cannot resolve 'file' or 'directory' ./Routes in /tmp/build_e872953b462d7462b7b922188eb98d08/src
After pushing to Heroku, even though npm run build runs fine locally.
Any idea?
The deploy was working previously. Not suure what changed :(
Counting objects: 33, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (32/32), done.
Writing objects: 100% (33/33), 37.21 KiB | 0 bytes/s, done.
Total 33 (delta 19), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> React.js (create-react-app) multi app detected
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
remote: =====> Detected Framework: Multipack
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
remote: =====> Detected Framework: Node.js
remote:
remote: -----> Creating runtime environment
remote:
remote: NPM_CONFIG_LOGLEVEL=error
remote: NPM_CONFIG_PRODUCTION=false
remote: NODE_VERBOSE=false
remote: NODE_ENV=development
remote: NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote: engines.node (package.json): 6.10.3
remote: engines.npm (package.json): unspecified (use default)
remote:
remote: Downloading and installing node 6.10.3...
remote: Detected package-lock.json: defaulting npm to version 5.x.x
remote: Resolving npm version 5.x.x via semver.io...
remote: Downloading and installing npm 5.0.3 (replacing version 3.10.10)...
remote:
remote: -----> Restoring cache
remote: Skipping cache restore (new-signature)
remote:
remote: -----> Building dependencies
remote: Installing node modules (package.json)
remote:
remote: > [email protected] install /tmp/build_a6f4ff19dfd1b692f61c522e72f2ed06/node_modules/fsevents
remote: > node install
remote:
remote: added 399 packages in 15.28s
remote: Running heroku-postbuild
remote:
remote: > [email protected] heroku-postbuild /tmp/build_a6f4ff19dfd1b692f61c522e72f2ed06
remote: > cd client/ && npm install --only=dev && npm install && npm run build
remote:
remote:
remote: > [email protected] install /tmp/build_a6f4ff19dfd1b692f61c522e72f2ed06/client/node_modules/fsevents
remote: > node-pre-gyp install --fallback-to-build
remote:
remote: node-pre-gyp ERR! Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.0.17/fse-v1.0.17-node-v48-linux-x64.tar.gz
remote: node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v48 ABI) (falling back to source compile with node-gyp)
remote: make: Entering directory '/tmp/build_a6f4ff19dfd1b692f61c522e72f2ed06/client/node_modules/fsevents/build'
remote: SOLINK_MODULE(target) Release/obj.target/.node
remote: COPY Release/.node
remote: make: Leaving directory '/tmp/build_a6f4ff19dfd1b692f61c522e72f2ed06/client/node_modules/fsevents/build'
remote: added 1104 packages in 55.284s
remote: up to date in 7.683s
remote:
remote: > [email protected] build /tmp/build_a6f4ff19dfd1b692f61c522e72f2ed06/client
remote: > react-scripts build
remote:
remote: Creating an optimized production build...
remote: Failed to compile.
remote:
remote: Module not found: Error: Can't resolve 'whatwg-fetch' in '/tmp/build_a6f4ff19dfd1b692f61c522e72f2ed06/client/node_modules/react-scripts/config'
remote:
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! [email protected] build: `react-scripts build`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the [email protected] build script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR! /app/.npm/_logs/2017-06-26T18_09_31_240Z-debug.log
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! [email protected] heroku-postbuild: `cd client/ && npm install --only=dev && npm install && npm run build`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the [email protected] heroku-postbuild script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR! /app/.npm/_logs/2017-06-26T18_09_31_256Z-debug.log
remote:
remote: -----> Build failed
remote:
remote: We're sorry this build is failing! You can troubleshoot common issues here:
remote: https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:
remote: If you're stuck, please submit a ticket so we can help:
remote: https://help.heroku.com/
remote:
remote: Love,
remote: Heroku
remote:
remote: ! Push rejected, failed to compile React.js (create-react-app) multi app.
remote:
remote: ! Push failed
remote: Verifying deploy...
remote:
remote: ! Push rejected to rocky-bayou-74141.
remote:
To https://git.heroku.com/rocky-bayou-74141.git
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/rocky-bayou-74141.git'Mobile browsers are not loading the new CSS file when a new build is deployed.
For example, all my app styles are compiled into style/style.css and after every successful deploy I need to tell my users to delete their browser cache so that the new styles will be loaded.
Has anyone else seen this or know a workaround? Thanks!
Updated Oct 16, 2016 with the final solution
When using the REACT_APP_* or NODE_* environment vars to configure the React app, a rebuild (git push heroku master) is required for changes to take effect. These values get embedded in the JavaScript bundle during build, whereas Heroku apps should always read config from environment variables.
Examples of issues this causes:
Perform replacement of environment variables in the bundle during the app start-up (via .profile.d/ script), so that the current environment variables are used at runtime.
Try the proposed runtime env vars strategy by using the buildpack branch:
heroku buildpacks:set https://github.com/mars/create-react-app-buildpack.git#modular-runtime-env-varsHi! I'm looking a way to serve a file that I have in the root of my project. The name of this file is apple-app-site-association that is basically a json file.
Just need to return the content of this file launching the absolute GET url e.g. 'https://mydomain.com/apple-app-site-association'
I tried adding the route in the static.json file but nothing.
{
"root": "build/",
"clean_urls": false,
"routes": {
"/apple-app-site-association": "apple-app-site-association"
},
"https_only": true
}
But it is returning 404.
How can I achieve this?
Thanks!
I am running into this error in Production.
I don't have any errors locally, but as soon as I deploy to heroku there's an error and some pages are not accessible.
I am trying to deploy to my dev. server on heroku to see the error message there, but it seems my env. is prod. even in my dev server with env. valiable ENV=DEVELOPMENT.
Do you know how I can see what's causing the issue in my heroku dev. server?
Thank you!
reactProdInvariant.js:31 Uncaught (in promise) Error: Minified React error #130; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at n (reactProdInvariant.js:31)
at o (instantiateReactComponent.js:74)
at r (ReactChildReconciler.js:44)
at a (traverseAllChildren.js:77)
at a (traverseAllChildren.js:93)
at o (traverseAllChildren.js:172)
at Object.instantiateChildren (ReactChildReconciler.js:74)
at h._reconcilerInstantiateChildren (ReactMultiChild.js:193)
at h.mountChildren (ReactMultiChild.js:226)
at h._createInitialChildren (ReactDOMComponent.js:697)
When using private npm modules, you must provide an approved npm token.
Dynamically creating a .npmrc file during build on heroku would satisfy the need.
This is how I'm currently doing it.
package.json
"scripts": {
"heroku-prebuild": "node ./scripts/setNpmrc.js",
}setNpmrc.js
if (process.env.NODE_ENV !== 'production') {
return
}
var fs = require('fs')
fs.writeFileSync('.npmrc', '//registry.npmjs.org/:_authToken=${REACT_APP_NPM_TOKEN}')
fs.chmodSync('.npmrc', 0600)Then currently supported environment variable replacement would replace the placeholder with the actual token.
As the above does work, it would be nice if this were part of the build and perhaps configurable via static.json ("private_npm_modules": true).
I'm currently getting acclimated with heroku buildpacks so am not quite up to speed to submit a PR.
Thanks!
I worked on a deployment project this past weekend where I'm deploying a rails / react app. I followed this tutorial:
https://www.fullstackreact.com/articles/how-to-get-create-react-app-to-work-with-your-rails-api/
The build and deploy process is successful but I'm unable to open the application. The logs say that 60 secs has expired and the system timed out. I did some research and read something about setting the port dynamically but didn't see how to do so.
I've exhausted all my resources at this point. I'm hoping that you can provide me some insight into fixing this problem.
My files:
root/Procfile
api: bundle exec puma -t 5:5 -p ${PORT:-3001} -e ${RACK_ENV:-development}
web: npm run build
root/package.json
{
"name": "web",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"build": "cd client"
}
}
root/client/package.json
{
"name": "app",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-scripts": "^0.8.4"
},
"dependencies": {
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-router": "^3.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"build:client": "(cd client && npm run build)",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"cacheDirectories": [
"node_modules",
"client/node_modules"
],
"proxy": "http://api.lvh.me:3001/v1/"
}
Hi I just deployed my app in heroku, I followed all the instructions and successfully deployed it but the application cannot see the files in Heroku.
this is the repository I used to deploy in Heroku: https://github.com/xxryan1234/github-profile-search
Is it possible to redirect all http requests to https? This is typically done by checking the x-forwarded-proto header and redirecting as needed, but I'm not sure how things change with create-react-app .
I got an email saying that my deployment failed. But the web app is available and the build log says it deployed. The activity feed has two events per github push to the branch being used for auto-deployment.
Again, I can make changes to the codebase, push to the branch, and the changes will be reflected in the https://*.herokuapp.com website after a few minutes.
(I have changed the app name in the log below)
-----> React.js (create-react-app) multi app detected
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
=====> Detected Framework: Multipack
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
=====> Detected Framework: Node.js
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NPM_CONFIG_PRODUCTION=false
NODE_VERBOSE=false
NODE_ENV=development
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)
Resolving node version 6.x via semver.io...
Downloading and installing node 6.10.0...
Using default npm version: 3.10.10
-----> Restoring cache
Loading 2 from cacheDirectories (default):
- node_modules
- bower_components (not cached - skipping)
-----> Building dependencies
Installing node modules (package.json)
-----> Caching build
Clearing previous node cache
Saving 2 cacheDirectories (default):
- node_modules
- bower_components (nothing to cache)
-----> Build succeeded!
=====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git
=====> Detected Framework: React.js (create-react-app)
Using existing `static.json`
Enabling runtime environment variables
> [email protected] build /tmp/build_d215c4a8b1e80c47134aa56781f2a18d/my-test-app-d0116d30d854c7ced946e842f41a00b1e7eee073
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
116.03 KB build/static/js/main.1fef677b.js
278 B build/static/css/main.b2211e08.css
The project was built assuming it is hosted at the server root.
To override this, specify the homepage in your package.json.
For example, add this to build it for GitHub Pages:
"homepage": "http://myname.github.io/myapp",
The build folder is ready to be deployed.
You may also serve it locally with a static server:
npm install -g pushstate-server
pushstate-server build
open http://localhost:9000
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static.git
=====> Detected Framework: Static HTML
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
-----> Installed directory to /app/bin
Using release configuration from last framework (Static HTML).
-----> Discovering process types
Procfile declares types -> (none)
Default types for buildpack -> web
-----> Compressing...
Done: 32.7M
-----> Launching...
Released v4
https://my-test-app.herokuapp.com/ deployed to Heroku
Hi,
I'm facing this issue where I have some environment specific variables like my API URL. When in a pipeline, I click the "promote to production" button, I get in production the variables from Staging. I guess because it hasn't rebuilt the files.
Is there a way to make it work nicely instead to always create a new deployment from the master branch?
Thanks,
Florian
So, i was working on implementing redux-saga on my Heroku hosted app, and for some reason the build fails on heroku, but not anywhere else.
The latest commit fails (https://gitlab.com/saints-gaming/saints-web/commit/e112223f34a2a4321288877b8383eead10e97802):
-----> React.js (create-react-app) multi app detected
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
=====> Detected Framework: Multipack
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
=====> Detected Framework: Node.js
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NPM_CONFIG_PRODUCTION=false
NODE_VERBOSE=false
NODE_ENV=development
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): 7.4.0
engines.npm (package.json): 4.0.5
Downloading and installing node 7.4.0...
npm 4.0.5 already installed with node
Resolving yarn version (latest) via semver.io...
Downloading and installing yarn (0.20.3)...
Installed yarn 0.20.3
-----> Restoring cache
Loading 2 from cacheDirectories (default):
- node_modules
- bower_components (not cached - skipping)
-----> Building dependencies
Installing node modules (yarn.lock)
yarn install v0.20.3
[1/4] Resolving packages...
[2/4] Fetching packages...
warning [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "[email protected]" has incorrect peer dependency "react@~0.11.2".
[4/4] Building fresh packages...
Done in 30.68s.
-----> Caching build
Clearing previous node cache
Saving 2 cacheDirectories (default):
- node_modules
- bower_components (nothing to cache)
-----> Build succeeded!
=====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git
=====> Detected Framework: React.js (create-react-app)
Using existing `static.json`
Enabling runtime environment variables
> [email protected] build /tmp/build_e0ac4251c10c44bc36610fa84581cc4e
> npm run build-css && react-scripts build
> [email protected] build-css /tmp/build_e0ac4251c10c44bc36610fa84581cc4e
> node-sass src/ -o src/
fs.js:871
return binding.readdir(pathModule._makeLong(path), options.encoding);
^
Error: ENOENT: no such file or directory, scandir '/tmp/build_e0ac4251c10c44bc36610fa84581cc4e/node_modules/node-sass/vendor'
at Object.fs.readdirSync (fs.js:871:18)
at Object.getInstalledBinaries (/tmp/build_e0ac4251c10c44bc36610fa84581cc4e/node_modules/node-sass/lib/extensions.js:122:13)
at foundBinariesList (/tmp/build_e0ac4251c10c44bc36610fa84581cc4e/node_modules/node-sass/lib/errors.js:20:15)
at foundBinaries (/tmp/build_e0ac4251c10c44bc36610fa84581cc4e/node_modules/node-sass/lib/errors.js:15:5)
at Object.module.exports.missingBinary (/tmp/build_e0ac4251c10c44bc36610fa84581cc4e/node_modules/node-sass/lib/errors.js:45:5)
at module.exports (/tmp/build_e0ac4251c10c44bc36610fa84581cc4e/node_modules/node-sass/lib/binding.js:15:30)
at Object.<anonymous> (/tmp/build_e0ac4251c10c44bc36610fa84581cc4e/node_modules/node-sass/lib/index.js:14:35)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
npm ERR! Linux 3.13.0-105-generic
npm ERR! argv "/tmp/build_e0ac4251c10c44bc36610fa84581cc4e/.heroku/node/bin/node" "/tmp/build_e0ac4251c10c44bc36610fa84581cc4e/.heroku/node/bin/npm" "run" "build-css"
npm ERR! node v7.4.0
npm ERR! npm v4.0.5
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build-css: `node-sass src/ -o src/`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build-css script 'node-sass src/ -o src/'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the saints-react package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node-sass src/ -o src/
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs saints-react
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls saints-react
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /tmp/build_e0ac4251c10c44bc36610fa84581cc4e/npm-debug.log
npm ERR! Linux 3.13.0-105-generic
npm ERR! argv "/tmp/build_e0ac4251c10c44bc36610fa84581cc4e/.heroku/node/bin/node" "/tmp/build_e0ac4251c10c44bc36610fa84581cc4e/.heroku/node/bin/npm" "run" "build"
npm ERR! node v7.4.0
npm ERR! npm v4.0.5
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `npm run build-css && react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script 'npm run build-css && react-scripts build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the saints-react package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run build-css && react-scripts build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs saints-react
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls saints-react
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /tmp/build_e0ac4251c10c44bc36610fa84581cc4e/npm-debug.log
! Push rejected, failed to compile React.js (create-react-app) multi app.
! Push failed
I'm completely at a loss at what is causing it ...
The commit before it works just fine 😕 : https://gitlab.com/saints-gaming/saints-web/commit/8fdf169b68fa8110390b0a3394bc5f54801b073b
Support the ability to exclude the static ngnix server buildpack. I have a use case where I'd like to be able to use the node buildpack + the create-react-app-inner-buildpack but manage the server start script through my Procfile.
I have an app which I'm trying to deploy to Heroku that has this:
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=%REACT_APP_GOOGLE_API_KEY%">
</script>
I understand the method for runtime variables when they're in JS services / components - but is it possible to achieve this here?
Hi,
I created a static.json and added the following things:
{
"root": "build/",
"clean_urls": false,
"https_only": true,
"routes": {
"/**": "index.html"
},
"headers": {
"/**": {
"Strict-Transport-Security": "max-age=7776000"
}
}
}
But it does not redirect any request, it doesn't seem to pick up the static.json file at all.
Thanks for help!
I'm at a loss on what to do anymore to be honest here is a rundown:
file structure
api/
index.js <--- API Server running on localhost8000
client/ <--- CRA Project
index.js <--- Entry Point for CRA
package.json <--- react-scripts, proxy: localhost8000
yarn.lock
index.js <--- Entry point for API Server
package.json <--- API dependencies & scripts
start-client.js <--- Entry point for client/ runs npm start script.
yarn.lock
scripts
"start": "concurrently \"npm run server\" \"npm run client\"",
"server": "nodemon --exec babel-node index.js",
"client": "babel-node start-client.js",
"heroku": "babel-node index.js",
"postinstall": "babel-node build-client.js"At first I was trying to use CRA-build pack but after reading the docs came to the conclusion this was not going to work because CRA is not the root directory. So I'm using the node build pack. I set up a Procfile that runs the postinstall & heroku.
build-client.js
const args = ['build'];
const opts = { stdio: 'inherit', cwd: 'client', shell: true };
require('child_process').spawn('npm run', args, opts);I initially set NPM_CONFIG_PRODUCTION=false because react-scripts is a dev-dep; but I believe heroku only is applying that to the root package.json. So I moved react-scripts to devs. It seems no matter what I am trying I continually get the error message in the heroku build:
sh: 1: react-scripts: not found
npm ERR! Linux 3.13.0-105-generic
npm ERR! argv "/tmp/build_dfb9be74b6aab9adf700ff8bda468cdd/.heroku/node/bin/node" "/tmp/build_dfb9be74b6aab9adf700ff8bda468cdd/.heroku/node/bin/npm" "run" "build"
npm ERR! node v6.9.1
npm ERR! npm v3.10.8
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] build: `react-scripts build`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] build script 'react-scripts build'.
Am I doing something glaringly wrong? I tried Heroku support and they told me they don't support CRA-build pack....but my question is no long CRA-build pack related if I'm using node; real happy about that response. If you can provide anything at all I'd be beyond grateful!
This might be a dumb question given the error message I got from heroku:
Couldn't create this review app • An app.json is required on branch NAME
Note that I am using the pipelines.
Thanks for the great repo!
After turning on Heroku CI, when trying to run tests the following error message shows up:
-----> Reading manifest...
-----> Fetching https://github.com/mars/create-react-app-buildpack.git buildpack...
buildpack downloaded
! Unable to detect any runnable tests.
! For more information on how to resolve the issue, please see:
! https://devcenter.heroku.com/articles/heroku-ci-prerelease
Notice I'm using Heroku Pipelines for automated deployments and I have ejected my create-react-app project.
Its worth mentioning that running npm test locally does run the test suite correctly.
Deploying a react app with yarn.lock fails to compile the app as yarn ignores the NPM_CONFIG_PRODUCTION flag and omits the dev dependencies necessary to run the webpack.
There's a simple workaround as all you need to do is to delete yarn.lock file from the project and the build scripts will fall back to the npm (https://github.com/heroku/heroku-buildpack-nodejs/blob/v93/bin/compile#L54). But that't not what you really want to do
Found this article which directed to this project
In short, it allows for ES6/7 features for create-react-app through a custom react script.
It's still a create-react-app project but, I'm not having any luck running it on heroku when it gets to a decorator
-----> Build succeeded!
=====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git
=====> Detected Framework: React.js (create-react-app)
Writing `static.json` to support create-react-app
Enabling runtime environment variables
> [email protected] build /tmp/build_be2d2dd9a1875a0469898df328f2bf11/DarrylD-energy-app-5b6cf72f461fb8f377171a344e28a0f5de554cd0
> react-scripts build
Creating an optimized production build...
Failed to compile.
Module build failed: SyntaxError: Unexpected token (26:0)
24 |
25 |
> 26 | @FormUpdater({
| ^
27 | email:''
28 | })
29 | export default class App extends Component {
npm ERR! Linux 3.13.0-105-generic
npm ERR! argv "/tmp/build_be2d2dd9a1875a0469898df328f2bf11/DarrylD-energy-app-5b6cf72f461fb8f377171a344e28a0f5de554cd0/.heroku/node/bin/node" "/tmp/build_be2d2dd9a1875a0469898df328f2bf11/DarrylD-energy-app-5b6cf72f461fb8f377171a344e28a0f5de554cd0/.heroku/node/bin/npm" "run" "build"
npm ERR! node v6.9.1
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `react-scripts build`
npm ERR! Exit status 1
Any idea what the issue may be?
Awesome buildpack BTW!
I have a project with react-router which is working fine locally. However, I'm having issues with the heroku instance. If I go directly to any route other than /, I get a 404. I'm not sure what's going on, but figured this might be a good place to ask.
Edit: I suppose this is the issue.
Hi,
I have following error (it's just one of them) :
2016-10-20T00:56:26.841908+00:00 app[web.1]: /app/src/index.js:1
2016-10-20T00:56:26.841922+00:00 app[web.1]: (function (exports, require, module, __filename, __dirname) { import React from 'react';
2016-10-20T00:56:26.841923+00:00 app[web.1]: ^^^^^^
2016-10-20T00:56:26.841923+00:00 app[web.1]:
2016-10-20T00:56:26.841924+00:00 app[web.1]: SyntaxError: Unexpected token import
2016-10-20T00:56:26.841925+00:00 app[web.1]: at exports.runInThisContext (vm.js:53:16)
2016-10-20T00:56:26.841925+00:00 app[web.1]: at Module._compile (module.js:387:25)
2016-10-20T00:56:26.841926+00:00 app[web.1]: at Object.Module._extensions..js (module.js:422:10)
2016-10-20T00:56:26.841927+00:00 app[web.1]: at Module.load (module.js:357:32)
2016-10-20T00:56:26.841927+00:00 app[web.1]: at Function.Module._load (module.js:314:12)
2016-10-20T00:56:26.841928+00:00 app[web.1]: at Function.Module.runMain (module.js:447:10)
2016-10-20T00:56:26.841928+00:00 app[web.1]: at startup (node.js:148:18)
2016-10-20T00:56:26.841929+00:00 app[web.1]: at node.js:405:3
And my package.json file is :
{
"name": "reactMasp",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-preset-node5": "^11.1.0",
"babel-preset-node6": "^11.0.0",
"babel-preset-react": "^6.16.0",
"react-scripts": "0.6.1"
},
"dependencies": {
"firebase": "^3.5.0",
"googlemaps": "^1.11.1",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-forms": "^2.0.0-beta33",
"react-google-maps": "^6.0.1",
"react-modal": "^1.5.2",
"react-native": "^0.35.0",
"react-native-modal": "^0.4.0",
"react-scripts": "^0.6.1",
"reactfire": "^1.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"description": "This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).",
"main": "index.js",
"repository": {
"type": "git",
"url": "git+https://my_github_repo"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://my_github_repo/issues"
},
"homepage": "https://my_github_repo"
}
Do you know what I might be missing?
I'm really new to react, heroku, and web dev, and can't seem to figure out how to resolve...
Thanks!
Hi, I keep getting
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Failed to detect set buildpack https://github.com/heroku/heroku-buildpack-static.git
remote: More info: https://devcenter.heroku.com/articles/buildpacks#detection-failure
remote:
remote: ! Push failed
remote: Verifying deploy...
remote:
remote: ! Push rejected to ready4-web-staging.
remote:
when trying to push.
I followed the instructions can you please help?
p.s - general question, if I only want to push to heroku from the build folder, would that be problematic? naturally the static.json will need to be imported there and the root change
Hi,
First of all, thanks for creating this build pack. I much appreciate the super easy setup and deployment of a create-react-app on Heroku using this.
That said, I'm experiencing a deployment issue where it seems index.html is not updated, and I suspect nginx cache has something to do with this, in a joined effort with the service worker.
Do you have any suggestion on how to tackle this issue?
Thanks in advance.
I understand this build pack is meant for Heroku, not Dokku. But since I found more Dokku issues here I though I might as well add another one.
The first problem I ran into was a missing Procfile (like here: mars/create-react-app-inner-buildpack#5) which I solved by adding a completely empty Procfile. I have no idea if that's the right solution, but I would know what command to run (npm start? or should I add serve as a dependency and run serve -s build?).
Then I ran into a new problem:
remote: App container failed to start!!
=====> ysp-frontend-staging web container output:
Injecting runtime env into /app/build/static/js/main.0c045b2b.js (from .profile.d/inject_react_app_env.sh)
setuidgid: usage: setuidgid account child
Injecting runtime env into /app/build/static/js/main.0c045b2b.js (from .profile.d/inject_react_app_env.sh)
setuidgid: usage: setuidgid account child
Injecting runtime env into /app/build/static/js/main.0c045b2b.js (from .profile.d/inject_react_app_env.sh)
setuidgid: usage: setuidgid account child
Injecting runtime env into /app/build/static/js/main.0c045b2b.js (from .profile.d/inject_react_app_env.sh)
setuidgid: usage: setuidgid account child
=====> end ysp-frontend-staging web container output
This problem I fixed by adjusting scaling the process and worker both to 0. The logs show the application is successfully deployed but it's not running. When I run dokku ls it outputs the following:
App Name Container Type Container Id Status
ysp-frontend-staging NOT_DEPLOYED NOT_DEPLOYED NOT_DEPLOYED
Hopefully anybody has an idea of where it's going wrong. I have the feeling it has something to do with the Procfile...
Full deploy/build log for completeness:
-----> Cleaning up...
-----> Building ysp-dokku from herokuish...
-----> Adding BUILD_ENV to build environment...
-----> Checking deploymentkeys Plugin sanity ...
-----> Installing shared SSH keys in build environment ...
-----> Checking Hostkeys Plugin sanity ...
-----> Installing Hostkeys in build environment ...
No app keys available.
Adding shared keys.
-----> Done Installing Hostkeys in build environment ...
Added the following keys:
|1|DYiRGBSBQHw93GSvYPUyZfzOuqU=|5bu9kV9UhbxRtddsh477m6bTIbw= ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQCsj2bNKTBSpIYDEGk9KxsGh3mySTRgMtXL583qmBpzeQ+jqCMRgBqB98u3z++J1sKlXHWfM9dyhSevkMwSbhoR8XIq/U0tCNyokEi/ueaBMCvbcTHhO7FcwzY92WK4Yt0aGROY5qX2UKSeOvuP4D6TPqKF1onrSzH9bx9XUf2lEdWT/ia1NEKjunUqu1xOB/StKDHMoX4/OKyIzuS0q/T1zOATthvasJFoPrAjkohTyaDUz2LN5JoH839hViyEG82yB+MjcFV5MU3N1l1QL3cVUCh93xSaua1N85qivl+siMkPGbO5xR/En4iEY6K2XPASUEMaieWVNTRCtJ4S8H+9
|1|4LuwcR2ZEbXkXAnb5wXyhidWBMY=|uDnQCyZrDxBLshNjuU9q4hycnj4= ecdsa-sha2-nistp256 AAAAE2VjZHNhLXNoYTItbmlzdHAyNTYAAAAIbmlzdHAyNTYAAABBBFSMqzJeV9rUzU4kWitGjeR4PWSa29SPqJ1fVkhtj3Hw9xjLVXVYrU9QlYWrOLXBpQ6KWjbjTDTdDkoohFzgbEY=
|1|5ad70KLvVrvKbWbruqUzvGP9Cr0=|yYMu2jwzdnPC/FUAcUc2Uh2MPR4= ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIAfuCHKVTjquxvt6CM6tdG4SLp1Btn/nOeHHE5UOzRdf
-----> Warning: Multiple default buildpacks reported the ability to handle this app. The first buildpack in the list below will be used.
Detected buildpacks: multi nodejs
-----> Multipack app detected
=====> Downloading Buildpack: https://github.com/mars/create-react-app-buildpack.git
=====> Detected Framework: React.js (create-react-app) multi
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
=====> Detected Framework: Multipack
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
=====> Detected Framework: Node.js
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NPM_CONFIG_PRODUCTION=false
NODE_VERBOSE=false
NODE_ENV=development
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)
engines.yarn (package.json): unspecified (use default)
Resolving node version 6.x via semver.io...
Downloading and installing node 6.11.0...
Using default npm version: 3.10.10
Resolving yarn version (latest) via semver.io...
Downloading and installing yarn (0.24.5)...
Installed yarn 0.24.5
-----> Restoring cache
Loading 2 from cacheDirectories (default):
- node_modules
- bower_components (not cached - skipping)
-----> Building dependencies
Installing node modules (yarn.lock)
yarn install v0.24.5
[1/4] Resolving packages...
[2/4] Fetching packages...
warning [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
Done in 112.26s.
-----> Caching build
Clearing previous node cache
Saving 2 cacheDirectories (default):
- node_modules
- bower_components (nothing to cache)
-----> Build succeeded!
=====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git
=====> Detected Framework: React.js (create-react-app)
Writing `static.json` to support create-react-app
Enabling runtime environment variables
> [email protected] build /tmp/build
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
48.03 KB build/static/js/main.7fb8d6ba.js
289 B build/static/css/main.9a0fe4f1.css
The project was built assuming it is hosted at the server root.
To override this, specify the homepage in your package.json.
For example, add this to build it for GitHub Pages:
"homepage" : "http://myname.github.io/myapp",
The build folder is ready to be deployed.
You may serve it with a static server:
yarn global add serve
serve -s build
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static.git
=====> Detected Framework: Static HTML
remote: % Total % Received % Xferd Average Speed Time Time Time Current
remote: Dload Upload Total Spent Left Speed
remote: 0 0 0 0 0 0 0 0 --:--:-- --:remote: 6 838k 6 51874 0 0 81531 0 0:00:10 --:remote: 64 838k 64 542k 0 0 334k 0 0:00:02 0:remote: 100 838k 100 838k 0 0 374k 0 0:00:02 0:00:02 --:--:-- 374k
-----> Installed directory to /app/bin
Using release configuration from last framework (Static HTML).
remote: cat: /tmp/build/last_pack_release.out: input file is output file
-----> Discovering process types
Procfile declares types ->
-----> Releasing ysp-dokku (dokku/ysp-dokku:latest)...
-----> Deploying ysp-dokku (dokku/ysp-dokku:latest)...
-----> Attempting to run scripts.dokku.predeploy from app.json (if defined)
-----> App Procfile file found (/home/dokku/ysp-dokku/DOKKU_PROCFILE)
-----> DOKKU_SCALE file found (/home/dokku/ysp-dokku/DOKKU_SCALE)
=====> web=1
-----> Attempting pre-flight checks
For more efficient zero downtime deployments, create a file CHECKS.
See http://dokku.viewdocs.io/dokku/deployment/zero-downtime-deploys/ for examples
CHECKS file not found in container: Running simple container check...
-----> Waiting for 10 seconds ...
37f231005d627c76d67c0d2081593d7fb6cae4112127f010d96f175b308c1702
remote: App container failed to start!!
=====> ysp-dokku web container output:
Injecting runtime env into /app/build/static/js/main.7fb8d6ba.js (from .profile.d/inject_react_app_env.sh)
setuidgid: usage: setuidgid account child
Injecting runtime env into /app/build/static/js/main.7fb8d6ba.js (from .profile.d/inject_react_app_env.sh)
setuidgid: usage: setuidgid account child
Injecting runtime env into /app/build/static/js/main.7fb8d6ba.js (from .profile.d/inject_react_app_env.sh)
setuidgid: usage: setuidgid account child
Injecting runtime env into /app/build/static/js/main.7fb8d6ba.js (from .profile.d/inject_react_app_env.sh)
setuidgid: usage: setuidgid account child
Injecting runtime env into /app/build/static/js/main.7fb8d6ba.js (from .profile.d/inject_react_app_env.sh)
setuidgid: usage: setuidgid account child
=====> end ysp-dokku web container output
To moniker.dokku.me:ysp-dokku
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to '[email protected]:ysp-dokku'
So this may be an edge case that I have created. What I am doing is writing a component library and then a documentation site for the library. I may have to go to something like AWS to make things easier but using heroku would make my workflow much cleaner. The project setup is roughly as follows:
.git
package.json // (for component library)
src // (component library source)
dist // (directory for built/transpiled components in library)
docs // (directory for documentation site created with 'create-react-app')
\ package.json
src // (documentation site source code)
build // (built/transpiles create-react-app)
I don't know much about how buildpacks are put together but I did notice you specifying some *_DIR variables here. Is there a way for me to specify where the package.json /node_modules are for the app I'm actually deploying? Or preferably being able to just do something that would tell heroku to cd docs before building? I already have the root set to docs/build/ in my static.json as shown here.
Thanks in advance for any feedback!
EDIT to add more info:
I changed the build script to build the app in docs and as mentioned above changed the root to point to the right directory as told to do here.
The error I'm getting is that react-scripts can't be found but I have a feeling thats because its actually installing the dependencies from the root directory and not in docs.
I'm not sure if the error I'm seeing is related to this project, but if you could point me in the right direction any help would be appreciated. :)
When deploying a create-react-app to a dokku digital ocean droplet, I'm seeing the following:
> git push dokku master
Counting objects: 33, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (21/21), done.
Writing objects: 100% (33/33), 7.29 KiB | 0 bytes/s, done.
Total 33 (delta 7), reused 28 (delta 5)
-----> Cleaning up...
-----> Building reddit-radio from herokuish...
-----> Adding BUILD_ENV to build environment...
-----> Fetching custom buildpack
-----> React.js (create-react-app) multi app detected
remote: setuidgid: fatal: unable to run /tmp/buildpacks/custom/bin/compile: access denied
To [email protected]:reddit-radio
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to '[email protected]:reddit-radio'
I saw that there is the https enforcement which absolutely rocks! Is there a possibility to redirect to non-subdomain, e.g. https://www.mydomain.com -> https://mydomain.com?
Any chance of supporting dynamic meta tags ala https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server?
Looking for a solution based on routes/url.
Thanks for the awesome buildpack
Thanks for the awesome buildpack!
I know this is stated as the create react app buildpack, but it is useful for other react apps.
I am currently using it on my own react app and the requirements are that it needs to be static and that it has build command which runs webpack (or browserify I guess).
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.