We Keep Coding

Unable to deploy my react SPA on Github Pages & AWS Amplify with the same package.json

I have this Tic-Tac-Toe game. It is already deployed to AWS Amplify. I also wanted it to deploy on Github Pages, so I added the required scripts & homepage property in package.json. But after deploying it on Github Pages, I am started getting blank screen on my AWS Amplify deployment.
After looking deeper into the issue, I found that the homepage property value is causing the problem. If I remove it or set empty in package.json, my AWS Amplify deployment starts working but Github Pages stops working at the same time & vice-versa.
Here is my how my packae.json looks like:
{
"name": "app-client",
"version": "0.1.0",
"private": true,
"homepage": "https://classhacker.github.io/tic-tac-toe/",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"test": "react-scripts test"
},
...
}
What should I do now? If anybody faced the same problem earlier, please let me know the steps to solve this.

Getting error while runing npm run test in CI

here is my package.json:
{
"name": "cypressautomation",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "/node_modules/.bin/cypress run "
},
"author": "",
"license": "ISC",
"devDependencies": {
"cypress": "^9.2.0",
"mochawesome": "^7.0.1",
"mochawesome-merge": "^4.2.1",
"mochawesome-report-generator": "^6.0.1"
},
"dependencies": {
"cypress-iframe": "^1.0.1"
}
}
I have built some test scripts, and after I saved all files and run npm run test I get the error:
cypressautomation#1.0.0 test > /node_modules/.bin/cypress run
The system cannot find the path specified.

You might be facing issues with relative/absolute path conventions.
First let us cover the basis. From the command line at the folder where the package.json file is located, run npm install for the packages to be downloaded into the local node_modules folder.
You could change the command on package.json to:
"test": "cypress run"
this way we leave npm to figure out where cypress is located (will be in the node_modules folder and npm 'knows' about it)
then try the test command again:
npm run test

I hope you are trying to run project in correct path. if your npm run test is not working, first in command prompt try running command then add the same in package json.
I use this coomand to run project ./node_modules/.bin/cypress run

Running npm run compile:sass returns error: npm ERR! missing script: compile:sass

The sass folders and files are in the correct place. What is wrong?
I have the package.json which I created, with this code in there.
{
"name": "starter",
"version": "1.0.0",
"description": "starter file",
"main": "index.js",
"scripts": {
"compile:sass": "node-sass sass/main.scss css/style.css -w"
},
"author": "Nez",
"license": "ISC",
"devDependencies": {
"node-sass": "^4.12.0"
}
}
As you can see the script is called compile sass when I try to run it it keeps giving the error
npm ERR! missing script: compile:sass
I have the sass compiler installed already as a dev dependency

I had this happen as well. The only way I could fix it was to move my files out of my dropbox folder on an external hard drive and move them to my main computers' hard drive. I think it has something to do with Dropbox, but I'm not sure.

One of your sass files has a syntax error
eg.
file 1 has
background: %pink
the %pink value is undefined you should check your files if %pink* is implemented

I had the same issue and tried everything until I simply saved the project files within my code editor and then all of a sudden it worked.

Add this to your code all you need to do is add npx before your node
I.e. npx node...
Then go to your terminal to that directory and run this command npm run compile:sass
Hope this works...because it worked for me will work for you too

I think you should check your file path

After 3 years!
for me it's solved by rewriting the package.json "scripts" line :
"compile:sass": "node-sass sass/main.scss css/style.css -w"

Go to package.json
Add below lines
"scripts": {
"sass": "sass sass/main.scss css/style.css",
"test": "echo \"Error: no test specified\" && exit 1"
},
For compilation use command:
npm run sass
Note: I have used main.scss as source file name

How to Build NextJS Project on Local without Now

I need to build My React NextJS Project on local to host it at Appache server, when I run command run build it did not generate build folder.
I R & D on it, everyone recommend ZEIT – Next.js build with Now but it build project on cloud but I need a build for my local appache server. So please help me out.
Here is an my of package.json:
......
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "next start"
},
......

After so many struggle, I found answer of my question I have to add following line in my package.json under scripts:
"scripts": {
......
"export": "npm run build && next export"
.....
},
Basically I my case, npm run build && next export was complete required command to build NextJS project. So after adding this into package.json you just need to run in terminal:
npm export
and it will generate complete build for nextjs project.

You have a package.json script called build that runs next build. The next build command by default builds the app for development, which doesn't create a production bundle.
In order to create the production bundle on your local machine, you need to specify that you're on production environment through NODE_ENV=production (this is done automatically in now and other deployment servers). Basically, your package.json would end up:
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "next start",
"prod:build": "NODE_ENV=production npm run build"
},
You can replace npm run build with next build directly if you prefer that.

Bundle.js isn't found when deployed to gh-pages

I used react-create-app for building my application and deployed it to github-pages while strictly following the instructions I was given during the process. When I load the page I get an error in the console: "Failed to load resource: the server responded with a status of 404" (Bundle.js). The app runs fine when I run it using "npm run start" locally, finding all paths, but something shady is going on on github-pages. Can somebody help me fix this issue?

This is the official documentation on how to deploy your React app to Github Pages. You need to do the following:
In package.json set homepage to
{
"homepage": "https://myusername.github.io/my-app",
}
Install gh-pages
yarn add gh-pages
Add deploy and predeploy run scripts to package.json
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
Deploy it
yarn run deploy
The gh-pages branch will be automatically created, and the generated files pushed to this branch.
Relative path for "homepage"
I had 404: Not Found errors for the generated Javascript and CSS files, and it was only solved when I set the homepage (in package.json) value to
"homepage" : "."

I think you'd have to set the "homepage" variable in your package.json
and this would be your npm script command in package.json
"homepage": "https://<username>.github.io/<repo_name>/"
....
"scripts": {
...
"deploy": "npm run build&&gh-pages -d build"
...
}
More here in the docs : https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#building-for-relative-paths