I'm trying to deploy a simple project React + NodeJS project to app Engine. Both the frontend and backend are deployed within the same instance.
It currently works with HTTP (I have to manually change the URL to http when accessing it), however whenever I try changing the URL to HTTPS in my code, I get error
GET https://sunlit-form-338718.nn.r.appspot.com/static/js/main.c2ecd1cd.js net::ERR_ABORTED 404.
Why is it that I get this error only when I change my code to https? I run npm run build in client directory after every change.
in server.js
app.use(express.static(path.join(__dirname, "../client/build")));
app.use(express.static(__dirname + "../client/public/"));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json())
app.use(express.static('dist'));
app.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "https://sunlit-form-338718.nn.r.appspot.com");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
In App.js
function hey(){
axios.get(
"https://sunlit-form-338718.nn.r.appspot.com/users", {withCredentials:true}).then(res =>{console.log(res)})
}
In app.yaml
runtime: nodejs14
env: standard
env_variables:
INSTANCE_CONNECTION_NAME: sunlit-form-338718:northamerica-northeast1:sql-scratch-pw-root
# [END gae_mysql_env]
handlers:
- url: /.*
script: auto
Project structure
Projet
|
+-- app.yaml
|
+-- .gcloudignore
|
+-- package.json
|
+-- package-lock.json
|
+-- client
| |
| +-- build ...
| |
| +-- node_modules ...
| |
| +-- public ...
| |
| +-- node_modules ...
| +-- package.json
| |
| +-- package.lock-json
|
+-- server
| |
| +-- server.js
| +-- node_modules
|
+-- node_modules
| |
+ |-- dir 4.1
EDIT: More code
Package.json in client
{
"name": "client",
"version": "0.1.0",
"proxy": "http://localhost:8080",
"homepage": ".",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.25.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Package.json in root folder
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server/server.js",
"build": "react-scripts build",
"dev": "server/node_modules/.bin/nodemon server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"nodemon": "^2.0.15"
},
"dependencies": {
"express": "^4.17.2",
"mysql": "^2.18.1",
"mysql2": "^2.3.3",
"react-scripts": "^5.0.0"
}
}
index.html in build directory
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="icon" href="./favicon.ico"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="theme-color" content="#000000"/>
<meta name="description" content="Web site created using create-react-app"/>
<link rel="apple-touch-icon" href="./logo192.png"/>
<link rel="manifest" href="./manifest.json"/>
<title>React App</title>
<script defer="defer" src="./static/js/main.836a6a76.js"></script>
<link href="./static/css/main.e6c13ad2.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
asset-manifest.json in build directory
{
"files": {
"main.css": "./static/css/main.e6c13ad2.css",
"main.js": "./static/js/main.836a6a76.js",
"static/js/787.db9b214f.chunk.js": "./static/js/787.db9b214f.chunk.js",
"index.html": "./index.html",
"main.e6c13ad2.css.map": "./static/css/main.e6c13ad2.css.map",
"main.836a6a76.js.map": "./static/js/main.836a6a76.js.map",
"787.db9b214f.chunk.js.map": "./static/js/787.db9b214f.chunk.js.map"
},
"entrypoints": [
"static/css/main.e6c13ad2.css",
"static/js/main.836a6a76.js"
]
}
full server.js
const express = require('express')
const app = express()
const path = require('path');
const bodyParser = require('body-parser')
const db = require('../server/database')
const mysql = require("mysql2");
app.use(express.static(path.join(__dirname, "../client/build")));
app.use(express.static(__dirname + "../client/public/"));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json())
app.use(express.static('dist'));
app.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "https://sunlit-form-338718.nn.r.appspot.com");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
app.get('/api', (req, res) => {
res.json({"users":["userOne", "userTwo", "userThree"]})
})
app.get('/users', (req, res) => {
console.log("hi");
})
app.get('/*', function(req,res){
res.sendFile(path.join(__dirname, 'build', 'index.html'));
})
app.listen(process.env.PORT || 8080, () => console.log(`Listening on port ${process.env.PORT || 8080}!`));
