We Keep Coding

Webpack build working on local but fails on server

I am trying to deploy an app that works on local but when I put it on the server I get this error that refers to a filter function on an array. Indicating that the compile ES5 JS is broken somehow.
I use the webpack build command and the output works on my local but when I am putting it on the server I get this on the browser:
`TypeError: s.filter is not a function vendor.bundle.9a44edfc.js:2:131513`
I don't understand why it would work on my local and not on the server, is the same node, npm and yarn version on both.
I run this command for build
"build": "webpack --config webpack/webpack.config.babel.js",
"dev": "webpack serve --env mode=dev --env isDevServer --env NODE_ENV=local --config webpack/webpack.config.babel.js"

It had nothing to do with webpack, I was getting some data by requesting a route to my express server and I used:
axios('api/projects')
Instead of
axios('/api/projects')
And just for that it failed to get the data, the funny thing is that on my computer I am using nginx 15 on mac, and on the server I am using nginx 14 with Ubuntu and on my computer it did not failed.

Cannot build for production in GitHub Actions using webpack

I'm trying to deploy my project to Firebase Hosting using the following action:
on:
push:
branches:
- master
pull_request:
branches:
- master
jobs:
deploy_to_firebase_hosting:
runs-on: ubuntu-latest
steps:
- name: Checkout the repository
uses: actions/checkout#master
- name: Install Dependencies
run: npm install
- name: Build for production
run: npm run build-prod
- name: Deploy to Firebase
uses: w9jds/firebase-action#master
with:
args: deploy --only hosting
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
The actions gets failed on Build For Production step. My build-prod script does webpack -p --mode production.
This is the error message for this failure:
> project-name#1.0.0 build-prod /home/runner/work/project-name/project-name
> webpack -p --mode production
/home/runner/work/project-name/project-name/node_modules/webpack-cli/bin/cli.js:93
throw err;
^
TypeError: Cannot convert undefined or null to object
at Function.keys (<anonymous>)
...
I've been researching about this error and I found out that people solve it by deleting node_modules before running the build. So I ran another action, without the npm install part.
It fails again on Build for production, but with a different, much reasonable error:
> webpack -p --mode production
webpack not installed
Install webpack to start bundling:
$ npm install --save-dev webpack
npm ERR! code ELIFECYCLE
npm ERR! errno 1
What's the correct way to build a production bundle in Github Actions?
Thanks!

I had the exact same issue when trying to use GitHub actions to build & deploy a production Docker container.
It turned out the issue on my side was as a result of Webpack not having access to any environment variables (which my Webpack config required) at the point of build which caused it to error out with the same error you received above.
To fix this I added the following line to my build command:
--env.NODE_ENV=production
E.g my final build command called by the container was then:
node --max_old_space_size=4096 ./node_modules/webpack/bin/webpack.js --env.NODE_ENV=production --progress --config webpack.prod.js
Hope this helps!

How do i minify amplify application?

I'm using react/amplify stack. After publishing app, i realized that all code there is not minified, i'm able to open any component and see it's unminified source code. As i understood, amplify builds app based on it's amplify.yml file. I didn't change there anything and it looks like this:
version: 0.1
backend:
phases:
build:
commands:
- '# Execute Amplify CLI with the helper script'
- amplifyPush --simple
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- npm run build
artifacts:
baseDirectory: build
files:
- '**/*'
cache:
paths:
- node_modules/**/*
I can see a command there - 'npm run build' which i suppose should build app and then publish it as minified version. So why it hasn't happened?

npm run build is going to do whatever is configured in the scripts section of your package.json. Likely you'd want to configure environmental variables to indicate what type of build to do. Here is how the create-react-app project has chosen to do it:
...
"scripts": {
"build": "REACT_APP_ENV=development react-scripts build",
"build:development": "REACT_APP_ENV=development react-scripts build",
"build:production": "REACT_APP_ENV=production react-scripts build",
...
},
...
Using this pattern, you can either manually specify what type of build you want, or set the environment variable and just run npm run build.
Environmental variables in Amplify are configured under App Settings > Environmental Variables.

Difference between" npm run serve" and "npm run dev" in vuejs

What is the difference between npm run serve and npm run dev in vuejs. Why should i use npm run serve command to run the project

npm run serve basically is just saying "npm please run the command I defined under the name serve in package.json" the same happens with npm run dev.
Given this the commands can do the exact same thing, similar things, or very different things. Usually they are a shorthand for running a dev server on localhost, but it’s not a rule, only a convention.
So you'll need to check in your package.json file and look for
"scripts": {
"serve": "[list of commands here]",
"dev": "[list of commands here]"
},

How do you run Karma after installation?

I'm trying to use karma for different watch processes.
I installed karma globally with:
npm i -g karma
Then ran karma start karma.conf.js and it worked.
Now I need to install karma locally inside the project with
npm install karma
It seems to install it fine since I have the folder karma in node_modules, however, node_modules/karma/bin/karma seems not to be the executable file to run.
How should I run karma after installing it locally?

To run locally on Windows (I'm on Windows 10), I recommend adding the following to your package.json file.
"scripts": {
"test": "cd ./node_modules/karma/bin/ && karma start"
},
Then from the command line, type npm run test
I prefer to not install a cli globally for these kinds of tools and instead run them locally from my project using a script. This way I can quickly see what version is in the dev dependencies and don't have to worry about the global version being different from the local one.
"devDependencies": {
"karma": "^1.4.0"
}

To run Karma after installing it locally:
# Run Karma:
$ ./node_modules/karma/bin/karma start
Typing ./node_modules/karma/bin/karma start sucks and so you might find it useful to install karma-cli globally. You will need to do this if you want to run Karma on Windows from the command line.
$ npm install -g karma-cli
Then, you can run Karma simply by karma from anywhere and it will always run the local version.