publish to NPM via Action

Author: GODrums

.github/workflows/publish.yml

@@ -0,0 +1,44 @@
+name: Publish to npm
+
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Cache node modules
+        uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build library
+        run: npm run build-package
+
+      - name: Test library
+        run: npm test -- --watch=false --browsers=ChromeHeadless
+
+      - name: Publish to npm
+        run: |
+          cd dist/ngx-angular-query-builder
+          npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

PUBLISH.md

@@ -1,14 +1,30 @@
-# Publishing to GitHub Package Registry
+# Publishing to npm Registry
 
-This guide explains how to publish the `ngx-angular-query-builder` library to GitHub Package Registry.
+This guide explains how to publish the `@csfloat/ngx-angular-query-builder` library to the npm registry.
 
 ## Prerequisites
 
-1. **GitHub Repository**: Ensure your code is pushed to a GitHub repository
-2. **GitHub Personal Access Token**: Create a token with `write:packages` scope
-3. **Updated Configuration**: Make sure all configuration files are properly set up
+1. **npm Account**: Create an account at [npmjs.com](https://www.npmjs.com/)
+2. **npm Access Token**: Create an automation token from your npm account settings
+3. **GitHub Repository**: Ensure your code is pushed to a GitHub repository
+4. **Organization Access**: Ensure you have publish permissions for the `@csfloat` organization on npm
 
-## Local Publishing (Manual)
+## Setup Steps
+
+### 1. Configure npm Token for GitHub Actions
+
+1. **Create npm Access Token:**
+   - Go to [npmjs.com](https://www.npmjs.com/) → Account Settings → Access Tokens
+   - Click "Generate New Token" → "Automation"
+   - Copy the token
+
+2. **Add token to GitHub Secrets:**
+   - Go to your GitHub repository → Settings → Secrets and variables → Actions
+   - Click "New repository secret"
+   - Name: `NPM_TOKEN`
+   - Value: Your npm access token
+
+### 2. Local Publishing (Manual)
 
 If you want to publish manually:
 
@@ -22,45 +38,142 @@ If you want to publish manually:
    cd dist/ngx-angular-query-builder
    ```
 
-3. **Login to GitHub Package Registry:**
+3. **Login to npm:**
    ```bash
-   npm login --registry=https://npm.pkg.github.com
+   npm login
    ```
-   - Username: Your GitHub username (lowercase)
-   - Password: Your GitHub Personal Access Token (classic)
+   - Username: Your npm username
+   - Password: Your npm password
+   - Email: Your npm email
+   - One-time password: If you have 2FA enabled
 
 4. **Publish:**
    ```bash
    npm publish
    ```
 
-## Installation for Users
+### 3. Automated Publishing (Recommended)
+
+The project is configured for automated publishing via GitHub Actions.
 
-Once published, users can install your package by:
+#### Publishing Process:
 
-1. **Creating `.npmrc` in their project:**
+1. **Update version number:**
+   ```bash
+   # Update version in projects/ngx-angular-query-builder/package.json
+   # For example, change "19.0.0" to "19.0.1"
    ```
-   @YOUR_GITHUB_USERNAME:registry=https://npm.pkg.github.com
-   //npm.pkg.github.com/:_authToken=THEIR_GITHUB_TOKEN
+
+2. **Create a new release:**
+   - Go to your GitHub repository
+   - Click "Releases" → "Create a new release"
+   - Tag version: `v19.0.1` (match your package version)
+   - Release title: `Release v19.0.1`
+   - Describe the changes
+   - Click "Publish release"
+
+3. **GitHub Actions will automatically:**
+   - Install dependencies
+   - Build the library
+   - Run tests
+   - Publish to npm
+
+#### Manual Trigger:
+You can also manually trigger the workflow:
+- Go to Actions tab in your GitHub repository
+- Select "Publish to npm" workflow
+- Click "Run workflow"
+
+## Version Management
+
+Before publishing a new version:
+
+1. **Update the library package.json:**
+   ```json
+   // projects/ngx-angular-query-builder/package.json
+   {
+     "version": "19.0.1"  // Update this
+   }
    ```
 
-2. **Installing the package:**
+2. **Commit and tag:**
    ```bash
-   npm install @YOUR_GITHUB_USERNAME/ngx-angular-query-builder
+   git add .
+   git commit -m "Release v19.0.1"
+   git tag v19.0.1
+   git push origin main --tags
    ```
 
+## Installation for Users
+
+Once published, users can install your package easily:
+
+```bash
+npm install @csfloat/ngx-angular-query-builder
+```
+
+No authentication required! 🎉
+
 ## Troubleshooting
 
 ### Common Issues:
 
 1. **Authentication Error:**
-   - Ensure you are using a GitHub classic access token with `write:packages` scope
-   - Verify the token is not expired
+   - Ensure your npm token is valid and has publish permissions
+   - Check that the NPM_TOKEN secret is correctly set in GitHub
+   - Verify you have access to publish under the `@csfloat` organization
+
+2. **Organization Access:**
+   - You must be a member of the `@csfloat` organization on npm
+   - The organization must exist on npm
+   - Your npm token must have permission to publish to the organization
+
+3. **Version Already Published:**
+   - You cannot publish the same version twice
+   - Increment the version number in package.json
+
+4. **Build Errors:**
+   - Run `npm run build-package` locally to check for issues
+   - Ensure all dependencies are correctly specified
+
+### Useful Commands:
+
+```bash
+# Check what will be published
+cd dist/ngx-angular-query-builder
+npm pack --dry-run
+
+# View package info
+npm view @csfloat/ngx-angular-query-builder
+
+# List published versions
+npm view @csfloat/ngx-angular-query-builder versions --json
+
+# Check if organization exists
+npm org ls @csfloat
+```
+
+## Security Notes
+
+- Never commit npm tokens to your repository
+- Use GitHub secrets for sensitive information
+- Regularly rotate your npm access tokens
+- Consider enabling 2FA on your npm account
+
+## Organization Setup
+
+If the `@csfloat` organization doesn't exist on npm yet:
+
+1. **Create the organization:**
+   - Go to [npmjs.com](https://www.npmjs.com/)
+   - Click your profile → "Add Organization"
+   - Name: `csfloat`
+   - Choose organization type (free for public packages)
 
-2. **Package Not Found:**
-   - Check the package name includes the @csfloat scope
-   - Ensure the repository is public and you have access to it
+2. **Add team members:**
+   - Invite other CSFloat team members to the organization
+   - Set appropriate permissions for each member
 
-4. **Workflow Failures:**
-   - Check the Actions tab for detailed error logs
-   - Ensure GITHUB_TOKEN has sufficient permissions
+3. **Configure organization settings:**
+   - Set up organization profile and description
+   - Configure package access policies if needed

README.md

@@ -34,23 +34,10 @@ Use the following versions depending upon your angular version
 
 # Installation
 
-## From GitHub Package Registry
-
-To install from GitHub Package Registry, you need to:
-
-1. Create a `.npmrc` file in your project root with:
-```
-@your-github-username:registry=https://npm.pkg.github.com
-//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN
-```
-
-2. Install the package:
 ```bash
 npm install @csfloat/ngx-angular-query-builder
 ```
 
-**Note:** You'll need a [GitHub Personal Access Token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token) with `read:packages` scope to install packages from GitHub Package Registry.
-
 # Examples
 
 npm install ngx-angular-query-builder
@@ -60,7 +47,7 @@ npm install ngx-angular-query-builder
 ##### `app.module.ts`
 
 ```javascript
-import { NgxAngularQueryBuilderModule } from "ngx-angular-query-builder";
+import { NgxAngularQueryBuilderModule } from "@csfloat/ngx-angular-query-builder";
 import { AppComponent } from "./app.component"
 
 @NgModule(imports: [
@@ -81,7 +68,7 @@ export class AppModule { }
 ##### `app.component.ts`
 
 ```javascript
-import { QueryBuilderConfig } from 'ngx-angular-query-builder';
+import { QueryBuilderConfig } from '@csfloat/ngx-angular-query-builder';
 
 export class AppComponent {
   query = {

package.json

@@ -9,7 +9,11 @@
     "watch-package": "ng build ngx-angular-query-builder --watch --configuration development",
     "watch-demo": "ng build demo --watch --configuration development",
     "test": "ng test",
-    "prettier": "npx prettier --write **"
+    "prettier": "npx prettier --write **",
+    "publish:dry-run": "npm run build-package && cd dist/ngx-angular-query-builder && npm pack --dry-run",
+    "publish:local": "npm run build-package && cd dist/ngx-angular-query-builder && npm publish",
+    "check:package": "npm view @csfloat/ngx-angular-query-builder",
+    "check:org": "npm org ls @csfloat"
   },
   "private": true,
   "dependencies": {
@@ -44,4 +48,4 @@
     "ng-packagr": "19.2.2",
     "typescript": "5.8.3"
   }
-}
+}

projects/ngx-angular-query-builder/package.json

@@ -7,8 +7,23 @@
     "type": "git",
     "url": "git+https://github.com/csfloat/ngx-angular-query-builder.git"
   },
+  "author": "CSFloat",
+  "keywords": [
+    "angular",
+    "query-builder",
+    "ngx",
+    "typescript",
+    "angular-query-builder",
+    "query",
+    "builder",
+    "filter"
+  ],
+  "homepage": "https://github.com/csfloat/ngx-angular-query-builder",
+  "bugs": {
+    "url": "https://github.com/csfloat/ngx-angular-query-builder/issues"
+  },
   "publishConfig": {
-    "registry": "https://npm.pkg.github.com"
+    "access": "public"
   },
   "peerDependencies": {
     "@angular/common": "^19.2.14",