Dev dependencies needed for Heroku webpack build - heroku

I was under the impression that I wouldn't need the devDependencies to be included when I deploy to Heroku a react based app, using Webpack. For example, here's my package.
"scripts": {
"test": "",
"start": "./node_modules/.bin/babel-node server",
"build": "rimraf dist && export NODE_ENV=production && webpack --config ./webpack.production.config.js --progress --profile --colors",
"postinstall": "node deploy",
"eslint": "eslint .",
"jscs": "jscs ."
},
and deploy.js:
if (process.env.NODE_ENV === 'production') {
var child_process = require('child_process');
child_process.exec("webpack -p --config webpack.production.config.js", function (error, stdout, stderr) {
console.log('stdout: ' + stdout);
console.log('stderr: ' + stderr);
if (error !== null) {
console.log('exec error: ' + error);
}
});
}
and the Procfile
web ./node_modules/.bin/babel-node server.js
However, when I push to Heroku, I'm constantly getting a webpack command not recognized, so I included all of the devDependencies as normal dependencies to have it working. Am I missing something here?

Heroku set NPM_CONFIG_PRODUCTION to true by default to install dependencies only. If you would like to install devDependencies, you can disable production mode:
$ heroku config:set NPM_CONFIG_PRODUCTION=false
However, since you usually don’t want all devDependencies in your production builds, it’s preferable to move only the dependencies you actually need for production builds into dependencies (bower, grunt, gulp, etc).

Related

Generating empty HTML Mochawesome report from populated JSON file in Cypress

I am trying to generate one mochawesome report that contains all results of the spec files in my Cypress test suite.
Here is my package.json:
{
"test": "npx cypress run",
"combine-reports": "mochawesome-merge cypress/reports/mochawesome-report/*.json > mochareports/report.json",
"generate-report": "marge mochareports/*.json --reportDir mochawesome --assetsDir mochawesome/assets --reportPageTitle index.html"
},
"devDependencies": {
"cypress": "^9.5.4",
"mocha": "^9.2.2",
"mochawesome": "^7.1.3",
"mochawesome-merge": "^4.2.1",
"mochawesome-report-generator": "^6.2.0"
}
}
npm run test works as expected.
Running npm run combine-reports, creates mochareports/report.json as expected. I've opened the file in a text editor & it's populated with test stats, results, etc.
Running npm run generate-report displays Reports saved on the console.
If I open the HTML page (cypress/reports/mochareports/report.html) in VS Code, HTML is appearing. However, if I open it in a web browser, I get a blank HTML page & the below console error:
The HTML report is being generated, but for some reason is showing up as a blank page in a web browser.
Can someone please show me how to resolve this?
It would be better if you also add the cypress.json file, but I will explain with a simple example,
Here is my cypress.json report configuration
{
"reporter": "cypress-multi-reporters",
"reporterOptions": {
"reporterEnabled": "mochawesome",
"mochawesomeReporterOptions": {
"reportDir": "cypress/reports/mocha",
"quite": true,
"overwrite": false,
"html": false,
"json": true
}
}
}
And in your package.json I do not see the script to combine all json files
for ex:
"scripts": {
"clean:reports": "rm -R -f cypress/reports && mkdir cypress/reports && mkdir cypress/reports/mochareports ",
"pretest": "npm run clean:reports",
"scripts": "cypress run",
"combine-reports": "mochawesome-merge cypress/reports/mocha/*.json > cypress/reports/mochareports/report.json",
"generate-report": "marge cypress/reports/mochareports/report.json -f report -o cypress/reports/mochareports -- inline",
"posttest": "npm run combine-reports && npm run generate-report",
"test" : "npm run scripts || npm run posttest"
}
You can get some idea here also - https://medium.com/tech-learn-share/attach-screenshot-into-mochawesome-html-report-in-cypress-ca3792081474

Custom Node server causes Nextjs to fail to load 'No `pages` directory found'

I'm trying to bootstrap a new Nextjs app, and for integrating with Auth0 I need my localhost to be running HTTPS. I followed the guide here (https://medium.com/responsetap-engineering/nextjs-https-for-a-local-dev-server-98bb441eabd7), and generated a local certificate which is in more trusted certificate store.
To use HTTPS for localhost, you apparently need to create a custom server (this seems an odd oversight on the Nextjs side), so here's my custom server:
const { createServer } = require('https');
const { parse } = require('url');
const next = require('next');
const fs = require('fs');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev, dir: __dirname });
const handle = app.getRequestHandler();
const httpsOptions = {
key: fs.readFileSync('./certificates/ReactDevCertificate.key'),
cert: fs.readFileSync('./certificates/ReactDevCertificate.cer'),
};
app.prepare().then(() => {
createServer(httpsOptions, (req, res) => {
const parsedUrl = parse(req.url, true);
handle(req, res, parsedUrl);
}).listen(3000, (err) => {
if (err) throw err;
console.log('> Server started on https://localhost:3000');
});
});
Now, previous without the custom server, the app loads fine. But, with the custom server, it fails to load:
➜ yarn run dev
yarn run v1.22.15
$ next dev ./server.js
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
Error: > No `pages` directory found. Did you mean to run `next` in the parent (`../`) directory?
at Object.findPagesDir (C:\Clients\ING\Framework\samples\fictionist-ui\node_modules\next\dist\lib\find-pages-dir.js:31:15)
at new DevServer (C:\Clients\ING\Framework\samples\fictionist-ui\node_modules\next\dist\server\dev\next-dev-server.js:110:44)
at NextServer.createServer (C:\Clients\ING\Framework\samples\fictionist-ui\node_modules\next\dist\server\next.js:102:20)
at C:\Clients\ING\Framework\samples\fictionist-ui\node_modules\next\dist\server\next.js:117:42
at async NextServer.prepare (C:\Clients\ING\Framework\samples\fictionist-ui\node_modules\next\dist\server\next.js:92:24)
at async C:\Clients\ING\Framework\samples\fictionist-ui\node_modules\next\dist\cli\next-dev.js:126:9
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
It feels like somewhere the app has navigated to a child folder, as there is code in the function find-pages-dir.js (https://github.com/vercel/next.js/blob/canary/packages/next/lib/find-pages-dir.ts#L22) that looks specifically to the parent directory for the pages folder.
For reference, here is my package.json:
{
"name": "fictionist-ui",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev ./server.js",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "12.0.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^2.0.4"
},
"devDependencies": {
"#types/node": "16.11.6",
"#types/react": "17.0.33",
"eslint": "7.32.0",
"eslint-config-next": "12.0.1",
"typescript": "4.4.4"
}
}
OS: Windows 11
NPM: 16.9.0
Yarn: 1.22.15
My mistake was that I didn't get the command right:
"scripts": {
"dev": "node server.js" // was "next dev ./server.js"
}

How to pass `--` when used with pre npm scripts

How to pass others flags into npm command that has pre config
"prebuild": "npm run build:vendor",
"build": "cross-env NODE_ENV=production webpack --env.production -p",
When I run npm run build -- --env.produciton the flag --env.produciton does not work
I want to pass into webpack command.. ending like this
cross-env NODE_ENV=production webpack --env.production -p --env.production
two options to pass params, one over node cross-env:
"build": "cross-env NODE_ENV=production YOUR_ENV=yourName webpack -p"
if (process.env.YOUR_ENV === 'yourName') { }
the other with webpack:
"build": "webpack --env.NODE_ENV=local --env.YOUR_ENV yourName --progress"
const path = require('path');
module.exports = env => {
// Use env.YOUR_ENV here:
console.log('YOUR_ENV: ', env.YOUR_ENV); // 'yourName'
return {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
};
The param is always true if you won't set value.
https://webpack.js.org/guides/environment-variables/
Setting up your env variable without assignment, --env.production sets --env.production to true by default..

Heroku Deployment Error: displaying backend, not frontend

I am trying to deploy my local MERN application to Heroku. Application works offline. After deployment, when click "Open app", all I see is the data from the backend. Not the front end. Deployment here: https://whispering-falls-45660.herokuapp.com/.
Set up new Heroku project, and after successful "git push Heroku master", application only shows backend data. Heroku CLI version: heroku/7.24.1, Node version: v10.13.0.
Github repo: https://github.com/neilhsieh/whereToEat
Package.json file has the proper scripts in place as per Brad Traversy:
"scripts": {
"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"
},
server.js code has appropriate code to point to client build file:
if (process.env.NODE_ENV === 'production') {
app.use(express.static('client/build'))
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html')) // relative path
})
}
Expecting front end deployed on Heroku, ended up only having backend.
UPDATE: Moved process.env.NODE_ENV test to before all API calls, this fixed my issue.
First if you have a route like this in your server/app.js file
app.get("/", (req, res) => res.send("Api Running"));
Definitely get rid of that
Second add these lines in your server/app.js file
const path = require("path");
if (process.env.NODE_ENV === "production") {
app.use(express.static("client/build"));
app.get("*", (req, res) => {
res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
});
}

How to use the result of an NPM script in another NPM script?

It might be simple. But I can't get it work.
Let's consider the simple (and troncated) package.json below.
{
"name": "appName",
"version": "1.0.0",
"TEST": "1-0-0",
"scripts": {
"TEST_IN_SCRIPTS": " echo ${npm_package_version} | sed 's/\\./-/g' ",
"deploy": "gcloud app deploy --version ${npm_package_scripts_TEST_IN_SCRIPTS}"
},
"dependencies": {
"express": "^4.16.2",
...
}
}
I want to deploy an app with --version equals version (aka 1.0.0).
However, Google App Engine does not allow . (dot).
The idea is then to deploy a 1-0-0 (instead of 1.0.0) which is allowed by GAE.
TEST_IN_SCRIPTS works and returns 1-0-0
However, when I pass ${npm_package_scripts_TEST_IN_SCRIPTS} to deploy script, it fails because it returns the string ${npm_package_scripts_TEST_IN_SCRIPTS} instead of its result (1-0-0).
Any clue to make it works?
Thanks.
Try piping the output of the TEST_IN_SCRIPTS:
"deploy": "npm run TEST_IN_SCRIPTS | xargs gcloud app deploy --version",
I've found a simple solution that works for me.
Thanks #Juan, you show me the road!
Below my troncated package.json
{
"name": "...",
"version": "1.0.1",
"scripts": {
"deploy": "GAE_VERSION=$(echo ${npm_package_version} | sed 's/\\./-/g') && gcloud app deploy --version $GAE_VERSION"
},
"dependencies": {...},
"devDependencies": {...}
}
This is - in fact - pretty simple.
get npm_package_version and change with sed . by - (GAE is ok with hyphen)
Assign the result to a variable (here : GAE_VERSION)
Use gcloud command to deploy using GAE_VERSION variable.
An identical question where I post this very same answer.

Resources