Different svelte variable value for npm run dev and npm run build - npm

I'm developing a svelte+tailwind+PHP site with rollup.js. How can I set a variable in the svelte source files depending on if I'm running npm run dev or npm run build? I'd like the different builds to connect to different back-end servers.
This is my package.json in case that's relevant. I'm new to most of these tools, so please bear with me and correct me if I've misunderstood too much. After running npm run build, I run a script that scp's the build folder to the production server.
{
"name": "my-app",
"version": "1.0.0",
"scripts": {
"watch:tailwind": "postcss public/tailwind.css -o public/index.css -w",
"build:tailwind": "NODE_ENV=production postcss public/tailwind.css -o public/index.css",
"dev": "run-p autobuild watch:tailwind",
"build": "npm run build:tailwind && rollup -c",
"start": "sirv public --single --host",
"start:dev": "sirv public --single --dev",
"autobuild": "rollup -c -w"
},
"devDependencies": {
"#rollup/plugin-commonjs": "^16.0.0",
"#rollup/plugin-node-resolve": "^10.0.0",
"autoprefixer": "^10.0.4",
"d3-interpolate": "^2.0.1",
"npm-run-all": "^4.1.5",
"postcss": "^8.1.10",
"postcss-cli": "^8.3.0",
"postcss-nested": "^5.0.1",
"postcss-reporter": "^7.0.2",
"rollup": "^2.3.4",
"rollup-plugin-css-only": "^3.0.0",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-svelte": "^7.0.0",
"rollup-plugin-terser": "^7.0.0",
"svelte": "^3.0.0",
"svelte-dnd-action": "^0.6.22",
"svelte-loading-spinners": "^0.1.1",
"tailwindcss": "^2.0.1"
},
"dependencies": {
"sirv-cli": "^1.0.0"
}
}

You can use #rollup/plugin-replace:
A Rollup plugin which replaces strings in files while bundling.
plugins: [
replace({
// alternatively, one could pass process.env.NODE_ENV or 'development` to stringify
'process.env.NODE_ENV': JSON.stringify('production')
})
]

Related

gitlab npm publish not working: This command requires you to be logged in

I am new to this gitlab world.
I have one private project. I am able to publish the package using command prompt.
My .npmrc file
#ui-practice:registry=https://gitlab.MyCompany.com/api/v4/packages/npm/
//gitlab.MyCompany.com/api/v4/packages/npm/:_authToken=PrivateToken
//gitlab.MyCompany.com/api/v4/projects/MyProjectID/packages/npm/:_authToken=PrivateToken
But I am unable to publish using Gitlab CICD, it giving below error
npm ERR! need auth This command requires you to be logged in to https://gitlab.MyCompany.com/api/v4/projects/MyProjectID/packages/npm/
npm ERR! need auth You need to authorize this machine using `npm adduser`
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Windows\system32\config\systemprofile\AppData\Local\npm-cache\_logs\2022
my .gitlab-ci.yml
image: node:latest
stages:
- deploy
deploy:
stage: deploy
script:
- echo "#MyScope:registry=https://${CI_SERVER_HOST}/api/v4/packages/npm/">.npmrc
- echo "//${CI_SERVER_HOST}/api/v4/packages/npm/:_authToken=${CI_JOB_TOKEN}">>.npmrc
- echo "//${CI_SERVER_HOST}/api/v4/projects/${CI_PROJECT_ID}/packages/npm/:_authToken=${CI_JOB_TOKEN}">>.npmrc
- echo "Created the following .npmrc:"; cat .npmrc
- npm publish
CI_JOB_TOKEN - I have created deploy token and added in gitlab variables
My package.json
{
"name": "#MyScope/MyPackageName",
"version": "1.0.23",
"description": "My Library.",
"publishConfig": {
"#MyScope:registry": "https://gitlab.MyCompany.com/api/v4/projects/MyProjectID/packages/npm/"
},
"scripts": {
"test": "web-test-runner \"./stories/**/*.test.js\" --node-resolve",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"chromatic": "npx chromatic --project-token=78290d9f7c4f",
"build": "rimraf build && rollup -c",
"prepublishOnly": "npm install && npm run build",
"pack:dev": "npm pack && move *.tgz node_modules_offline/"
},
"repository": {
"type": "git",
"url": "https://gitlab.MyCompany.com/MyScope/MyPackageName.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#applitools/eyes-storybook": "^3.27.6",
"#babel/core": "^7.17.7",
"#babel/plugin-proposal-class-properties": "^7.16.7",
"#babel/plugin-proposal-decorators": "^7.17.2",
"#babel/plugin-proposal-export-default-from": "^7.16.7",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
"#babel/plugin-proposal-object-rest-spread": "^7.17.3",
"#babel/plugin-proposal-optional-chaining": "^7.16.7",
"#babel/plugin-proposal-private-methods": "^7.16.11",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-transform-arrow-functions": "^7.16.7",
"#babel/plugin-transform-block-scoping": "^7.16.7",
"#babel/plugin-transform-classes": "^7.16.7",
"#babel/plugin-transform-destructuring": "^7.17.7",
"#babel/plugin-transform-for-of": "^7.16.7",
"#babel/plugin-transform-parameters": "^7.16.7",
"#babel/plugin-transform-runtime": "^7.17.0",
"#babel/plugin-transform-shorthand-properties": "^7.16.7",
"#babel/plugin-transform-spread": "^7.16.7",
"#babel/preset-env": "^7.16.11",
"#babel/preset-typescript": "^7.16.7",
"#rollup/plugin-babel": "^5.3.1",
"#rollup/plugin-commonjs": "^21.1.0",
"#rollup/plugin-node-resolve": "^13.2.1",
"#rollup/plugin-strip": "^2.1.0",
"#rollup/plugin-typescript": "^8.3.2",
"#storybook/addon-a11y": "^6.4.19",
"#storybook/addon-actions": "^6.4.19",
"#storybook/addon-essentials": "^6.4.19",
"#storybook/addon-links": "^6.4.19",
"#storybook/addons": "^6.4.19",
"#storybook/preset-scss": "^1.0.3",
"#storybook/theming": "^6.4.19",
"#storybook/web-components": "^6.4.19",
"babel-loader": "^8.2.3",
"babel-plugin-macros": "^3.1.0",
"babel-plugin-polyfill-corejs3": "^0.5.2",
"chromatic": "^6.5.4",
"core-js": "^3.21.1",
"css-loader": "^5.2.7",
"eslint": "^8.11.0",
"html-minifier-terser": "^7.0.0-alpha.2",
"rimraf": "^3.0.2",
"rollup": "^2.70.2",
"rollup-plugin-copy": "^3.4.0",
"rollup-plugin-dts": "^4.2.1",
"rollup-plugin-minify-html-literals": "^1.2.6",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-scss": "^3.0.0",
"rollup-plugin-terser": "^7.0.2",
"sass": "^1.49.9",
"sass-loader": "^10.2.1",
"storybook-dark-mode": "^1.0.9",
"style-loader": "^2.0.0"
},
"dependencies": {
"#esm-bundle/chai": "^4.3.4-fix.0",
"i18next": "^21.6.14",
"lit-html": "^2.2.0",
"node-sass": "^6.0.1"
},
"main": "build/cjs/index",
"module": "build/esm/index",
"files": [
"build"
]
}
what is missing? any idea why gitlab asked me login again?
need auth This command requires you to be logged in to
It's able to build the artifacts only issue in publishing the package using CICD, from visual studio terminal it's working fine.
i had the same problem and the reason it doesn't work for both of us is related to the registry endpoint we were using.
Both of us are using instance level endpoint, that can't be used to publish anything.
This is your .npmrc which contains, like mine, a instance level registry
#MyScope:registry=https://gitlab.MyCompany.com/api/v4/packages/npm/
//gitlab.MyCompany.com/api/v4/packages/npm/:_authToken=PrivateToken
//gitlab.MyCompany.com/api/v4/projects/1233/packages/npm/:_authToken=PrivateToken
This is your extract from .gitlab-ci.yml
script:
- echo "#MyScope:registry=https://${CI_SERVER_HOST}/api/v4/packages/npm/">.npmrc
- echo "//${CI_SERVER_HOST}/api/v4/packages/npm/:_authToken=${CI_JOB_TOKEN}">>.npmrc
- echo "//${CI_SERVER_HOST}/api/v4/projects/${CI_PROJECT_ID}/packages/npm/:_authToken=${CI_JOB_TOKEN}">>.npmrc
- echo "Created the following .npmrc:"; cat .npmrc
- npm publish
My solution was change the first echo to:
- echo "#MyScope:registry=https://${CI_SERVER_HOST}/api/v4/projects/${CI_PROJECT_ID}/packages/npm/">.npmrc
This switched from instance level package to project level package where you can actually publish your package.
I had the same issue and I could fix it with the right url in package.json. Hope this helps.
"publishConfig": {
"#company:registry": "https://gitlab.com/api/v4/projects/project_id/packages/npm/"
},
Compare the output of echo "Created the following .npmrc:"; cat .npmrc to your local .npmrc file. Are there any discrepancies? Is it possible that one or more of the environment variables within CI are blank?
Thank you for your response, Both are same
My local .npmrc file
#MyScope:registry=https://gitlab.MyCompany.com/api/v4/packages/npm/
//gitlab.MyCompany.com/api/v4/packages/npm/:_authToken=PrivateToken
//gitlab.MyCompany.com/api/v4/projects/1233/packages/npm/:_authToken=PrivateToken
And out put from .yml file i.e. cat .npmrc
Created the following .npmrc:
#MyScope:registry=https://gitlab.MyCompany.com/api/v4/packages/npm/
//gitlab.MyCompany.com/api/v4/packages/npm/:_authToken=PrivateToken
//gitlab.MyCompany.com/api/v4/projects/1233/packages/npm/:_authToken=PrivateToken

Unable to start a micro front-end app in single-SPA application

I am facing error while trying to start sub-app in Single-SPA application. Basically, I am trying to develop a kind of util app (sub app in Single-SPA) which contains Sockjs, Stomp-client etc. I have removed node modules and package-lock.json and installed node modules again. When I try to start application I am facing below error.
Error:
[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
- options has an unknown property 'firewall'. These properties are valid:
object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }
- options.client has an unknown property 'host'. These properties are valid:
object { logging?, overlay?, progress?, webSocketTransport?, webSocketURL? }
Command used for running the app : npm start
package.json
{
"name": "#sudeep/livedoc",
"scripts": {
"start": "webpack serve",
"start:standalone": "webpack serve --env standalone",
"build": "webpack --mode=production",
"analyze": "webpack --mode=production --env analyze",
"lint": "eslint src --ext js,ts,tsx",
"format": "prettier --write .",
"check-format": "prettier --check .",
"prepare": "husky install",
"test": "cross-env BABEL_ENV=test jest --passWithNoTests",
"watch-tests": "cross-env BABEL_ENV=test jest --watch",
"coverage": "cross-env BABEL_ENV=test jest --coverage"
},
"devDependencies": {
"#babel/core": "^7.14.6",
"#babel/eslint-parser": "^7.14.7",
"#babel/plugin-transform-runtime": "^7.14.5",
"#babel/preset-env": "^7.14.7",
"#babel/preset-typescript": "^7.14.5",
"#babel/runtime": "^7.14.6",
"babel-jest": "^27.0.5",
"concurrently": "^6.2.0",
"cross-env": "^7.0.3",
"eslint": "^7.29.0",
"eslint-config-prettier": "^8.3.0",
"eslint-config-ts-important-stuff": "^1.1.0",
"eslint-plugin-prettier": "^3.4.0",
"husky": "^6.0.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^27.0.5",
"jest-cli": "^27.0.5",
"prettier": "^2.3.2",
"pretty-quick": "^3.1.1",
"ts-config-single-spa": "^2.0.1",
"typescript": "^4.3.4",
"webpack": "^5.40.0",
"webpack-cli": "^4.7.2",
"webpack-config-single-spa": "^4.0.0",
"webpack-config-single-spa-ts": "^2.2.2",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.8.0"
},
"dependencies": {
"#types/jest": "^26.0.23",
"#types/systemjs": "^6.1.0",
"#types/webpack-env": "^1.16.0",
"fast-json-patch": "3.0.0-1",
"rxjs": "6.6.0",
"stompjs": "2.3.3",
"sockjs-client": "1.5.0"
}
}
I resolved this problem by updating "webpack-config-single-spa-ts" from 2.0.0 to 3.0.0.
The firewall option has been renamed as of webpack-dev-server v4.0.0-rc.0
You should use allowedHosts instead of firewall.
This problem has been fixed in version 4.0.0 of webpack-config-single-spa
, so upgrading this package will fix your issue as well.
I had the same situation in React.
The package.json file for the project had:
"webpack-config-single-spa-react": "2.0.0",
Therefore, when I executed
npm i
npm installed the exact required version of this component (2.0.0). It is possible to verify the installed version, if you look under
./node_modules/webpack-config-single-spa-react/package.json
I manually deleted the folder webpack-config-single-spa-react.
Edited the package.json in my project to request a version above 3.0.0:
"webpack-config-single-spa-react": "^3.0.0",
executed "npm install"
verified that at least version 3.0.0 of the package was installed by looking at:
./node_modules/webpack-config-single-spa-react/package.json
The actions above resolved the problem.
Modify in your package.json this module webpack-dev-server to 4.0.0-beta.0 and rebuild.
My versions:
packages

Installing locally and globally a npm depency produces an error while executing the command line

I am trying to install locally and globally a npm depency by using npm install -g ..
The package.json seems to be ok :
{
"private": true,
...
"main": "dist/main.js",
"bin": {
"gbts": "./dist/main.js"
},
"scripts": {
"build": "tsc"
},
...
"dependencies": {
"minimist": "^1.2.5",
"ora": "^5.1.0",
"ts2c": "^2.2.7",
"yargs": "^16.1.1"
},
"devDependencies": {
"#types/node": "^14.14.10",
"eslint": "6.8.0",
"install": "^0.13.0",
"npm": "^6.14.9",
"tslint": "^5.12.1",
"typescript": "^3.3.3"
}
}
This works perfetly, but when I invoke the command gbts, I still have this error pop in error on windows:
It occurs on the following line :
const parse = require("minimist");
I do not understand why this produce a syntax error, project's dependencies are missing?
Any solution in my case?

How to push to netlify in production mode [Nuxt JS]

I have my app created with nuxt js. I just want to push my app on Netlify.
So firstly i configure my deploy settings :
Repository on git
Base directory : Not set
Build command npm run build && npm run start
Publish directory .nuxt/dist
My app is build correctly but npm run start just launch on localhost:3000
I decided to modify config Host, I don't know if it's the best solution ?
{
"name": "app-nuxt",
"version": "1.0.0",
"description": "My remarkable Nuxt.js project",
"author": "wyllisMonteiro",
"private": true,
"config": {
"nuxt": {
"host": "https://mywebsite.com"
}
},
"scripts": {
"dev": "HOST=localhost PORT=3000 nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"test": "jest"
},
"dependencies": {
"#nuxtjs/axios": "^5.3.6",
"cookieparser": "^0.1.0",
"cross-env": "^5.2.0",
"js-cookie": "^2.2.0",
"nuxt": "^2.4.0",
"vee-validate": "^2.2.0",
"vuelidate": "^0.7.4",
"vuetify": "^1.5.5",
"vuetify-loader": "^1.2.1"
},
"devDependencies": {
"#vue/test-utils": "^1.0.0-beta.27",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^24.1.0",
"coffee-loader": "^0.9.0",
"coffeescript": "^2.4.0",
"jest": "^24.1.0",
"node-sass": "^4.11.0",
"nodemon": "^1.18.9",
"pug": "^2.0.3",
"pug-plain-loader": "^1.0.0",
"sass-loader": "^7.1.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-jest": "^3.0.3"
}
}
I want to launch in localhost:3000 by executing npm run dev
AND https://mywebsite.com by executing npm run start
Can you tell me if there is some modifications in my package.json or in my deploy settings on Netlify
For anyone that stumbles across this in the future, the problem you're experiencing is due to a misunderstanding with what services Netlify offers.
Specifically, they are primarily a static site host, which means they will host your built files, and serve them for you. They will not run your server, which means nuxt start will not run.
Instead, you should be using nuxt generate to generate the static files of your app, and telling Netlify where the output folder is.
For example, the "build settings" on Netlify:
Repository github.com/example/example
Base directory Not set
Build command npm run generate
Publish directory dist
This will properly deploy a Nuxt app, assuming you haven't changed the default build folder. For clarification, the .nuxt folder contains both client and server files, and can only be used when running your own Nuxt server on an instance of some kind.
As it looks you need to tweak your deployment command. Go to Netlify and try changing it to npm install; npm run build. This should resolve the problem.

How to add Webpack 3.8.1 to a Vue project

say I've go this scaffolding : https://github.com/vuejs/vue-cli
I want to add Webpack 3.8.1 to it.
there's already a "build" folder with lots of webpack files in it :
but (one of) the issue(s) is running "webpack" in the project's root returns :
https://webpack.js.org/concepts/ this si the doc I'm supposed to go by.
there's no real example.
it's got :
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};
which I adapted to the best of my ability to :
const path = require('path');
module.exports = {
entry: './src/entry.js',
output: {
path: path.resolve(entry, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};
I also added a entry.js file containing nothing under src :
and I edited my package.json file to include:
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"node-sass": "^4.5.3",
"sass-loader": "^3.2.3",
"style-loader": "^0.19.0",
"extract-text-webpack-plugin": "^3.0.1"
},
"devDependencies": {
"sinon": "^4.0.1",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.3",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
and ran :
npm install
npm update
I feel I'm getting somewhat close but I still cannot manage to use the new webpack.
I put my comment as answer to be able to close this question and (hopefuly) help others future users.
I think that your problem is to try to use webpack, you should use the npm run script like: npm run dev or npm run prod, and then the vue+webpack will do the work for you, placing the files where the config says (webpack.base.dev.conf for instance).
If you take a look at package.json, you could see this part:
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
},
Every one can be executed with npm run X.
Hope it helps!