I'm using a parcel bundler instead of a react-scripts which uses npm run build-prod instead of npm run build but it doesn't create a build folder instead they all in a dist folder so i changed the deploy script in the package.json to "deploy": "gh-pages -d dist" instead of the standard "deploy": "gh-pages -d build" which will give an error saying build script is missing , after i tried deploying this to git hub pages but i get an empty screen
"scripts": {
"predeploy": "npm run build-prod",
"deploy": "gh-pages -d dist",
"clean": "rm dist/bundle.js",
"start": "parcel src/index.html",
"build-prod": "parcel build src/index.html"
},
"dependencies": {
"node-sass": "^7.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0"
},
"devDependencies": {
"#babel/core": "^7.18.5",
"#babel/preset-env": "^7.18.2",
"#babel/preset-react": "^7.17.12",
"gh-pages": "^4.0.0",
"parcel-bundler": "^1.12.5",
"prettier": "^2.7.1"
}
According the the Parcel docs here, you need to specify the --dist-dir flag.
Change your "build-prod" script to this:
"build-prod": "parcel build src/index.html --dist-dir build"
Now the output directory for your parcel build will go to build instead of dist so you can change your "deploy" script back to this:
"deploy": "gh-pages -d build"
Related
My react app fails to start when running in Heroku. I am using Luke McDonald's startup page located here: https://github.com/lukemcdonald/holly-react
Here is what my package.json scripts section looks like:
"scripts": {
"build": "npm run build:css && vite build",
"build:css": "postcss styles/tailwind.css -o src/assets/styles.css",
"dev": "concurrently \"npm run dev:css\" \"vite\"",
"dev:css": "postcss styles/tailwind.css -o src/assets/styles.css --watch",
"preview": "vite preview",
"predeploy": "npm run build",
"start": "concurrently \"npm run dev:css\" \"vite\"",
"deploy": "gh-pages -d dist"
},
When I push to heroku, the build succeeds. But it to fail to start:
app[web.1]: /tmp/start-497558d9.sh: 1: concurrently: not found
heroku[web.1]: Process exited with status 127
heroku[web.1]: State changed from starting to crashed
I added concurrently to my dependencies, to no avail
"dependencies": {
"clsx": "^1.1.1",
"firebase": "^9.9.3",
"gh-pages": "^4.0.0",
"postcss-import": "^14.1.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-router-dom": "^6.3.0",
"scrollreveal": "^4.0.9",
"concurrently": "^7.3.0"
},
"devDependencies": {
"#tailwindcss/forms": "^0.5.2",
"#tailwindcss/typography": "^0.5.2",
"#vitejs/plugin-react": "^1.3.2",
"autoprefixer": "^10.4.7",
"concurrently": "^7.3.0",
"eslint": "^8.16.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.30.0",
"eslint-plugin-react-hooks": "^4.5.0",
"postcss": "^8.4.14",
"postcss-cli": "^9.1.0",
"prettier": "^2.6.2",
"prettier-plugin-tailwindcss": "^0.1.11",
"tailwindcss": "^3.0.24",
"vite": "^2.9.9"
}
Don't try to run concurrently \"npm run dev:css\" \"vite\" on Heroku. That command is intended for development environments (such as your local machine).
You are likely trying to serve the production build of your app, which does not require concurrently at all. Just run npm run preview, which runs vite preview, which -- as of Vite 3 -- uses sirv to serve the build output directory.
However, you don't necessarily need to use vite preview. You could use any other HTTP server pointed at the build output directory (e.g., zeit/serve or http-server).
I am trying to deploy a React app with Parcel on Github Pages.
I have deployed it but the app is not actually rendering on the screen. I don't understand what I am doing wrong.
Package.json
{
"name": "pet-adoption-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"homepage": "https://github.com/junaidshaikh-js/pet-adoption-app",
"scripts": {
"format": "prettier --write \"src/**/*.{js,jsx}\"",
"lint": "eslint \"src/**/*.{js,jsx}\" --quiet",
"dev": "parcel src/index.html --public-url /pet-adoption-app/",
"predeploy": "npm build",
"deploy": "gh-pages -d dist"
},
"repository": {
"type": "git",
"url": "git+https://github.com/junaidshaikh-js/pet-adoption-app.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/junaidshaikh-js/pet-adoption-app/issues"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.13.4",
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#babel/plugin-transform-runtime": "^7.16.4",
"#babel/preset-env": "^7.13.5",
"#babel/preset-react": "^7.12.13",
"eslint": "^8.3.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"gh-pages": "^3.2.3",
"parcel": "^1.12.3",
"prettier": "^2.4.1"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0"
}
}
Here is the live deployed link: https://junaidshaikh-js.github.io/pet-adoption-app/
Here is the Github Repo: https://github.com/junaidshaikh-js/pet-adoption-app
After hours of research, I found out that when you ae using react-router-dom > v4 and deploying to a sub-domain (for example //pet-adoption-appk in your case) you have to provide a basename attribute on the <BrowserRouter> with the sub-domain value. in your case you have to pass it like this <BrowserRouter basename="/pet-adoption-app">
As #tromgy pointed out in the discussion, the root of the problem is that the generated html pages contain / characters before the url references to the various assets.
For example, if you have an html file at domain.com/subfolder/index.html that contains <script src="/script.js">, the browser will look for the script at domain.com/script.js instead of domain.com/subfolder/script.js.
If you instead remove the / (e.g. <script src="script.js">) the browser will look for the script relative to the location where the html file was (e.g. domain.com/subfolder/script.js), which is probably what you want.
Parcel supports a --public-url option to accomplish this (see cli docs and target docs). By passing a . as a parameter, you can tell parcel to omit the / from the output. So your build script would be something like:
parcel build src/index.html --public-url .
(strangely, in your question, you showed a dev command that used this option, but I didn't see that code in the example repo)
Another thing to note is that you're using the unsupported v1 version of parcel. I upgraded you to v2 and fixed the issue above in this PR.
Step 1
git remote add origin [YOUR REPO LINK]
git add -A
git commit -m "Initial commit"
git push -u origin main
Step 2
"homepage": "https://[USERNAME].github.io/[YOUR REPO NAME]",
Step 3
npm install gh-pages --save-dev
Step 4
Add a script in your package.json file
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
Run the command given Below
npm run deploy
I have an electron/react application which works fine in development mode, but when it comes to building and packaging it gives this error when i run yarn electron-pack
$ build -mw
/bin/sh: build: command not found
error Command failed with exit code 127.
this happened after i installed some additional packages ( the packaging before that worked fine )
this is my scripts in package.json file :
"scripts": {
"start": "rescripts start",
"build": "rescripts build",
"test": "rescripts test",
"eject": "react-scripts eject",
"electron-dev": "concurrently \"BROWSER=none yarn start\" \"wait-on
http://localhost:3000 && electron .\"",
"postinstall": "electron-builder",
"preelectron-pack": "yarn build",
"electron-pack": "build -mw"
},
and this is the devDependencies
"devDependencies": {
"#rescripts/cli": "^0.0.16",
"#rescripts/rescript-env": "^0.0.14",
"concurrently": "^6.2.0",
"electron": "^13.1.8",
"electron-builder": "^22.11.7",
"typescript": "^4.3.5",
"wait-on": "^6.0.0"
}
a temporary solution that i found is removing node modules files and run npm install
rm -rf node_modules
npm install
I have a react project bootstrapped using the CRA Cli. I have travis for CI and deploying on Heroku. The project has been running for about a month now. The last build was about 25 days ago and it passed. Today, when I visit this app, it is breaking. When I rebuild and re-deploy, the rebuild works, deployment too to some extent and the error
Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
Since the last push 25 days ago, I have merged anything into master, so I am quite certain that there is no code that got to source control and messed things up.
This is my package.json (just the relevant parts)
"dependencies": {
"axios": "^0.18.0",
"leaflet": "^1.3.1",
"lodash": "^4.17.5",
"npm-run-all": "^4.1.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-leaflet": "^1.9.0",
"react-redux": "^5.0.7",
"react-scripts": "1.1.1",
"react-tabs": "^2.2.1",
"react-tabs-redux": "^2.0.1",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"socket.io-client": "^2.1.0",
"thunk": "0.0.1"
},
"scripts": {
"start": "npm-run-all -p watch-css start-js",
"build": "npm-run-all build-css build-js",
"start-js": "react-scripts start",
"build-js": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"test-ci": "CI=true react-scripts test --env=jsdom --ci",
"eject": "react-scripts eject",
"build-css": "node-sass-chokidar src/ -o src/ --quiet",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"lint": "./node_modules/.bin/eslint src/**/*.js",
"prettier": "prettier --write --tab-width=2 --single-quote=true \"src/**/*.{js,scss}\""
},
And this is my index.js (relevant parts only)
if (process.env.NODE_ENV === 'development') {
middleware = [logger];
}
const store = createStore(
rootReducer,
composeWithDevTools(applyMiddleware(thunk, ...middleware))
);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
And the Procfile
web: npm i -g serve && npm run build && serve -s build
And this is the last build status
Then the logs from Heroku
From the logs, it says
INFO: Accepting connections at http://localhost:3000
Questions
What am I doing wrong here?
How come that connections are accepted at localhost but I am running a production bundle?
How do I fix it?
Please check your create server code you must have missed process.env.PORT
Heroku assigns a port dynamically which it pulls from env variable. Your code should be like this :
.listen(process.env.PORT || 3000)
I'm just trying to do the first angular.js tutorial on the official website. When I try to run npm install from my project directory I get the following error.
My package.json file is given below.
{
"version": "0.0.0",
"private": true,
"name": "angular-phonecat",
"description": "A tutorial application for AngularJS",
"repository": "https://github.com/angular/angular-phonecat",
"license": "MIT",
"devDependencies": {
"karma": "^0.12.16",
"karma-chrome-launcher": "^0.1.4",
"karma-jasmine": "^0.1.5",
"protractor": "~1.0.0",
"http-server": "^0.6.1",
"tmp": "0.0.23",
"bower": "^1.3.1",
"shelljs": "^0.2.6"
},
"scripts": {
"postinstall": "bower install",
"prestart": "npm install",
"start": "http-server -a 0.0.0.0 -p 8000",
"pretest": "npm install",
"test": "node node_modules/karma/bin/karma start test/karma.conf.js",
"test-single-run": "node node_modules/karma/bin/karma start test/karma.conf.js --single-run",
"preupdate-webdriver": "npm install",
"update-webdriver": "webdriver-manager update",
"preprotractor": "npm run update-webdriver",
"protractor": "protractor test/protractor-conf.js",
"update-index-async": "node -e \"require('shelljs/global'); sed('-i', /\\/\\/##NG_LOADER_START##[\\s\\S]*\\/\\/##NG_LOADER_END##/, '//##NG_LOADER_START##\\n' + cat('bower_components/angular-loader/angular-loader.min.js') + '\\n//##NG_LOADER_END##', 'app/index-async.html');\""
}
}
Can someone help me to solve this problem. Thanks.
The messages are warnings, sometimes that just happens, and they often are uneeded anyway.
As long as the main components, Bower, Protractor, Karma etc are working, then I would try just carry on with the tutorial.
You can test they are working by running their commands, e.g.
./node_modules/.bin/bower help
But
I think one issue I had with npm and running those commands is that they dont just run like the angular tutorial says.
So where the tutorial says, run this:
protractor test/protractor-conf.js
You might have to modify the command to this
./node_modules/.bin/protractor test/protractor-conf.js
Same with bower, karma etc
e.g.
put this in front of the commands
./node_modules./bin
the ./ says run this as a script and the path is so you access the scripts in the node_modules/.bin directories
Update
If you want to run a karma test:
First, make sure you are in the root directory of the project
./node_modules/.bin/karma start test/karma.conf.js --single-run