npm run build won't create build directory - reactjs

It's my first time running a build to deploy a react website. When I run npm run build, nothing happens. I tried running npm run build:all and I do get a build directory created but with no index.html file.
My current package.json is:
"eslint": "eslint \"src/**/*.js\"",
"start": "concurrently \"npm run dev:server\" \"npm run dev:bundle\"",
"test": "jest",
"dev:server": "cross-env NODE_PATH=./src nodemon --exec \"babel-node src/server/server.js\" --ignore .reactful.json --ignore public/",
"dev:bundle": "webpack -wd",
"verify-tests": "jest --coverage",
"build:react": "cross-env NODE_ENV=production webpack --progress -p",
"build:node": "babel src -d build --config-file ./babel-node.config.js --copy-files",
"build:all": "npm install && npm run build:react && npm run build:node",
"prod:start": "cross-env NODE_ENV=production NODE_PATH=./build pm2 start -i max build/server/server.js --update-env --name react-testProd",
"prod:stop": "pm2 stop react-testProd",
"prod:reload": "pm2 reload --update-env react-testProd",
"prod:logs": "pm2 logs --update-env react-testProd",
"build": "webpack --config webpack.config.js"
My current webpack config is:
resolve: {
modules: [path.resolve('./src'), path.resolve('./node_modules')],
},
entry: {
main: ['./src/renderers/dom.js'],
},
output: {
path: path.resolve('public', 'bundles'),
filename: isDev ? '[name].js' : '[name].[chunkhash].js',
},
Any idea what is wrong with this?

I cant see anything particularly wrong but you can try using CopyWebpackPlugin
module.exports = {
plugins: [
new CopyWebpackPlugin([
{ from: './index/html', to: 'relative/path/to/dest/' }
])
]
}

Related

Docker build failing when changing from react-script build to craco build for FE repo

I'm trying to add craco to my repo to add antd components and so far it has been building fine locally with my style overrides but the styles aren't showing up in production. I figured it is because initially I did not add the craco build line in my build script.
Once I do replace react-scripts build with craco build my build is failing.
I have tried the following and got the same error:
downgrading react-scripts to v4.0.3 with #craco/craco v6.4.3
upgrading react-scripts to v5.0.3 with #craco/craco v7.0.0-alpha.0
Error in build:
UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open '/root/config/craco.config.js'
package.json:
(I have tried removing the GENERATE_SOURCEMAP=false flag and getting the same error as above)
"cracoConfig": "./config/craco.config.js",
"scripts": {
"start": "yarn && HOST=dev.app.cognitops.com PORT=8100 BROWSER=none craco start",
"build": "sh -ac '. .env.${REACT_APP_ENV}; GENERATE_SOURCEMAP=false craco build'",
"test": "react-scripts test",
"lint:diff": "yarn run eslint $(git diff --name-only HEAD | grep -E '.(js|jsx)$' | xargs)",
"eject": "react-scripts eject"
},
config/craco.config.js:
module.exports = {
reactScriptsVersion: "react-scripts",
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '#primary-color': '#2B8589' },
javascriptEnabled: true,
},
},
},
},
]
};
.yaml for docker:
- name: 'gcr.io/cloud-builders/docker'
id: docker_build_dev
entrypoint: /bin/sh
args:
- '-c'
- |
docker build --build-arg REACT_APP_ENV=dev -t gcr.io/${PROJECT_ID}/ui-dev:$(cat /root/local/build_version) .
docker push gcr.io/${PROJECT_ID}/ui-dev:$(cat /root/local/build_version)
waitFor:
- test
volumes:
- name: 'ssh'
path: /root/.ssh
- name: 'local'
path: /root/local
What am I doing wrong? I don't have any experience with docker build commands but I've tried messing with the build script in the package.json to the following and the build is still failing:
"build": "sh -ac '. .env.${REACT_APP_ENV}; craco build'"
"build": "sh -ac '. craco build'"
"build": "sh -ac craco build"
"build": "craco build"
"build": "sh -ac '. .env.${REACT_APP_ENV}; GENERATE_SOURCEMAP=false craco build --config config/craco.config.js'"

Create a react "development" build

What's the best way to create a development build bundle for a create-react-app project?
npm run build builds something that's buggy in ways that development isn't and it ignores my NODE_ENV setting
This works for the react-scripts 5.0.1:
Install react-app-rewired: npm install react-app-rewired
Replace the build script in your package.json:
"scripts": {
"build": "react-app-rewired build"
}
Create the config-overrides.js file in the root folder of your project.
module.exports = function override(config) {
config.mode = 'development';
config.optimization.minimize = false;
return config;
};
If you want to create two build modes you can add a condition that checks the mode.
"scripts": {
"build": "cross-env react-app-rewired build",
"build:dev": "cross-env DEV_MODE=true react-app-rewired build",
}
module.exports = function override(config) {
if (process.env.DEV_MODE) {
config.mode = 'development';
config.optimization.minimize = false;
}
return config;
};

lint-staged prettier write doesn't end

I am using Husky and lint-staged in a React (TypeScript) project.
My files look like this:
package.json
"check-types": "tsc --pretty --noEmit",
"fix-eslint:staged": "yarn check-eslint:staged --fix",
"fix-format:staged": "prettier --write",
pre-commit
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
yarn lint-staged
lint-staged.config.js
module.exports = {
'**/*.{js,jsx,ts,tsx}': () => [
'yarn check-types',
'yarn fix-eslint:staged',
'yarn fix-format:staged'
],
'**/*.css': ['yarn fix-stylelint:css']
};
The problem is the prettier script yarn fix-format:staged never ends. It keeps on going, even if I place it at the top.
If I move the lint-stage settings to package.json like below, then the yarn check-types fails with error: Cannot use JSX unless the '--jsx' flag is provided.
package.json
"lint-staged": {
"**/*.{js,jsx,ts,tsx}": [
"yarn check-types",
"yarn fix-eslint:staged",
"yarn fix-format:staged"
],
"**/*.css": [
"yarn fix-stylelint:css"
]
},
Can anyone please help me with that?
on pre-commit use :
npx lint-staged

Deploy Next.JS web-app that used Yarn to Google App Engine

I'm trying to deploy a web-app that I've built using templates from a friend. I'm quite unfamiliar with React/NextJS frameworks so I'm unsure with the differences between yarn and npx.
I've used yarn next-build to get the app running locally and it works fine. However, now I'm trying to deploy it to Google App Engine on NodeJS and I can't get it working.
This is the project structure:
/dist/functions/next
/nginx
/node_modules
/packages
/public
.gcloudignore
.nowignore
.prettierrc
.yarnrc
app.yaml
babel.config.js
firebase.json
landing.now.json
lerna.json
package-lock.json
package.json
yarn.lock
This is app.yaml:
runtime: nodejs10
handlers:
- url: /.*
script: auto
This is package.json:
{
"name": "streamplate-landing",
"description": "Your universal health app",
"version": "1.0.0",
"private": true,
"author": "Streamplate",
"devDependencies": {
"#babel/cli": "^7.10.3",
"cpx": "^1.5.0",
"cross-env": "^7.0.2",
"firebase-tools": "8.4.3",
"husky": "^4.2.5",
"lerna": "^3.22.1",
"lint-staged": "^10.2.11",
"prettier": "^2.0.5",
"rimraf": "^3.0.2",
"polished": "^3.4.4"
},
"workspaces": [
"packages/common",
"packages/landing",
"packages/landing-gatsby"
],
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"clean": "lerna clean --yes && rimraf node_modules",
"preweb": "cpx \"packages/common/src/assets/image/**/*.*\" \"packages/landing/static\" -C",
"next-dev": "yarn workspace next-landing run dev",
"next-build": "rimraf dist && yarn workspace next-landing run build",
"next-start": "yarn workspace next-landing run start",
"next-export": "yarn workspace next-landing run export",
"gatsby-dev": "yarn workspace gatsby-landing run dev",
"gatsby-build": "yarn workspace gatsby-landing run build",
"gatsby-serve": "yarn workspace gatsby-landing run serve",
"prebuild-public": "rimraf \"dist/functions/**\" && rimraf \"dist/public\"",
"prefirebase-serve": "yarn run build-public && yarn run build-funcs && yarn workspace next-
landing run build && yarn run copy-deps && yarn run install-deps",
"firebase-serve": "cross-env NODE_ENV=production firebase serve",
"prefirebase-deploy": "yarn run build-public && yarn run build-funcs && yarn workspace next-
landing run build && yarn run copy-deps",
"firebase-deploy": "cross-env NODE_ENV=production firebase deploy",
"build-public": "cpx \"packages/common/src/assets/**/*.*\" \"dist/public/static\" -C && cpx
\"public/**/*.*\" \"dist/public\" -C && cpx \"packages/landing/public/**/*.*\"
\"dist/public\" -C",
"build-funcs": "babel \"packages/functions\" --out-dir \"dist/functions\"",
"copy-deps": "cpx \"packages/landing/*{package.json,package-lock.json,yarn.lock}\"
\"dist/functions\" -C",
"install-deps": "cd \"dist/functions\" && yarn",
"pregatsby-firebase-serve": "rimraf dist && yarn run gatsby-build && cpx \"packages/landing-
gatsby/public/**/*.*\" \"dist/public\" -C",
"gatsby-firebase-serve": "cross-env NODE_ENV=production firebase serve",
"pregatsby-firebase-deploy": "rimraf dist && yarn run gatsby-build && cpx
\"packages/landing-gatsby/public/**/*.*\" \"dist/public\" -C",
"gatsby-firebase-deploy": "firebase deploy",
"netlify-deploy": "yarn workspace next-landing run netlify-build"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,md,css}": [
"prettier --trailing-comma es5 --single-quote --write"
]
}
}
Add the next export into scripts area in your package.json
"scripts": {
...
"build": "next build && next export"
...
after execution yarn build the out directory will be generated and added into your project.
While initializing firebase use out directory as your public.

Heroku express + react + webpack - can't run on server

I have my webpack + ts + express + react application. I can build it locally without any problems. . And everything works, but when i publish it to heroku i've got this:
eb.1]: npm ERR! code ELIFECYCLE
2019-11-06T15:32:36.057014+00:00 app[web.1]: npm ERR! errno 2
2019-11-06T15:32:36.058319+00:00 app[web.1]: npm ERR! v#0.0.0 start: tsc && node ./build/app.js
2019-11-06T15:32:36.058526+00:00 app[web.1]: npm ERR! Exit status 2
2019-11-06T15:32:36.058771+00:00 app[web.1]: npm ERR!
2019-11-06T15:32:36.058897+00:00 app[web.1]: npm ERR! Failed at the v#0.0.0
start script.
2019-11-06T15:32:36.059048+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Folder structure
api
app.ts
client
src
tsconfig
package.json
tsconfig
package.json
file app.ts
app.use(cors());
app.use(morgan('dev'));
app.use(express.json());
app.use(cookieParser());
app.use(morgan('dev'));
app.use(express.static(path.join(__dirname, '../client/build')));
app.use('/api/posts', postRoutes);
app.use('/api/users', userRoutes);
app.use('/api', errorRoutes);
app.get('/*', (req, res: Response) => {
res.sendFile(path.join(__dirname, '../client/build/index.html'));
});
const port = process.env.PORT || 1646;
app.listen(port, () => {
// tslint:disable-next-line: no-console
console.log(`listening on port ${port}`);
});
{
"name": "v",
"version": "0.0.0",
"engines": {
"node": "8.11.2",
"npm": "5.6.0"
},
"private": true,
"scripts": {
"dev:front": "cd client && npm run dev",
"dev:server": "ts-node-dev --respawn --transpileOnly ./api/app.ts",
"dev": "concurrently \"npm run dev:server\" \"npm run dev:front\"",
"tsc": "tsc",
"start": "tsc && node ./build/app.js",
"clean": "rimraf ./build",
"build": "tsc && node ./build/app.js",
"heroku-postbuild": "cd client && npm run build",
"heroku-prebuild": "cd client && npm install"
},
"dependencies": { //I Putted evrything here to dependencies
"#material-ui/lab": "^4.0.0-alpha.30",
"cookie-parser": "~1.4.4",
"cors": "^2.8.5",",
"dotenv": "^8.2.0", ....
tsconfig
"target": "es6"
"module": "commonjs"
"outDir": "./build",
"include": [
"api/"
]
package.json client
scripts ...
"build": "npm run clean && webpack -p ---open --config webpack/production.js",
"clean": "rimraf build/*",
"tsc": "tsc --noEmit",
"lint": "tslint './src/**/*.ts*' --format stylish --project . --force",
"dev": "webpack-dev-server ---open --config webpack/development.js"
Your build process shouldn't be starting up your app. Change
"heroku-postbuild": "cd client && npm run build",
to
"heroku-postbuild": "npm run tsc",
That should create the build folder you want. Then you'll want to add a new file called Procfile to the root of your project with this line of code:
web: node build/api.js
Which tells Heroku how to start up your app.

Resources