We're trying to deploy our MERN stack app to Google's App Engine. Before we were using flex environment, but to enable redirecting to https every time, we switched to Standard env. After this change, we encountered a few problems, such as: sometimes our main ('/') page doesn't load, for some users the website remains unsecured and:
Uncaught SyntaxError: Unexpected token '<'
What could be the solution to fix all of these problems?
Below I'm attaching code snippets.
Our code structure looks like:
client
| - build
| - src
| - package.json
| - ...
routes/api
package.json
server.js
app.yaml
...
client/package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:5000",
"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"
]
}
Package.json:
"scripts": {
"client-install": "npm install --prefix client",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client",
"test": "jest"
},
App.Yaml:
runtime: nodejs12
automatic_scaling:
max_instances: 2
resources:
cpu: .5
memory_gb: 0.5
disk_size_gb: 10
handlers:
- url: /.*
secure: always
redirect_http_response_code: 301
script: auto
- url: /
static_files: client/build/index.html
upload: client/build/index.html
secure: always
- url: /
static_dir: client/build
secure: always
In our server.js we have:
if (process.env.NODE_ENV === 'production') {
console.log('production')
app.use(express.static(path.join(__dirname, '/client/build')))
app.get('/*', (req, res) => {
res.sendFile(path.join(__dirname, '/client/build/index.html'))
})
}
const port = process.env.PORT || 5000
app.listen(port, () => console.log(`Server running on port ${port}`))
Related
I am trying to figure out why the directory for my build can't be found. I have tried many versions that I found on other pages ./myapp/build, build, ./build/. I have tried cding into the folder. I am hosting my code in AWS CodeCommit.
I am at a loss. I am not a front-end developer, so maybe I am missing something very simple here. It loads locally perfectly fine.
package.json
{
"name": "myapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"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"
]
}
}
amplify.yml
version: 1
frontend:
phases:
# IMPORTANT - Please verify your build commands
preBuild:
commands:
- npm ci
build:
commands:
- echo 'BEFORE BUILD'
- ls
- npm run build
- echo 'AFTER BUILD'
- ls
artifacts:
# IMPORTANT - Please verify your build output directory
baseDirectory: /myapp/build
files:
- '**/*'
cache:
paths:
- node_modules/**/*
I had luck following this tutorial integrating github and amplify. Also here is my buildspec for reference as well : )
version: 1
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- npm run build
artifacts:
baseDirectory: build
files:
- '**/*'
cache:
paths:
- node_modules/**/*
No webpack config since I have not ejected. I'm seeing an empty root div.
This is my package.json
{
"name": "ttt",
"version": "0.1.0",
"homepage": "https://tictactoezz.herokuapp.com/",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"express": "^4.17.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.2"
},
"scripts": {
"start": "node server/server.js",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
}
}
This is my server/server.js
const path = require('path');
const express = require('express');
const app = express();
const publicPath = path.join(__dirname, '../public');
const port = process.env.PORT || 3000;
app.use('/static', express.static(publicPath));
app.get('*', (req, res) => {
res.sendFile(path.join(publicPath, 'index.html'));
});
app.listen(port, () => {
console.log('Server is up!');
});
Please help! Unlike other questions posted here, I do not see any errors in the console.. just a blank screen. It works on localhost:3000
You don't need to have server.js for heroku deployment if you use create-react-app. In case you insist to have server.js, it should point build folder, not public folder. You need to run npm run build first and then server.js should server contents on build folder. You can add a new script for heroku-post-build.
...
"heroku-postbuild": "npm run build"
...
It doesn't look like your start script includes building the react app. Can you try this?
"scripts": {
"prestart": "npm run build",
"start": "node server/server.js",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
I have struggled with the same problem for two days. Express&React.js app was working fine on localhost but not on heroku. I added this to server.js and problem solved.
app.use(express.static(path.join(__dirname, './frontend/build')));
My react.js folder had the name "frontend" and it was at the same level with my server.js file. And don't remove build name and dont change it to any other name. build is a default folder for your react app to launch.
I try to deploy my react web app to github pages but when i can't find website online
In the console, it says that the app is ready to publish and i should run command npm run deploy but i see the same message every time i run that command
Here's package.json file:
{
"name": "weather-app",
"version": "0.1.0",
"private": true,
"homepage": "http://shotiko-forecast.github.io/weather",
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^7.1.3",
"react-scripts": "1.1.4",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0"
},
"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 op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
install dependencies to the project.
> npm i gh-pages
In your package.json add script and homepage
"homepage": "https://username.github.io/repo-name",
"scripts": {
"deploy": "gh-pages -d build"
}
run build Script to build for production
npm run build
run deploy script to deploy your code to the-pages it automatically push on git-hub gh-pages branch and auto-selected on gh-pages branch you can check settings > GitHub pages.
npm run deploy
now it time to check your
https://username.github.io/repo-name
The name of your React app is weather-app. I assume that the github repository for the app is named as weather-app. There is an error in your package.json file. The homepage property is set incorrectly.
It should be set as,
"homepage": "http://<<github-user-name>>.github.io/<<github-repo-name>>"
In your case, change weather to weather-app and everything should work fine
Using CRA, server is opened after about 2 minutes!
Uninstall create-react-app
Uninstall node(npm), yarn clearly
Install node by using nvm
Install yarn using npm
npx create-react-app test
yarn test
same result...
node version: v12.10.0
yarn version: 1.17.3
npx version: 6.10.3
When yarn start,
Starting the development server...
after about 2 minutes...server open!
Before 2 week, It was so fast!
(+ macOS version: 10.14.2, 2015 early, RAM 8G)
How can I speed up my server opening?
It's CRA package.json
{
"name": "test",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-scripts": "3.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
}
}
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/