For the past few days, I'm trying to publish my package to github by using semantic-release. Unfortunately, I can't publish the correct folder as source code (zip) file in my npm package hosted on github.
My github action pipeline:
on:
push:
branches:
- main
env:
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
defaults:
run:
working-directory: ./frontend
jobs:
release:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v3
- uses: actions/setup-node#v3
with:
node-version: 18
cache: 'npm'
cache-dependency-path: ./frontend
- name: Install packages
run: npm install
- name: Build frontend
run: npm run build
- name: Copy json file to dist dir
run: cp package.json ./dist
- name: Run semantic release and publish package
run: |
cd ./dist
pwd
npm run semantic-release
It's supposed to publish the dist folder, but I see the whole project directory as the source code output to npm. It's not publishing my build folder. When I run pwd, I'm on the correct path: /home/runner/work/test/test/frontend/dist
Semantic-release is also not respecting my property in my package.json file:
"files": [
"/dist"
]
I specifically want to output the dist folder, but unfortunately, everything is in the output folder except the dist folder.
I also tried adding a pkgRoot property to to the '#semantic-release/npm' module, but still! No dist folder being published.
['#semantic-release/npm', { 'pkgRoot': './dist' }],
What can be the issue of this problem?
I was also having this issue yesterday and this is what worked for me. Notice that I omitted a lot of configuration stuff from the files mentioned not to "bloat" the answer. Let me know if this works for you!
package.json
Remove the "files" key.
"main": "dist/index.js",
"types": "dist/index.d.ts",
"scripts": {
"build": "rm -rf dist && tsc --project tsconfig.build.json && cp package.json dist/package.json",
}
semantic-release/npm configuration
"#semantic-release/npm", { "pkgRoot": "./dist" }],
semantic-release/git configuration
[
"#semantic-release/git",
{
"assets": [
"package.json",
"README.md",
"CHANGELOG.md",
"dist/**/*.{js}"
],
"message": "chore: Release ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
}
]
tsconfig.json
"compilerOptions": {
"rootDir": "src",
"outDir": "./dist",
}
Related
Description:
During the deploy of firebase hosting, I received an error stating that 0 files were found. I have included my firebase.json file for reference.
Steps to reproduce:
Run the command firebase deploy --only hosting
Observe the error message stating that 0 files were found
Expected result:
The firebase hosting should be successfully deployed with the specified files.
Actual result:
An error is thrown stating that 0 files were found.
+ hosting: Finished running predeploy script.
i hosting[hosting-project]: beginning deploy...
i hosting[hosting-project]: found 0 files in hosting
+ hosting[hosting-project]: file upload complete
i hosting[hosting-project]: finalizing version...
+ hosting[hosting-project]: version finalized
i hosting[hosting-project]: releasing new version...
+ hosting[hosting-project]: release complete
+ Deploy complete!
Notes:
I have double-checked the file path in the firebase.json file and it
appears to be correct.
I have tried rerunning the deploy command multiple times with the same result
I have also tried deploying a
different project with the same firebase.json file, but the issue
persists.
In my firebase.json file, I am not targeting the dist folder directly because I am using the predeploy script to run npm run lint and npm run build before the deployment. However, I am not ignoring the dist folder with !dist% and !dist/*, which means I am not excluding it from the deployment.
Attached files:
firebase.json
{
"firestore": {
"port": "8080"
},
"functions": [
{
"source": "functions",
"codebase": "default",
"ignore": [
"node_modules",
".git",
"firebase-debug.log",
"firebase-debug.*.log"
],
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint"
]
}
],
"hosting":{
"public":"hosting",
"ignore": [
"*",
"!dist/",
"!dist/*",
],
"rewrites":[
{
"source":"**",
"destination":"dist/index.html"
}
],
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint",
"npm --prefix \"$RESOURCE_DIR\" run build"
]
}
}
I found a solution to resolve the issue of "0 files found" during the deploy of firebase hosting. It may not be the most elegant solution, but it does work. In the "predeploy" section of the hosting configuration, I added ".." at the end of the "npm run lint" and "npm run build" commands to go back to the root folder:
"npm --prefix \"$RESOURCE_DIR\\..\" run lint",
"npm --prefix \"$RESOURCE_DIR\\..\" run build"
This allowed me to target the dist folder directly in the hosting configuration, as specified in the official documentation. Here is the modified hosting configuration:
"hosting":{
"public":"hosting/dist",
"ignore": [
"**/.*",
"**/node_modules/**"
],
"rewrites":[
{
"source":"**",
"destination":"/index.html"
}
],
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\\..\" run lint",
"npm --prefix \"$RESOURCE_DIR\\..\" run build"
]
}
I hope this helps anyone else who may be experiencing the same issue.
I'm building a Nuxt application. I've done some research but found no definitive solution.
Step 6/8 : EXPOSE 8080
---> Running in e5d36d6e86fe
Removing intermediate container e5d36d6e86fe
---> f655ef5cccc2
Step 7/8 : RUN npm run build
---> Running in f6445150af4c
> nuxt build
ℹ Production build
ℹ Bundling for server and client side
ℹ Target: server
ℹ Using components loader to optimize imports
ℹ Discovered Components: .nuxt/components/readme.md
✔ Builder initialized
✔ Nuxt files generated
ℹ Warming up worker pools
✔ Worker pools ready
ℹ Compiling Client
✔ Client: Compiled successfully in 1.00h
ℹ Compiling Server
✔ Server: Compiled successfully in 1.81m
Update Config
There are several experimental ways of improving build speed.
https://nuxtjs.org/api/configuration-build#parallel
https://nuxtjs.org/api/configuration-build#cache
https://nuxtjs.org/api/configuration-build#hardsource
build: {
// standalone: true,
analyze: false,
parallel: true,
cache: true,
hardSource: false,
splitChunks: {
layouts: false,
pages: false,
components: false,
},
html: {
minify: {
minifyCSS: false,
minifyJS: false
}
},
loaders: {
vue: {
prettify: false
}
},
transpile: ["#coreui/vue", "#coreui/utils", "#ag-grid-community/vue"],
extend(config, ctx) {
if (ctx.isDev) {
config.devtool = ctx.isClient ? "source-map" : "inline-source-map";
}
}
}
Dockerfile
FROM node:14
COPY package*.json ./tmp/
RUN cd /tmp && npm install
RUN mkdir -p /usr/src/app && cp -a /tmp/node_modules /usr/src/app
WORKDIR /usr/src/app
COPY . .
#COPY package*.json ./
#RUN npm install
EXPOSE 8080
RUN npm run build
# RUN npm run generate
CMD [ "npm", "run", "start" ]
I'm updating a private node_module that we install in projects via bitbucket. The package has some overrides that get bundled up via webpack and that bundle is used directly (i.e. outside of the build tools used for the project I'm installing the module for).
I would like to fire the module's build command as a postinstall script so that when we install or update the module in the main project the bundle is rebuilt.
In the module's package.json I have this:
"scripts": {
"build": "webpack",
"dev": "webpack --watch",
"serve": "webpack-dev-server",
"postinstall": "npm run build"
},
and I have the following webpack.config.js file:
const path = require("path")
module.exports = {
mode: "development",
watch: false,
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
devServer: {
contentBase: "dist",
},
module: {
rules: [
{
test: /\.js/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env"],
},
},
},
],
},
}
And I've confirmed that firing npm run build works just fine in the modules codebase, but when I go to update the module in the main codebase I get errors:
Webpack is blowing up on the option chaining which I thought would be handled by the babel loader in the module's webpack config.
I double checked my module's package.json file and it definitely has babel's presets in the regular dependencies and not the dev dependencies (i.e. it gets installed as part of the module install).
Am I doing something wrong here? It seems like if the same build process works
Make sure your exports in the package.json points to the sources in the dist:
"exports": {
".": "./dist/bundle.js"
},
https://nodejs.org/api/packages.html#package-entry-points
When run locally, it seems to work fine but crashes when its on pipeline
EDIT: After removing npx, it produces a different error:
I have followed the advice of installing the plugin:
npm install eslint-plugin-react#latest --save-dev
But seeps to repeat itself.
Here's my retracted bitbucket-pipelines.yml config:
- step:
name: CI
caches:
- node
script:
- npm install
- npm run lint
- npm run test
eqautes to package.json
"lint": "eslint --ext .js,.ts,.tsx src --ignore-pattern node_modules/",
"test": "jest --verbose --colors --coverage",
Here's my eslint config file:
{
"env": {
"browser": true,
"es6": true,
"jest": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"airbnb"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react",
"#typescript-eslint"
],
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".ts", ".tsx"],
"paths": ["src"]
}
}
},
"rules": {
...
}
}
}
An update to Visual Studio Code fixed this for me.
I was unwittingly on a 2 year old version.
Fixed it by removing NODE_ENV in pipelines's .env due to this:
npm install (in package directory, no arguments):
Install the dependencies in the local node_modules folder.
In global mode (ie, with -g or --global appended to the command), it
installs the current package context (ie, the current working
directory) as a global package.
By default, npm install will install all modules listed as
dependencies in package.json.
With the --production flag (or when the NODE_ENV environment variable
is set to production), npm will not install modules listed in
devDependencies.
NOTE: The --production flag has no particular meaning when adding a
dependency to a project.
it happened to to.
tried hard to find the answer.
Apparently, eslint searchs for a roots in the working directory, or something like that, to find the modules to import.
It happens that i've had two apps in my project folder, and only one had the eslintrc.josn.
I fixed to use eslint on the entire project oppening the vs settings.json and add the following:
"eslint.workingDirectories": ["./app1","./app2"...]
if u have more than one app on ur project folder, u should try it
I had problems to get an electron project using webpack to get packed as an MSI installer. I came around electron-wix-msi package. It's a wrapper for the great WIX toolkit. The advantage is, that it is more Windows like.
However, the docs are unclear and not sufficient to get it immediately running. Finally I got it and want to share the steps here.
I used TypeScript for development and got a working installation for all parts, including MSI.
This is for Windows users only. The process describes the creation of an Windows-Installer (MSI).
Install Wix Toolkit as mentioned in docs
Add path to candle.exe and light.exe, which is "C:\Program Files (x86)\WiX Toolset v3.11\bin" to path variable. Check that if you enter "candle" at prompt the candle.exe executes.
Create installation file as make-msi.ts in folder build (just a suggestion, any path will do it):
import * as msi from 'electron-wix-msi';
import * as path from 'path';
// Step 1: Instantiate the MSICreator
const msiCreator = new msi.MSICreator({
appDirectory: path.resolve('release/win-unpacked'), // result from electron-builder
description: 'Some text',
exe: 'MyExe',
name: 'MyExe',
manufacturer: 'Joerg Krause',
version: '0.5.0',
language: 1033,
arch: 'x86',
outputDirectory: path.resolve('release/msi/')
});
async function createMsi() {
// Step 2: Create a .wxs template file
await msiCreator.create();
// Step 3: Compile the template to a .msi file
await msiCreator.compile();
}
console.log('Invoke MSI Builder');
createMsi();
release/win-unpacked is the output from electron-builder.
Add tsconfig.json with appropriate settings in same folder build:
{
"compilerOptions": {
"target": "es2015",
"module": "commonjs",
"moduleResolution": "node",
"resolveJsonModule": true,
"sourceMap": true,
"lib": [
"es2018",
"es5",
"dom"
],
"experimentalDecorators": true,
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true,
"removeComments": false,
"outDir": "js",
"typeRoots": [
"../node_modules/#types",
]
}
}
Check both files in the folder build
Add npm run command like this to your package.json:
cd build && tsc && cd .. && node build/js/make-msi.js
My whole scripts block looks like this:
"scripts": {
"dev": "tsc win.ts --outDir ./dist && cross-env NODE_ENV=dev && npm run prev",
"build": "rimraf ./dist && webpack",
"start": "rimraf ./dist && webpack && electron .",
"prev": "electron .",
"test": "jest",
"msi": "cd build && tsc && cd .. && node build/js/make-msi.js",
"pack": "npm run build && rimraf ./release && build --dir && npm run msi",
"dist": "build"
}
This compiles the TypeScript into ES and executes the script with npm run msi. After a while you have your MSI.
Also, I had much more success using electron-builder instead of electron-packager.
For those who want to get more, my setup is as this:
I write my apps with HTML 5 API (no React/Angular or so). I can really recommend this for small and medium apps.
I use TypeScript 3 for all coding stuff
I use SASS for all CSS stuff
Using webpack to compile, optimise and pack
I use electron-builder to bundle
I use the process described above to make a Windows package.
Great tutorial. Your tsconfig.json lacks one line to get "tsc" work, otherwise you will get an error like error TS2307: Cannot find module 'path':
"types": ["node"],