Related
I am using an NX mono repository for my project. It contains the following three applications:
a web app (NextJS),
an API service (NestJS)
a mobile app (React Native)
I was trying to deploy the backend code to Heroku and I am facing the issue of it not finding the packages when I set the NODE_ENV variable to production. All of the NX packages are stored as the dev dependencies as default. It works fine if I set the NODE_ENV to development.
Question: What is the ideal way of solving the issue? I do not want to set NODE_ENV to development because otherwise, it will slow the deployments by installing useless packages from the devDependencies.
Any help will be appreciated.
This is what my package.json looks like.
"scripts": {
"api": "nx serve api",
"build:api": "nx build api",
"api:prod": "node dist/apps/api/main.js",
},
"dependencies": {
"#emotion/react": "^11.10.4",
"#emotion/styled": "^11.10.4",
"#hookform/resolvers": "^2.9.7",
"#mui/icons-material": "^5.10.3",
"#mui/material": "^5.10.4",
"#nestjs/common": "^9.0.0",
"#nestjs/config": "^2.2.0",
"#nestjs/core": "^9.0.0",
"#nestjs/jwt": "^9.0.0",
"#nestjs/mongoose": "^9.2.0",
"#nestjs/passport": "^9.0.0",
"#nestjs/platform-express": "^9.0.0",
"#react-native-community/clipboard": "^1.5.1",
"#react-navigation/bottom-tabs": "^6.3.3",
"#react-navigation/material-top-tabs": "^6.2.4",
"#react-navigation/native": "^6.0.11",
"#react-navigation/native-stack": "^6.7.0",
"#react-three/drei": "^9.34.3",
"#react-three/fiber": "^8.8.9",
"#tanstack/react-query": "^4.2.3",
"#trycourier/courier": "^3.15.0",
"#twotalltotems/react-native-otp-input": "^1.3.11",
"axios": "^0.27.2",
"bcryptjs": "^2.4.3",
"class-transformer": "^0.5.1",
"class-validator": "^0.13.2",
"cookies": "^0.8.0",
"core-js": "^3.6.5",
"http-proxy": "^1.18.1",
"jwt-decode": "^3.1.2",
"lodash": "^4.17.21",
"material-ui-phone-number": "^3.0.0",
"mongoose": "^6.5.2",
"mui-tel-input": "^2.0.1",
"native-base": "^3.4.13",
"next": "12.2.3",
"npm": "^8.19.2",
"passport": "^0.6.0",
"passport-jwt": "^4.0.0",
"passport-local": "^1.0.0",
"patch-package": "^6.4.7",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-hook-form": "^7.34.2",
"react-is": "18.2.0",
"react-native": "0.69.3",
"react-native-gesture-handler": "^2.6.0",
"react-native-pager-view": "^6.0.1",
"react-native-phone-number-input": "^2.1.0",
"react-native-reanimated": "^2.10.0",
"react-native-safe-area-context": "^4.3.1",
"react-native-screens": "^3.15.0",
"react-native-snackbar": "^2.4.0",
"react-native-tab-view": "^3.2.1",
"react-native-vector-icons": "^9.2.0",
"react-native-webview": "^11.23.1",
"react-otp-input": "^2.4.0",
"reflect-metadata": "^0.1.13",
"regenerator-runtime": "0.13.7",
"rxjs": "^7.0.0",
"styled-components": "5.3.5",
"three": "^0.145.0",
"tslib": "^2.3.0",
"twilio": "^3.81.0",
"yup": "^0.32.11"
},
"devDependencies": {
"#commitlint/cli": "^17.0.3",
"#commitlint/config-conventional": "^17.0.3",
"#nestjs/schematics": "^9.0.0",
"#nestjs/testing": "^9.0.0",
"#nrwl/cli": "14.5.4",
"#nrwl/cypress": "14.5.4",
"#nrwl/detox": "14.5.6",
"#nrwl/eslint-plugin-nx": "14.5.4",
"#nrwl/jest": "14.5.4",
"#nrwl/linter": "14.5.4",
"#nrwl/nest": "14.5.4",
"#nrwl/next": "^14.5.4",
"#nrwl/node": "14.5.4",
"#nrwl/react": "14.5.4",
"#nrwl/react-native": "^14.5.6",
"#nrwl/web": "14.5.4",
"#nrwl/workspace": "14.5.4",
"#react-native-async-storage/async-storage": "1.17.7",
"#react-native-community/cli": "8.0.4",
"#react-native-community/cli-platform-android": "8.0.4",
"#react-native-community/cli-platform-ios": "8.0.4",
"#testing-library/dom": "^8.18.1",
"#testing-library/jest-dom": "5.16.4",
"#testing-library/jest-native": "4.0.5",
"#testing-library/react": "13.3.0",
"#testing-library/react-native": "11.0.0",
"#testing-library/user-event": "^14.4.3",
"#types/bcryptjs": "^2.4.2",
"#types/cookies": "^0.7.7",
"#types/jest": "27.4.1",
"#types/lodash": "^4.14.182",
"#types/node": "16.11.7",
"#types/passport-jwt": "^3.0.6",
"#types/passport-local": "^1.0.34",
"#types/react": "18.0.15",
"#types/react-dom": "18.0.6",
"#types/react-is": "17.0.3",
"#types/react-native": "0.69.3",
"#types/react-native-vector-icons": "^6.4.12",
"#types/styled-components": "5.1.25",
"#types/three": "^0.144.0",
"#typescript-eslint/eslint-plugin": "^5.29.0",
"#typescript-eslint/parser": "^5.29.0",
"babel-jest": "27.5.1",
"babel-plugin-styled-components": "1.10.7",
"cypress": "^10.2.0",
"detox": "19.7.1",
"eslint": "~8.15.0",
"eslint-config-next": "12.2.3",
"eslint-config-prettier": "8.1.0",
"eslint-plugin-cypress": "^2.10.3",
"eslint-plugin-import": "2.26.0",
"eslint-plugin-jsx-a11y": "6.6.1",
"eslint-plugin-react": "7.30.1",
"eslint-plugin-react-hooks": "4.6.0",
"husky": "^8.0.0",
"jest": "27.5.1",
"jest-circus": "27.5.1",
"jest-react-native": "18.0.0",
"lint-staged": "^13.0.3",
"metro": "0.71.3",
"metro-babel-register": "0.71.3",
"metro-react-native-babel-preset": "0.71.3",
"metro-resolver": "0.71.3",
"msw": "^0.47.2",
"nx": "14.5.4",
"prettier": "^2.6.2",
"prettier-plugin-organize-imports": "^3.1.0",
"react-devtools": "^4.26.0",
"react-native-config": "1.4.6",
"react-native-svg": "12.4.3",
"react-native-svg-transformer": "1.0.0",
"react-test-renderer": "18.2.0",
"ts-jest": "27.1.4",
"ts-node": "~10.8.0",
"typescript": "~4.7.2"
},
And this is my Procfile:
web: yarn build:api && yarn api:prod
Nx is installed as a devDependency. Heroku scrubs devDependencies after thebuild step so that you don't have extra dependencies for your final environment. What you should do is have a build script in your package.json that builds everything your server will need to start, and then have a start script that starts the application, or set the web property in the Procfile as you currently have done for the build:api && api:prod. However, this start script should not rely on any devDependencies. It should be able to run with just the production dependencies.
I'm building this Vue app with Visual Studio and regardless of the build mode (debug/release) I still get this message below in the console.
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
Is there a way to know if I'm really in release mode or if Vue is just throwing me that message?
I know that usually it means the JS files have been minified, is that the case with a Vue app?
I'm not sure if this helps but here is my packages.json file
{
"name": "aspnetcore-vuejs",
"description": "ASP.NET Core & VueJS Starter project",
"author": "Mark Pieszak",
"scripts": {
"dev": "cross-env ASPNETCORE_ENVIRONMENT=Development NODE_ENV=development dotnet run",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"install": "webpack --config webpack.config.vendor.js"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.4",
"#fortawesome/free-solid-svg-icons": "^5.3.1",
"#fortawesome/vue-fontawesome": "^0.1.1",
"axios": "^0.15.3",
"bootstrap-vue": "^2.0.0-rc.11",
"core-js": "^2.4.1",
"dayjs": "^1.7.5",
"font-awesome": "^4.6.3",
"material-design-icons-iconfont": "^3.0.3",
"vue": "^2.1.8",
"vue-infinite-loading": "^2.3.3",
"vue-masked-input": "^0.5.2",
"vue-router": "^2.1.1",
"vue-select": "^2.5.0",
"vue-server-renderer": "^2.1.8",
"vue-template-compiler": "^2.1.8",
"vuetify": "^1.2.3",
"vuex": "^2.1.1",
"vuex-router-sync": "^4.0.1"
},
"devDependencies": {
"aspnet-webpack": "^2.0.1",
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-plugin-transform-async-to-generator": "^6.22.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-stage-2": "^6.18.0",
"babel-register": "^6.18.0",
"bootstrap": "^4.1.3",
"cross-env": "^3.1.3",
"css-loader": "^0.26.1",
"event-source-polyfill": "^0.0.7",
"extract-text-webpack-plugin": "^2.0.0-rc",
"file-loader": "^0.9.0",
"jquery": "^2.2.1",
"node-sass": "^4.1.0",
"optimize-css-assets-webpack-plugin": "^1.3.1",
"regenerator-runtime": "^0.12.1",
"sass-loader": "^4.1.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"vue-loader": "^10.0.2",
"webpack": "^2.2.0",
"webpack-hot-middleware": "^2.12.2"
}
}
As the Vue.js deployment guide you posted suggests, please check your webpack.config.js and be sure to use the right mode targetting production environment when you deploy the app.
In Webpack 4+, you can do:
module.exports = {
mode: 'production'
}
But in Webpack 3 and earlier, you'll need to use DefinePlugin:
var webpack = require('webpack')
module.exports = {
// ...
plugins: [
// ...
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
}
When you are ready, you should simply need to run npm run build to start bundling your modules.
Related and useful readings:
Writing separate Webpack configurations for each environment.
Managing development and production builds with Webpack.
Introduction to NPM Scripts.
I need to not allow tslint to fix found errors. For example, if it found comma missing, I need it to only tell me that it found it, and not actually fix it.
I found the "--no-fix" parameter in its vue-cli documentation, but it doesn't look like it is working. (I'm using npm run lint, where "lint": "vue-cli-service lint --no-fix" in package.json)
Are there any other ways to stop tslint's automatic fixes?
The "--no-fix" option works for me. Below is my configuration, please check your lint version:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --port 3000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint --no-fix",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"#riophae/vue-treeselect": "0.0.37",
"axios": "^0.18.0",
"bootstrap-vue": "^2.0.0-rc.11",
"izitoast": "^1.4.0",
"moment": "^2.22.2",
"v-calendar": "^0.9.7",
"v-select2-component": "^0.3.1",
"vue": "^2.5.17",
"vue-full-calendar": "^2.7.0",
"vue-izitoast": "^1.1.2",
"vue-js-modal": "^1.3.27",
"vue-router": "^3.0.1",
"vue2-daterange-picker": "^0.1.5",
"vuejs-datepicker": "^1.5.4",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.1.1",
"#vue/cli-plugin-eslint": "^3.1.5",
"#vue/cli-plugin-unit-jest": "^3.1.1",
"#vue/cli-service": "^3.1.4",
"#vue/eslint-config-standard": "^4.0.0",
"#vue/test-utils": "^1.0.0-beta.20",
"ajv": "^6.5.5",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"eslint": "^5.8.0",
"eslint-plugin-cypress": "^2.1.3",
"eslint-plugin-vue": "^5.0.0-0",
"node-sass": "^4.10.0",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.5.17"
}
}
I am trying to deploy a MEAN app to Heroku, but cannot push due to the following error:
! No default language could be detected for this app.
HINT: This occurs when Heroku cannot detect the buildpack to use for this application automatically.
See https://devcenter.heroku.com/articles/buildpacks
! Push failed
I tried setting a node.js buildpack with their latest node buildpack release, but just received another error:
failed to detect buildpack
This is my first deployment to Heroku, so I'm brand new at this.
Here are my package.jsons:
Server
{
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"bcrypt": "^1.0.2",
"body-parser": "^1.16.1",
"cookie-parser": "^1.4.3",
"cors": "^2.8.2",
"debug": "^2.6.3",
"ejs": "~2.5.5",
"express": "^4.14.1",
"jsonwebtoken": "^7.3.0",
"mongoose": "^4.9.2",
"morgan": "^1.7.0",
"multer": "^1.3.0",
"passport": "^0.3.2",
"passport-jwt": "^2.2.1",
"request": "^2.81.0",
"request-promise": "^4.2.0",
"serve-favicon": "^2.3.2"
}
}
Client
{
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/common": "^2.4.0",
"#angular/compiler": "^2.4.0",
"#angular/core": "^2.4.0",
"#angular/forms": "^2.4.0",
"#angular/http": "^2.4.0",
"#angular/platform-browser": "^2.4.0",
"#angular/platform-browser-dynamic": "^2.4.0",
"#angular/router": "^3.4.0",
"#types/googlemaps": "^3.26.8",
"#types/jquery": "^2.0.43",
"#types/lodash": "^4.14.62",
"#types/underscore": "^1.8.0",
"amcharts3-angular2": "github:amcharts/amcharts3-angular2",
"angular2-google-maps": "^0.17.0",
"core-js": "^2.4.1",
"dotenv": "^4.0.0",
"jquery": "^3.2.1",
"lodash": "^4.17.4",
"ng2-google-charts": "^2.1.0",
"rxjs": "^5.1.0",
"tslint": "^4.4.2",
"typescript": "^2.0.10",
"underscore": "^1.8.3",
"zone.js": "^0.7.6"
},
"devDependencies": {
"#angular/cli": "1.0.0-rc.0",
"#angular/compiler-cli": "^2.4.0",
"#types/jasmine": "2.5.38",
"#types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^0.2.0",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.4.2",
"typescript": "~2.0.0"
}
}
Why is Heroku not detecting Node?
According to the Heroku documentation
To determine how to start your app, Heroku first looks for a Procfile.
If no Procfile exists for a Node.js app, we will attempt to start a
default web process via the start script in your package.json.
So you shouldn't need to set the build pack.
I have two package.jsons, one for client and one for server. I needed to put my server dependencies into the root folder (they were each nested in client and server folders, respectively). Moving it into root made it detectable by heroku. Of course, now I have a new error. :)
I am testing my react/redux code with Mocha and expect, I got mocha configured to use es6 , but it seems to lack support for the array.prototype.includes even when I have a .babelrc specifying stage-0. And in my non-test code, array.prototype.includes works. Are there some settings aside from babelrc specific to mocha that need to be set in order to use array.prototype.includes?
Here is my package.json
{
"name": "client",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "mocha --compilers js:babel-core/register --recursive",
"test:watch": "npm test -- --watch",
"start": "node server.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.4.0",
"babel-loader": "^6.2.1",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"expect": "^1.14.0",
"lodash": "^4.0.1",
"mocha": "^2.4.5",
"react-addons-test-utils": "^0.14.7",
"react-hot-loader": "^1.3.0",
"redux-devtools": "^3.0.2",
"redux-devtools-dock-monitor": "^1.0.1",
"redux-devtools-log-monitor": "^1.0.2",
"webpack": "^1.12.11",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"axios": "^0.8.1",
"cuid": "^1.3.8",
"history": "^1.17.0",
"lodash": "^4.0.1",
"ramda": "^0.19.1",
"react": "^0.14.6",
"react-addons-shallow-compare": "^0.14.7",
"react-dom": "^0.14.6",
"react-redux": "^4.0.6",
"react-router": "^1.0.3",
"react-router-redux": "^2.1.0",
"redux": "^3.1.7",
"redux-crud": "^0.10.1",
"redux-devtools": "^3.0.2",
"redux-devtools-dock-monitor": "^1.0.1",
"redux-devtools-log-monitor": "^1.0.2",
"redux-loop": "^1.0.2",
"redux-saga": "^0.4.1",
"redux-simple-router": "^2.0.3",
"reselect": "^2.0.3",
"seamless-immutable": "^5.0.1"
}
}
Thank you!
Array.prototype.includes is provided via babel-polyfill since it does not require transpiling. It looks like you already have babel-polyfill in your package.json so just make sure you are importing it in your mocha tests.