So, I want to deploy a react app that is inside the docs/ folder. Here is the repository CVNN-PolSAR).
This is not my main app, so I want it to be in another subfolder.
All instructions I find on the internet are the same, add a "homepage" key and
scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
to the package.json and then run npm run deploy
I get the following output:
> cvnn-polsar#0.1.0 predeploy
> npm run build
> cvnn-polsar#0.1.0 build
> react-scripts build
Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist#latest --update-db
Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist#latest --update-db
Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
Compiled with warnings.
src/components/HtmlImgContainer.jsx
Line 12:41: Array.prototype.map() expects a value to be returned at the end of arrow function array-callback-return
Line 13:80: Expected '!==' and instead saw '!=' eqeqeq
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
File sizes after gzip:
52.4 kB build/static/js/main.4bd5577d.js
726 B build/static/css/main.8315cbb6.css
The project was built assuming it is hosted at /CVNN-PolSAR/.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
Find out more about deployment here:
https://cra.link/deployment
> cvnn-polsar#0.1.0 deploy
> gh-pages -d build
Published
I thought the script was due to create a gh-pages branch, but it didn't happen. I tried adding the docs path to the "homepage" string, and it didn't help. Also, at some point, I managed to have the readme.md of the docs file as the website.
What can I do? Is it possible?
Related
first of all I created the repository. then I when to the terminal and typed git init, then git add ., and
then I took these commands from github and pasted in terminal:
git commit -m "first commit" git branch -M main git remote add origin https://githubl.com/igora45/ReactShoppingEcommerce.git git push -u origin main
then I installed the: npm i gh-pages --save-dev.
then I went to my package.json file and put the "homepage": "https://igora45.github.io/ReactShoppingEcommerce", and then in "scripts" in package.json still, I put:
"predeploy": "npm run build", "deploy": "gh-pages -d build",
and then, went to the terminal and typed git add ., git commit -m "deploy", and then git push, and finally the npm run deploy.
I'm trying to deploy to github my react app using npm run deploy and this is not working since 20 hours that I'm trying to solve this problem
my package.json
PACKAGE.JSON
in my terminal when I write npm run deploy:
TERMINAL
My folders, and files
I tried to delete the "dist" and "dist-ssr" from my .gitignore but I was not able to solve this problem.
and I added the "heroku-postbuild": "cd client && npm install && npm run build" to my scripts in my package.json, but still not works.
I also tried to deploy to netlify, but I have got SEVERAL errors.
When you say gh -d build it means you want to deploy the build folder.
But I see that your output folder is dist and NOT build
Try changing it as gh-pages -d dist
Also check that you have enabled gh-pages in your GitHub project repo.
Go to settings tab
Select pages option from the side menu
Set deployment branch as gh-pages instead of master
See this answer on custom build output path
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 am trying to deploy a 'hello world' react app to github pages but it's not working. instead i see 404.
I follow the steps here - https://create-react-app.dev/docs/deployment#github-pages-https-pagesgithubcom
first I created a repo on github called test-react-deploy and cloned it into ~/
than I created a new react app:
cd /tmp
npx create-react-app test-react-deploy
cd test-react-deploy
than I moved it's content (without the .git folder) into my application repo:
cp -r .gitignore node\_modules package.json public src yarn.lock ~/test-react-deploy
cd ~/test-react-deploy
I added the following lines to package.json:
"homepage": "https://oren.github.io/food",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
and I installed gh-pages:
npm install --save gh-pages
I pushed everything to github and deploy with:
npm run deploy
But I see 404 when I go to https://oren.github.io/food
(BTW, I don't have a folder called food in my github pages)
Thanks!
It seems you are creating your gh-page under your test-react-deploy project, so you should see what is happening here: https://oren.github.io/test-react-deploy/
I want to run npm project, which was cloned from git, on my computer, but usual command like npm start did not work. Can someone give some tutorial how to start such projects or share some information.
Check the readme.md of the git repo for instructions.
But from experience, the cloned project should have a package.json.
In terminal at the root of the project run npm install to install necessary dependencies.
Then check if npm start is set up properly inside the 'Scripts' object in your package.json
Finally run npm start
This should do it for you, but most attention should paid to instructions inside README.md provided by developer.
Inside package.json
edit "start" to this code:
"scripts": {
"start": "react-scripts start",
For special reasons I want to share the package.json file between two folders web (the react app) and mobile:
▸ mobile/
▸ node_modules/
▾ web/
▸ public/
▸ src/
README.md
package-lock.json
package.json
yarn.lock
In my package.json file I've added this:
"web-start": "react-scripts start", under scripts. However, when I run it in the root folder (/Users/edmund/Documents/src/banana-client) I get this:
➜ banana-client git:(master) ✗ yarn web-start
yarn web-start v0.24.6
$ react-scripts start web
Could not find a required file.
Name: index.html
Searched in: /Users/edmund/Documents/src/banana-client/public
error Command failed with exit code 1.
Is there a way I can add a root directory?
For this particular use case, I would recommend you to go ahead with Yarn workspaces.
Using Yarn workspaces, you can have multiple projects inside a single repository with a main package.json file at root level that projects share and project level package.json that they don't share and use individually.
Running yarn install will install all your dependencies at the root level, which is configurable if you don't want some packages to install at root.
You can have scripts in root that can help you run internal projects in that workspace.
So your final project structure will look something like this:
- project_root
- web
- node_modules
- package.json
- mobile
- node_modules
- package.json
- node_modules
- package.json
Learn more about Yarn workspaces here: https://yarnpkg.com/lang/en/docs/workspaces/
Look at this example here to understand it's basic usage:
https://github.com/pedronauck/yarn-workspaces-example
I'd agree that Yarn workspaces may help you accomplish what you are after. Otherwise, you will have to eject as the configuration for the appIndexJs (set to /src/index.js) is set in config/paths.js in the react-scripts package. Once ejected, you can modify the config/paths.js variable appIndexJs to accommodate a varying appIndex.
Building on above answer just do:
"web-start": "cd web && npm start"
Adding this workaround solved the same problem for me:
"web-start": "cd web && react-scripts start"