Google App Engine newbie here.
I've deployed my React app to google, but when I try to preview it I get a 502 error:
Failed to load resource: the server responded with a status of 502 ()
app.yaml:
env: flex
runtime: nodejs
package.json:
{
"name": "react-boilerplate",
"version": "1.0.0",
"description": "Minimal boilerplate for react",
"main": "index.js",
"scripts": {
"start": "node server.js",
"bundle": "./node_modules/.bin/webpack --config webpack.config.js",
"prestart": "npm run bundle"
},
"author": "",
"license": "ISC",
"babel": {
"presets": [
"es2015",
"react",
"stage-2"
]
},
"engines": {
"node": "6.11.0",
"npm": "3.10.10"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.0",
"node-sass": "^4.5.2",
"sass-loader": "^6.0.5",
"style-loader": "^0.16.1",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.4.5"
},
"dependencies": {
"axios": "^0.16.2",
"d3": "^4.9.1",
"express": "^4.15.3",
"pug": "^2.0.0-rc.2",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-redux": "^5.0.5",
"redux": "^3.7.1",
"redux-thunk": "^2.2.0",
"webpack": "^3.3.0"
}
}
webpack.config.js:
var webpack = require('webpack');
module.exports = {
entry: [
'./src/index.js'
],
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: [/\.css$/, /\.scss$/],
exclude: /node_modules/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
historyApiFallback: true
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})
]
}
Running out of ideas. Any help would be awesome!
Figured out the problem. Turns out I needed to move all the modules from devDependencies to dependencies!
Related
I have created a react application from scratch and I'm trying to deploy it on heroku but unfortunately I faced a lot of errors, however I came to the point where I need to add a start script to my package.json file according to the logs of heroku :
npm ERR! Missing script: "start"
I don't know what content to add to my start script command in the package.json because I don't know if it takes additional webpack configuration or not, here is the file :
{
"name": "APPNAME",
"version": "1.0.0",
"description": " web application, etc..",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --mode development",
"build" : "webpack --mode production"
},
"repository": {
"type": "git",
"url": "gitrepo"
},
"author": "LOUKACH EL-Mehdi",
"license": "ISC",
"bugs": {
"url": "ISSUES"
},
"homepage": "readme",
"devDependencies": {
"#babel/cli": "^7.1.0",
"#babel/core": "^7.1.0",
"#babel/preset-env": "^7.1.0",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.2",
"css-loader": "^5.2.7",
"style-loader": "^2.0.0",
"webpack": "^4.46.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.3"
},
"dependencies": {
"aos": "^2.3.4",
"bootstrap": "^5.1.3",
"express": "^4.18.1",
"react": "^18.2.0",
"react-bootstrap": "^2.4.0",
"react-dom": "^18.2.0",
"react-flow-renderer": "^10.3.11"
}
}
I have a webpack.config.js file that allows me to parse the bundle.js file :
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
mode: "development",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: "babel-loader",
options: { presets: ["#babel/env"] }
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
resolve: { extensions: ["*", ".js", ".jsx"] },
output: {
path: path.resolve(__dirname, "dist/"),
publicPath: "/dist/",
filename: "bundle.js"
},
devServer: {
static : {
directory : path.join(__dirname, "public/")
},
port: 3000,
devMiddleware:{
publicPath: "https://localhost:3000/dist/",
},
hot: "only",
},
plugins: [new webpack.HotModuleReplacementPlugin()]
};
P.S : after browsing the internet, I found out about an express file can be added to the root directory of the project, please let me know if this is the way to go to deploy the application on heroku, thank you !
I have created a react redux front end app. The app is working perfectly fine using node CLI and accessible using localhost:3050 or localhost:8080. However, if I try to run production build using github pages the page only renders partially. The same is observed if I open the production index.html file directly in the browser. I have searched for hours but not able to find the any clue. Here is the github repo and the public url of the project. Any help would be deeply appreciated.
Here is some of the configuration and package files
package.json
{
"name": "items-random-rater",
"version": "0.1.0",
"private": true,
"author": "Muhammed Salman Shamsi",
"dependencies": {
"axios": "^0.19.0",
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.3.1",
"lodash": "^4.17.15",
"nodemon": "^1.19.1",
"popper.js": "^1.15.0",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-redux": "^7.1.1",
"react-router-dom": "^5.0.1",
"react-scripts": "3.1.1",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "nodemon server.js",
"test": "mocha --require babel-polyfill --require babel-core/register --require ./test/withDom.js --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm run test -- --watch",
"clean": "rimraf public",
"build": "NODE_ENV=production npm run clean && webpack -p",
"serve": "webpack-dev-server",
"deploy": "npm run build && gh-pages -d public"
},
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.10.2",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"chai": "^4.2.0",
"chai-jquery": "^2.1.0",
"css-loader": "^1.0.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"eslint": "^5.13.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4",
"express": "^4.17.1",
"gh-pages": "^2.1.1",
"html-webpack-plugin": "^3.2.0",
"jquery": "^3.4.1",
"jsdom": "^15.1.1",
"mini-css-extract-plugin": "^0.4.1",
"mocha": "^6.2.0",
"node-sass": "^4.9.2",
"postcss-loader": "^2.1.6",
"redux-mock-store": "^1.5.3",
"rimraf": "^2.7.1",
"sass-loader": "^7.1.0",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.7",
"webpack-dev-middleware": "^3.7.0",
"webpack-dev-server": "^3.8.0"
}
}
webpack.config.json
var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const env = process.env.NODE_ENV;
const VENDOR_LIBS = [
"lodash","react","react-dom","react-redux",
"redux","axios"
];
module.exports = {
mode: env || 'development',
entry: {
bundle: ['babel-polyfill','./src/index.js'],
vendor: VENDOR_LIBS
},
output: {
path: path.join(__dirname, 'public'),
filename: '[name].[chunkhash].js'
},
module: {
rules: [
{
use: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
use: ['style-loader', 'css-loader'],
test: /\.css$/
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['env','react','stage-2']
}
}
]
},
{
test: /\.scss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
]
},
{
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
loader: 'url-loader?limit=100000'
}
]
},
devtool: 'inline-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
publicPath: '/public/',
compress: true,
port: 8080
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'style.[contenthash].css'
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})
]
};
I’m having below issue when running build function using web pack, can you please have a look? npm build、 delete node_modules、update node.js version. Please help me.
webpack.config.js
var webpack = require('webpack');
var path = require('path');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
var node_modules = path.resolve(__dirname, 'node_modules');
var pathToReact = path.resolve(node_modules, 'react/react');
var pathToReactDOM = path.resolve(node_modules, 'react-dom/index')
module.exports = {
devtool: 'eval-source-map',
devServer: {
/*headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'
},*/
historyApiFallback: true,
hot: true,
inline: true,
contentBase: './webapp/build',
progress: true,
port: 8000,
proxy: {
'\*': {
//target: 'http://10.10.2.124:8082',
target: 'http://10.10.1.89:8080',
secure: false
}
}
},
entry: [
'webpack-dev-server/client?http://localhost:8000',
'webpack/hot/dev-server',
path.resolve(__dirname, 'react/main.js')
],
output: {
path: __dirname + '/webapp/build',
publicPath: '/build',
filename: './bundle.js',
chunkFilename: "[id].bundle.js"
},
module: {
loaders: [{
test: /\.css$/,
loader: 'style-loader!css-loader'
}, {
test: /\.js[x]?$/,
include: path.resolve(__dirname, 'react'),
exclude: /node_modules/,
loaders: ['react-hot', 'babel-loader?cacheDirectory'],
noParse: [pathToReact, pathToReactDOM]
}, {
test: /\.(png|jpg)$/,
loader: 'url-loader'
}, {
test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,
loader: 'url'
}]
},
resolve: {
extensions: ['', '.js', '.jsx'],
},
plugins: [
new OpenBrowserPlugin({
url: 'http://localhost:8000/dev/index.html'
})
]
};
package.json
{
"name": "***",
"version": "1.0.0",
"description": "admin",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server react/main.js --devtool eval --progress --hot --inline --colors --content-base webapp/build",
"deploy": "set NODE_ENV=production && webpack --config webpack.production.config.js"
},
"dependencies": {
"antd": "1.1.0",
"babel-runtime": "6.x",
"compression-webpack-plugin": "^0.4.0",
"echarts": "^3.4.0",
"react": "0.14.x",
"react-dom": "0.14.x",
"reflux": "^0.4.1",
"reqwest": "^2.0.5",
"webpack-parallel-uglify-plugin": "^0.4.2"
},
"devDependencies": {
"animate.css": "^3.5.1",
"babel-core": "^6.10.4",
"babel-eslint": "6.x",
"babel-loader": "6.x",
"babel-plugin-antd": "^0.4.0",
"babel-plugin-transform-es2015-modules-simple-amd": "^0.3.0",
"babel-plugin-transform-runtime": "6.x",
"babel-preset-es2015": "6.x",
"babel-preset-react": "6.x",
"babel-preset-stage-0": "6.x",
"copy-webpack-plugin": "2.x",
"css-loader": "~0.23.0",
"es5-shim": "^4.5.8",
"es6-promise": "^3.2.1",
"http-proxy-middleware": "0.17.2",
"open-browser-webpack-plugin": "0.0.2",
"react-hot-loader": "^1.3.0",
"style-loader": "~0.13.0",
"url-loader": "^0.5.7",
"webpack": "1.x",
"webpack-dev-server": "^1.14.1"
},
"author": "dwj",
"license": "ISC"
}
No compile errors, the project started normally. But the page can not be displayed normally.
I'm trying to use my React native Android app working as a website.I'm following this tutorial
when i run webpack-dev-server it showing below error.
webpak.cofig.js
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'stage-0', 'react']
}
}
]
},
resolve: {
alias: {
"react-native": "react-native-web"
}
}
};
entry.js
document.write(require('./../testreact/index.android.js'));
package.json
{
"name": "testreact",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "adb reverse tcp:8081 tcp:8081 && node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"babel": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"firebase": "^4.1.2",
"react": "^16.0.0-alpha.12",
"react-native": "0.45.1",
"react-native-router-flux": "^3.38.0",
"react-native-web": "0.0.104",
"react-navigation": "^1.0.0-beta.11",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.5.0"
},
"devDependencies": {
"autoprefixer": "^7.1.1",
"babel-core": "^6.25.0",
"babel-jest": "20.0.3",
"babel-loader": "^7.1.0",
"babel-preset-react-native": "2.0.0",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "react-native"
}
}
UPDATE
In case this hasn't been solved, in your webpack config file use babel-loader instead of babel-core.
So this is a basic web pack problem that i've seen solved on here before but for some reason I can seem to get web packs to load png's properly.
I've read several of the solutions and have tried many of them unsuccessfully. I've tried requiring the png like <img src=require('someone.png')/> and i've tried importing the image and I still get the same error. The good thing is that it sees the file but it reads the file as a text file.
error
Module build failed: SyntaxError: Unexpected character '�' (1:0)
1 | �PNG
| ^
2 |
3 |
4 | IHD;0��sRGB���
IDATH
Webpacks code
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'},
{
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-1']
}
// inline base64 URLs for <=8k images, direct URLs for the rest
}]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
Package.json
{
"name": "moonshot",
"version": "1.0.0",
"description": "Simple starter package for Redux with React and Babel support",
"proxy": "http://loclhost:3090/",
"main": "index.js",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm run test -- --watch"
},
"author": "Austin Scott",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"chai": "^3.5.0",
"chai-jquery": "^2.0.0",
"file-loader": "^0.9.0",
"jquery": "^2.2.1",
"jsdom": "^8.1.0",
"mocha": "^2.4.5",
"react-addons-test-utils": "^0.14.7",
"url-loader": "^0.5.7",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"axios": "^0.15.0",
"babel-preset-stage-1": "^6.1.18",
"lodash": "^3.10.1",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-redux": "^4.0.0",
"react-router": "^2.0.1",
"redux": "^3.0.4",
"redux-form": "^4.1.3",
"redux-thunk": "^2.1.0"
}
}
If you are getting above error while running the mocha test cases you need to add this to your test_helper.js
// Disable webpack-specific features for tests since
// Mocha doesn't know what to do with them.
['.css', '.scss', '.png', '.jpg'].forEach(ext => {
require.extensions[ext] = () => null;
});