I've just tried deploying my react js app with github pages. it works fine just a few seconds ago, then I edited a few text records in the database, then when I refreshed the page it suddenly changed into the "Getting Started with Create React App" page even though I haven't changed anything in the code.. why is that? how can I fix it?
this is the content of the .env file
...
#--------------------------------------------------------------------
# ENVIRONMENT
#--------------------------------------------------------------------
CI_ENVIRONMENT = development
#--------------------------------------------------------------------
# APP
#--------------------------------------------------------------------
app.baseURL = 'https://myapp.example.com/'
# app.forceGlobalSecureRequests = false
...
#--------------------------------------------------------------------
# DATABASE
#--------------------------------------------------------------------
database.default.hostname = localhost
database.default.database = mydbname
database.default.username = mydbusername
database.default.password = mydbpassword
database.default.DBDriver = MySQLi
# database.default.DBPrefix =
...
this is the content of package.json file:
{
"homepage": "https://example01.github.io/project01",
"name": "project01",
...
"scripts": {
"start": "react-scripts start",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
...
"devDependencies": {
"gh-pages": "^3.2.3"
}
}
Related
In my react project I wanna use sweetalert library like that import Swal from "sweetalert2/src/sweetalert2"; instead of using like that import Swal from "sweetalert2"
That's why instead of changing it everywhere, i wanted to manage it from webpack. So I wrote alias for it
resolve: {
alias: {
'sweetalert': path.resolve(__dirname,'./node_modules/sweetalert2/src/sweetalert2.js'),
},
},
And tried to import the library, but it seems doesn't work. Maybe my webpack.config.js file doesn't work.
import Swal from "sweetalert";
I also tried like that;
'sweetalert': 'sweetalert2/src/sweetalert2.js',
I am using
react 17.0.2
webpack 5.65.0
And the scripts file in package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"analyze": "cross-env REACT_APP_INTERACTIVE_ANALYZE=1 npm run build",
"eject": "react-scripts eject",
"lint": "eslint src",
"lint:fix": "npm run lint -- --fix",
"format": "prettier --write \"src/**/*.{js,css,scss,html}\"",
"rtl": "webpack"
},
Note: I named it 'sweetalert' for testing.
Why is it when i run npm run build in reactjs i encounter missing files?
this is the error i get
jsconfig.js
{
"compilerOptions": {
"baseUrl": "/"
},
"include": [
"src"
]
}
UPDATE
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"test:cov": "npm test -- --coverage --watchAll=false",
"test:debug": "react-scripts --inspect-brk test --runInBand",
"eject": "react-scripts eject",
"changelog": "auto-changelog --starting-version 3.0.0 --commit-limit false --hide-credit"
},
I am very new to development with reactjs. I am using the react-scripts library (using an existing react app) and have the following package.json script:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint src/**/*.{js,jsx}",
"lint:fix": "eslint src/**/*.{jsx,js} --fix"
}
I understand that when I run npm run start, the library will automatically start the server on http://localhost:3000. Previously, I was using express-js to start my server and need to add the following middleware in my new app:
const { setup } = require(‘radiks-server’);
setup({mongoDBUrl:"...." }).then((RadiksController) => {
app.use(’/radiks’, RadiksController);
});
app.listen(port);
console.log("Listening on port ", port);
Where should I add this in the new app such that the react-scripts library knows to use this middleware when it starts its server on http://localhost:3000.
Thank You.
I followed all the steps for deploying my React App , but it deploys a New React App on Github and My Components and My Code is not there .
I added "homepage" and "predeploy" , "deploy" in my Package.json file but when those files got on github , it disappeared .
Here is link to Github repository : https://github.com/cyumair/smartbrainapp
//This is my Package.json
{
"homepage": "https://github.com/cyumair/smartbrainapp",
"name": "final",
"version": "0.1.0",
"private": true,
"dependencies": {
"clarifai": "^2.9.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1",
"react-tilt": "^0.1.4",
"tachyons": "^4.11.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^2.0.1"
}
}
//"predeploy" and "deploy" got disappeared When Uploaded on Github
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
your .gitignore file currently ignores the build folder. that's why your files did not get pushed onto your github repo.
# production
# /build <= comment out this line
The Problem Is Solved By Changing # production
# /build
to # build / in .gitignore file
and changing "homepage" : "" in package.json file.
And then Running Following Commands In Console :
$git add .
$git status (This showed that my missing files were new and needed commit )
$git commit -m "adding the missing files "
$git push -u origin master
$npm run deploy
I Deleted The Old Repository And Applied The Same Steps on New One , You Can See Working React App at: https://cyumair.github.io/smartbrain/
//package.json file
"homepage":"https://github.com/cyumair/smartbrainapp"
//Changed To
"homepage":"https://cyumair.github.io/smartbrainapp"
//.gitignore file
#production
/build
//Changed To
#production
build/
I have a basic React app. No backend. I want to set it up on github pages. I followed this article, twice. https://medium.freecodecamp.org/surge-vs-github-pages-deploying-a-create-react-app-project-c0ecbf317089
Both times, Github Pages displays the README.md file instead of the index.html file in my public folder. Here is an image of the file directory for the app. Any thoughts?
Here is what I have in package.json if it matters:
{
"name": "react-blog",
"version": "0.1.0",
"private": true,
"homepage": "https://jackseabolt.github.io/react-blog/",
"dependencies": {
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-scripts": "1.0.14"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy" : "npm run build&&gh-pages -d build"
},
"devDependencies": {
"gh-pages": "^1.0.0"
}
}
Your issue is likely that you are using your master branch as the source. In the settings tab on your Github project page, change the source to use the gh-pages branch.
See https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#step-4-ensure-your-projects-settings-use-gh-pages