I will Share my Point

Why Your Payload CMS Docker Build Fails on MongoDB (and Why It Should Never Need It)

2026-09-08T12:19:40.810+03:00

If you deploy a Next.js + Payload CMS site as a Docker image, sooner or later you will meet this error in your build logs:

Error: missing secret key. A secret key is needed to secure Payload.
  payloadInitError: true
> Build error occurred
Error: Failed to collect page data for /posts/[slug]

And if you "fix" that with a dummy secret, its sibling shows up right behind it:

ERROR: cannot connect to MongoDB. Details: Invalid scheme, expected connection
string to start with "mongodb://" or "mongodb+srv://"
Error occurred prerendering page "/"

The confusing part: your app works perfectly in development, and the database is up and healthy in production. So why does building an image want to talk to MongoDB at all?

To answer that, we need to look at what Next.js and Payload each do — and at exactly when and where your code runs.

Part 1: The cast of characters

Next.js is not just a compiler

When you run next build, two very different things happen:

Compilation — TypeScript and React are bundled into optimized server and client code. This is what most people picture when they hear "build".
Static generation (prerendering) — Next.js then executes parts of your application. Any page that can be rendered ahead of time (SSG/ISR) is rendered right there in the build, and the resulting HTML is baked into the output. To do that, Next.js runs your generateStaticParams functions, your layouts, and the page components themselves.

Step 2 is the one that surprises people. Building a Next.js app is not a passive transformation of source code — your application code runs during the build, including any data fetching those pages do.

Payload CMS lives inside your Next.js app

Payload 3 is a "Next-native" CMS: it isn't a separate service you call over HTTP, it's a library mounted inside your Next.js project. The admin panel is a route in your app, and your pages fetch content through Payload's Local API:

const payload = await getPayload({ config: configPromise })
const posts = await payload.find({ collection: 'posts', ... })

This is fantastic for DX — no network hop, full type safety, one deployment unit. But getPayload() initializes the CMS: it validates that PAYLOAD_SECRET is set (it signs auth tokens with it) and connects Mongoose to DATABASE_URL. No secret → it throws. No reachable MongoDB → it throws.

Put the two together

Now connect the dots:

next build executes pages and generateStaticParams.
Those call payload.find(...).
payload.find(...) initializes Payload, which demands a secret and a live MongoDB.

So a completely standard Payload project has an implicit, easy-to-miss requirement: next build needs a database connection. In development you never notice, because your .env and local MongoDB are always there. The build "just works" — for the wrong reason.

And it's rarely just one page. In our project the build-time database touchpoints were:

Code that runs during `next build`	What it queries
`generateStaticParams` (3 dynamic routes)	page and post slugs
Prerendering `/` and `/posts`	page content
The root layout + its metadata	header, footer, site-settings globals

That last row is the killer: the root layout wraps every page. Even if all your content routes were dynamic, prerendering something as innocent as the 404 page still renders the layout — which fetches globals — which initializes Payload.

Part 2: The crime scene — building in CI, running in ECS

Here's the question I asked when I first hit this: "My container runs on ECS in AWS, right next to the database. Why is the build failing on MongoDB?"

Because the build doesn't happen on ECS. The image is built in a completely different world than the one it runs in:

┌──────────────────────────────┐        ┌──────────────────────────────┐
│  BUILD TIME                  │        │  RUN TIME                    │
│  GitHub Actions runner       │  push  │  AWS ECS (Fargate/EC2)       │
│                              │ ─────► │                              │
│  • ephemeral VM, outside     │  ECR   │  • inside your VPC           │
│    your VPC                  │        │  • security groups allow     │
│  • no route to MongoDB /     │        │    MongoDB / DocumentDB      │
│    DocumentDB / Atlas        │        │  • secrets injected from     │
│  • no secrets (and it must   │        │    Secrets Manager / SSM     │
│    stay that way)            │        │    as env vars               │
└──────────────────────────────┘        └──────────────────────────────┘

This split isn't an accident you should work around — it's the whole point of containers:

A Docker image is an immutable artifact. You build it once, in CI, and the same bytes run in staging and production. If the build needed the production database, "build once, run anywhere" would be a lie — the artifact would be entangled with one environment.
The CI runner can't reach your database — by design. A GitHub Actions runner is an ephemeral VM on GitHub's infrastructure, outside your VPC. Your DocumentDB/Atlas instance (hopefully!) doesn't accept connections from arbitrary internet IPs. Opening your database's security group to CI runners so that a compile step can pass would be a security hole with a build log for a receipt.
Secrets don't belong in builds. Anything present at build time can leak into image layers or build logs, and images get pushed to registries and cached on machines. That's why the runtime pattern exists: ECS injects PAYLOAD_SECRET and DATABASE_URL from Secrets Manager into the container's environment when it starts — never before.

So the real diagnosis isn't "CI is misconfigured, it can't see MongoDB". It's the opposite: CI is correctly isolated, and the build process was wrong to want a database in the first place.

Part 3: The fix — a build that needs nothing

The main move: compile-only builds

Next.js can split its two build phases. The flag:

RUN PAYLOAD_SECRET=build-placeholder \
    pnpm exec next build --experimental-build-mode compile

--experimental-build-mode compile performs compilation and skips static generation entirely. No page code executes, so getPayload() is never called, so no secret and no MongoDB are needed. The build becomes hermetic: it depends on your source code and your lockfile, nothing else.

The trade-off is honest and small: the image ships no prerendered HTML. Every route renders on its first request — where the real database is available — and is then cached according to its own caching/revalidation rules. For a CMS-driven site this is barely a trade-off at all: your content changes at runtime anyway, and your prerendered pages were only as fresh as the last deploy.

Two details worth copying:

The placeholder PAYLOAD_SECRET is scoped to the single RUN command, so it's never stored in an image layer (Docker's linter will rightly complain about ENV PAYLOAD_SECRET=...).
If you use next-sitemap via a postbuild script, call it explicitly — npm's postbuild hook only fires after npm run build, not after a direct next build invocation.

Defense in depth: make the code tolerate a missing database

The compile flag fixes Docker, but I also hardened the app so that even a full next build survives without a database. Two patterns:

1. generateStaticParams returns nothing instead of throwing:

export async function generateStaticParams() {
  try {
    const payload = await getPayload({ config: configPromise })
    const posts = await payload.find({ collection: 'posts', select: { slug: true } })
    return posts.docs.map(({ slug }) => ({ slug }))
  } catch (error) {
    // No database at build time — skip prerendering; these routes
    // render on demand at runtime (dynamicParams is on by default).
    console.warn('skipping prerender:', error)
    return []
  }
}

2. Shared data fetchers defer the route to request time. Next 15+ has connection(): awaiting it during prerendering tells Next.js "this route can't be static — render it per request", while at runtime it's a no-op. Wrapped around the layout's globals fetcher:

try {
  return await getCachedGlobal()
} catch (error) {
  await connection() // during build: defer route to request time
  throw error        // at runtime: real errors still surface
}

One gotcha: connection() is neutered under export const dynamic = 'force-static', so a route that must be able to defer can't force staticness. (Another: dynamic APIs like connection() aren't allowed inside an unstable_cache scope — call it outside the cached function.)

With both layers, no environment — laptop, CI, Docker — depends on MongoDB being reachable at build time. When a database is present, everything prerenders exactly as before.

The takeaways

next build runs your code. Any data fetching in prerenderable pages, generateStaticParams, or the root layout becomes a build-time dependency. Know your touchpoints — the layout is the sneaky one.
Build and runtime are different environments on purpose. CI has no VPC access and no secrets, and that's a feature. Don't punch holes; make the build hermetic instead.
next build --experimental-build-mode compile is the one-line fix for Payload-in-Docker: no static generation, no Payload init, no MongoDB.
Never bake secrets into images. A command-scoped placeholder for the build, real values injected by ECS at runtime.
The error message says "cannot connect to MongoDB", but the bug was never the connection — it was asking for one at the wrong time.

LLMs.txt Generator for Geographic AI

2025-08-05T16:49:00.000+03:00

Hey all! 👋

I've created an NPM package called llms-txt-generator-geo-ai that automatically generates llms.txt files for your projects. This is particularly useful for:

AI Training Control: Setting policies for how AI models can use our content
Geographic Context: Adding location-specific information to our projects
Compliance: Managing data collection and usage permissions
SEO & Crawlers: Controlling how different bots interact with our content

Why do we need llms.txt files?

Similar to how robots.txt controls web crawlers, llms.txt files help us:

Control which parts of our content AI models can train on
Set clear attribution requirements
Specify geographic context for location-based applications
Define data usage policies for compliance

Quick Start Guide

1. Installation


npm install llms-txt-generator-geo-ai

2. Generate your first llms.txt

After installation, it automatically creates a config file. Just run:


npm run llms-txt-generator-geo-ai

3. Customize your configuration

Edit the auto-generated llms-txt.config.js (or .ts) file:


module.exports = {

  geoData: {

    location: "Your Office Location",

    coordinates: "lat, lng",

    country: "Your Country",

    region: "Your Region",

    timezone: "Your/Timezone",

    additionalInfo: "Project description",

    requestAttribution: "Yes", // Require attribution

    allowTraining: "No",       // Don't allow AI training

    allowDataCollection: "No", // No data collection

    contact: "your-email@company.com"

  },

  outputDir: "./",

  filename: "llms.txt"

};

Use Cases for Our Team

1. Client Projects

Add geographic context for location-based apps
Set clear AI training policies
Ensure compliance with data protection requirements

2. Internal Tools

Standardize how our tools handle AI interactions
Document geographic scope of applications
Set consistent data usage policies

3. React Applications

You can even use it as a React component:


import { LLMSGenerator } from "llms-txt-generator-geo-ai/dist/components/LLMSGenerator";



// Use in your React app for dynamic generation

4. Next.js Projects

Perfect for Next.js apps - just configure the output to ./public:


module.exports = {

  // ... your config

  outputDir: "./public",  // Serves at yoursite.com/llms.txt

};

What the generated file looks like


# LLMs.txt for GEO



## Geographic Information

Location: San Francisco, CA

Coordinates: 37.7749, -122.4194

Country: United States

Region: California

Timezone: America/Los_Angeles



## Generated Information

Generated at: 2024-01-15T10:30:00.000Z

Generator: llms-txt-generator-geo-ai



## Additional Data

Allow-Training: No

Allow-Data-Collection: No

Contact: team@ourcompany.com



## user-agent rules

User-agent: *

Disallow: /private/

Disallow: /admin/



User-agent: OpenAI

Disallow: /private/

Benefits for Our Workflow

✅ Automated: No manual file creation

✅ Type-Safe: Full TypeScript support

✅ Consistent: Standardized format across projects

✅ Flexible: Works with JavaScript, TypeScript, React, Next.js

✅ Compliant: Helps with data protection requirements

✅ Geographic: Perfect for location-based applications

When to Use This

New Projects: Add it to project setup checklist
Client Work: Especially for geo-location apps
Compliance: When we need clear AI/data policies
Public APIs: To set usage guidelines

Repository & Documentation

📦 Package: llms-txt-generator-geo-ai

🔗 GitHub: https://github.com/roi-kol/geoAI

📖 Full Docs: See README.md for complete API reference

Questions?

Feel free to reach out if you need help integrating this into your projects! 🚀

Creating a Responsive Image Component in Next.js with TypeScript

2024-10-13T09:14:00.000+03:00

In this tutorial, we'll create a ResponsiveImg component that uses the Next.js Image component for optimized image rendering.

Introduction

The ResponsiveImg Component

The ResponsiveImg component accepts properties for both mobile and desktop versions of the image. It uses the useEffect and useState hooks to determine the screen size and adjust the image properties accordingly.

Here's the complete code for the ResponsiveImg component:

/**
 * ResponsiveImg component that renders an image which adapts to screen size.
 * It uses the Next.js Image component for optimized image rendering.
 * 
 * @component
 * @param {ResponsiveImgProps} props - The properties for the ResponsiveImg component.
 * @param {Object} props.mobile - The properties for the mobile version of the image.
 * @param {string | StaticImport} props.mobile.src - The source of the mobile image.
 * @param {number} props.mobile.width - The width of the mobile image.
 * @param {number} props.mobile.height - The height of the mobile image.
 * @param {Object} props.desktop - The properties for the desktop version of the image.
 * @param {string | StaticImport} props.desktop.src - The source of the desktop image.
 * @param {number} props.desktop.width - The width of the desktop image.
 * @param {number} props.desktop.height - The height of the desktop image.
 * @param {string} props.title - The alt text for the image.
 * @param {string} [props.className] - Additional class names for the image.
 * @param {boolean} [props.isFill=false] - Whether the image should fill its container.
 * 
 * @returns {JSX.Element} The rendered ResponsiveImg component.
 * 
 * @example
 * <ResponsiveImg
 *   mobile={{ src: '/images/mobile.jpg', width: 300, height: 200 }}
 *   desktop={{ src: '/images/desktop.jpg', width: 600, height: 400 }}
 *   title="Responsive Image"
 *   className="custom-class"
 *   isFill={false}
 * />
 */
"use client";
import Image from "next/image";
import { useEffect, useState } from "react";
import { ResponsiveImgProps } from "@/interfaces/basic";
import { StaticImport } from "next/dist/shared/lib/get-img-props";

const ResponsiveImg: React.FC<ResponsiveImgProps> = (props) => {
  const [isSmallScreen, setIsSmallScreen] = useState(false);

  useEffect(() => {
    if (typeof window !== 'undefined') {
      setIsSmallScreen(window.innerWidth < 768);

      const handleResize = () => {
        setIsSmallScreen(window.innerWidth < 768);
      };

      window.addEventListener("resize", handleResize);

      return () => {
        window.removeEventListener("resize", handleResize);
      };
    }
  }, []);

  const imgProps: Omit<React.ComponentProps<typeof Image>, "src"> & {
    src: string | StaticImport;
  } = {
    src: (isSmallScreen ? props.mobile.src : props.desktop.src) as string,
    alt: props.title,
    className: props.className + (props.isFill ? " important-relative" : ""),
    width: props.isFill
      ? undefined
      : isSmallScreen
      ? props.mobile.width
      : props.desktop.width,
    height: props.isFill
      ? undefined
      : isSmallScreen
      ? props.mobile.height
      : props.desktop.height,
    layout: props.isFill ? "fill" : undefined,
    style: props.isFill ? { objectFit: "contain" } : undefined,
  };
  return (
    <>
      <Image {...imgProps} />
    </>
  );
};

The typescript interface :

export interface ResponsiveImgProps {
    title: string;
    className?: string;
    isFill?: boolean;
    mobile: { width?: number; height?: number; src: string  | 
import("next/dist/shared/lib/get-img-props").StaticImport;};
    desktop: { width?: number; height?: number; src: string  |
import("next/dist/shared/lib/get-img-props").StaticImport;};
  }
  

Example Usage

Let's see how we can use the ResponsiveImg component in different parts of our application.

Example 1: 100%

  <ResponsiveImg
  title="img 100%"
  className="h-48 w-full object-cover md:h-full md:w-48 justify-center"
  isFill={true}
  mobile={{
    src: "/images/mobile.png",
  }}
  desktop={{
    src: "/images/desktop.png",
  }}
/>

Example 2: sizes

<ResponsiveImg
  title="change img size"
  className="inline-block"
  mobile={{
    width: 110,
    height: 20,
    src: "/images/master/negevMobileFooter.png",
  }}
  desktop={{
    width: 280,
    height: 60,
    src: "/images/master/footerNegevIcon.png",
  }}
/>

Conclusion

In this post, we've created a ResponsiveImg component that adapts to different screen sizes by changing the image source and dimensions. This component leverages the power of Next.js and TypeScript to provide optimized and type-safe image rendering.

Feel free to use and modify this component in your projects to enhance the responsiveness of your web applications.

Happy coding!

Roi

try...finally in JavaScript and TypeScript

2024-07-28T15:18:00.000+03:00

In JavaScript, you can use try...finally to ensure that certain cleanup code runs regardless of whether an error occurs. This is useful for releasing resources like memory, files, or network connections.

Example: Using try...finally for Cleanup Here's an example of how you might use try...finally to ensure that a file is closed after it has been read, regardless of whether an error occurs during the reading process:

const fs = require('fs');
function readFile(filePath) {
  let fileDescriptor;
  try {
    fileDescriptor = fs.openSync(filePath, 'r');
    const buffer = Buffer.alloc(1024);
    fs.readSync(fileDescriptor, buffer, 0, buffer.length, 0);
    console.log(buffer.toString());

  }
  catch (error) {
    onsole.error('Error reading file:', error);
  }
  finally {
    if (fileDescriptor !== undefined) {
      fs.closeSync(fileDescriptor); console.log('File closed');
    }
  }
}
readFile('example.txt');

try...finally in TypeScript

import * as fs from 'fs';
function readFile(filePath: string): void {
    let fileDescriptor: number | undefined;
    try {
        fileDescriptor = fs.openSync(filePath, 'r');
        const buffer = Buffer.alloc(1024);
        fs.readSync(fileDescriptor, buffer, 0, buffer.length, 0);
        console.log(buffer.toString());
    }
    catch (error) {
        console.error('Error reading file:', error);
    } finally {
        if (fileDescriptor !== undefined) {
            fs.closeSync(fileDescriptor);
            console.log('File closed');
        }
    }
}
readFile('example.txt');

When to Avoid Using try...finally Asynchronous Code: try...finally blocks do not work as expected with asynchronous code. For asynchronous operations, you should use async...await with try...catch and ensure cleanup in the finally block. Performance: Overusing try...finally can lead to performance overhead. Use it judiciously, especially in performance-critical sections of your code. Example: Asynchronous Cleanup For asynchronous operations, you can use async...await with try...finally:

const fs = require('fs').promises;
async function readFileAsync(filePath) {
    let fileHandle;
    try {
        fileHandle = await fs.open(filePath, 'r');
        const buffer = Buffer.alloc(1024);
        await fileHandle.read(buffer, 0, buffer.length, 0);
        console.log(buffer.toString());
    }
    catch (error) {
        console.error('Error reading file:', error);
    }
    finally {
        if (fileHandle) {
            await fileHandle.close(); console.log('File closed');

        }
    }
}
readFileAsync('example.txt');

In TypeScript

import { promises as fs } from 'fs';
async function readFileAsync(
    filePath: string): Promise<any> {
    let fileHandle: fs.FileHandle | undefined;
    try {
        fileHandle = await fs.open(filePath, 'r');
        const buffer = Buffer.alloc(1024);
        await fileHandle.read(buffer, 0, buffer.length, 0);
        console.log(buffer.toString());
    }
    catch (error) {
        console.error('Error reading file:', error);

    }
    finally {
        if (fileHandle) {
            await fileHandle.close(); console.log('File closed');
        }
    }
}
readFileAsync('example.txt');

Fetch Example in TypeScript If you are working with network requests using fetch, you can also use try...finally to ensure any necessary cleanup or final steps are performed.

async function fetchData(url: string): Promise<any> {
    let response: Response | undefined;
    try {
        response = await fetch(url);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        } const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
    finally {
        if (response) {
            console.log('Fetch operation completed');

        }
    }
}
fetchData('https://your.api.com/data');

try - finally

Summary

Use try...finally to ensure cleanup code runs regardless of errors.

Avoid using try...finally with asynchronous code; instead, use async...await with try...catch and finally.

Ensure proper resource management to avoid memory leaks or other issues

Be mindful of performance when using try...finally blocks.

Hashing password in Next JS against rainbow table attacks with a salt for login page

2024-07-18T10:27:00.004+03:00

If you want to send a username and password to the server side in nextJs and check if it is correct to continue the identification process.

In this article I will explain how and explain why it is important to add salt to a salad 😁

First I will explain why hashing passwords with a salt is an effective defense against rainbow table attacks. Here's why:

Rainbow Tables Explained: A rainbow table is a precomputed table for reversing cryptographic hash functions, primarily used for cracking password hashes. Suppose an attacker has a database of hashed passwords obtained from a compromised system. If these passwords were hashed without a salt, the attacker could use a rainbow table to look up the hash values and find the corresponding plaintext passwords. Rainbow tables are feasible because they can be precomputed for all possible plaintext passwords up to a certain length and complexity.

The Role of Salt: A salt is a random value that is added to the password before it is hashed. The salt is unique for each password; even if two users have the same password, their hashed passwords will be different because of the unique salts. When the password is stored, it is stored along with its salt.

Defeating Rainbow Tables: Since the salt is unique for each password, it effectively makes precomputed rainbow tables useless. An attacker cannot feasibly precompute a rainbow table for every possible salt; the number of possible salts (often 128-bit or more) makes the number of required rainbow tables astronomically high. For each unique salt, an entirely new rainbow table would need to be generated, requiring immense computational resources and storage.

Salting in Practice: When a password is salted and hashed, the salt is stored alongside the hash in the database. When a user attempts to log in, the system retrieves the salt for that user's password, adds it to the submitted password, and hashes the result. If the resulting hash matches the stored hash, the password is correct. This process ensures that even if two users have the same password, their stored hashes will be different due to the unique salts.

Additional Security with Work Factors: Modern hashing algorithms like bcrypt also incorporate a work factor (or cost factor), which is a measure of how computationally intensive the hashing process is. This slows down the hashing process deliberately, making brute-force attacks more time-consuming and difficult to execute.

In summary, salting passwords before hashing them protects against rainbow table attacks by ensuring that each password hash is unique, even if the original passwords are not. This uniqueness prevents attackers from using precomputed tables to reverse the hash values, significantly enhancing the security of stored passwords/

To securely hash passwords in a Next.js application, where the server-side is Node.js, you can use the bcrypt library. This process should happen on the server-side to ensure the plaintext password is never exposed. Here's a step-by-step guide:

Install bcrypt: First, you need to install bcrypt in your project. Run the following command in your terminal:

npm i bcrypt

Create an API Route for Registration: In your Next.js project, create an API route that will handle the registration process. This is where you'll hash the password.

Hash the Password: Inside your API route, use bcrypt to hash the password before saving it to your database.

Step 1: Create an API Route Create a file under pages/api/auth/register.ts. This will be your API endpoint for handling registration. Here's an example of how you might implement this:

// pages/api/auth/register.ts

import bcrypt from 'bcrypt';

import { NextApiRequest, NextApiResponse } from 'next';

const saltRounds = 10;

export default async function handler(req: NextApiRequest, res: NextApiResponse) {

if (req.method === 'POST') {

try {

// Extract the user data from the request body

const { name, email, password } = req.body;

// Hash the password

const salt = await bcrypt.genSalt(saltRounds);

const hashedPassword = await bcrypt.hash(password, salt);

// Here, you would typically save the name, email, and hashedPassword to your database

// For demonstration, we'll just return the hashed password

return res.status(200).json({ name, email, hashedPassword });

} catch (error) {

return res.status(500).json({ error: 'Internal server error' });

}

} else {

// Handle any non-POST requests

res.setHeader('Allow', ['POST']);

return res.status(405).end(`Method ${req.method} Not Allowed`);

}

Implement the Registration Logic with Password Hashing ...

Step 2: Create Your Registration Page to Send Data to the API In your registration page component (RegisterPage), update the form submission logic to send a POST request to api/auth/register with the user's name, email, and password. You can use fetch for this:

// pages/auth/register/index.tsx

import Link from "next/link";

import { useState } from "react";

const RegisterPage = () => {

const [registerData, setRegisterData] = useState({

name: "",

email: "",

password: "",

});

const onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {

setRegisterData({

...registerData,

[e.target.name]: e.target.value,

});

};

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {

e.preventDefault();

// Send the registerData state to the server

const response = await fetch('/api/auth/register', {

method: 'POST',

headers: {

'Content-Type': 'application/json',

body: JSON.stringify(registerData),

});

const data = await response.json();

console.log(data); // For demonstration, log the response

};

return (

<div>

<h3>Register Page</h3>

<div>

<input

onChange={onChange}

value={registerData.name}

type="text"

name="name"

required

</div>

<div>

<label htmlFor="email">Email</label>

<input

onChange={onChange}

value={registerData.email}

type="email"

name="email"

required

</div>

<div>

<label htmlFor="password">Password</label>

<input

onChange={onChange}

value={registerData.password}

type="password"

name="password"

required

</div>

<button type="submit">Create account</button>

</form>

<div>

Already have an account? <Link href="/auth/login">Login here</Link>

</div>

);

};

export default RegisterPage;

Frontend (React) Securely Transmit Passwords: Ensure passwords are transmitted securely from the client to the server. Use HTTPS to encrypt the data in transit.

Minimal Password Handling: Avoid storing or logging the password in the client-side application unnecessarily.

Input Validation: Validate password inputs for length and complexity on the client side to improve user experience, but always validate on the server side as well for security.

Security Considerations HTTPS: Always use HTTPS to protect data in transit. Environment Variables: Store sensitive configuration (like saltRounds) in environment variables, not in your codebase. Database Security: Ensure your database is secured and accessible only by authorized users. CORS Policy: Configure CORS policy appropriately in your Node.js application to prevent unauthorized API access. By following these practices, you can significantly enhance the security of password storage and comparison in your application.

Step 3: Create a login page in Next Js. For this we need to compere the password (that save at the DB with hash) and the email. We create an api for it - pages/api/auth/login.ts :

// pages/api/auth/login.ts

import type { NextApiRequest, NextApiResponse } from 'next';

import bcrypt from 'bcrypt';

// Dummy stored hash for demonstration. In a real app, fetch this from your database.

// Dummy function for demonstration. Replace with actual database query.

async function getUserByEmail(email: string) {

// Simulate database access

return {

email: 'user@example.com',

hashedPassword: '$2b$10$N9qo8uLOickgx2ZMRZoMyeIjZAgcfl7p92HgH/uPpizv.AlphaJG', // Replace with actual hash from your database

};

}

export default async function handler(req: NextApiRequest, res: NextApiResponse) {

if (req.method === 'POST') {

const { email, password } = req.body;

try {

const user = await getUserByEmail(email);

if (!user) {

// No user found with the submitted email

return res.status(401).json({ message: 'Invalid credentials' });

}

// Comparing a submitted password with the stored hash

// Assuming `password` is the password attempt from the user

// and `hashedPassword` is the hashed password retrieved from your database

const match = await bcrypt.compare(password, user.hashedPassword);

if (match) {

// Email and passwords match

res.status(200).json({ message: 'Login successful' });

} else {

// Passwords do not match

res.status(401).json({ message: 'Invalid credentials' });

}

} catch (error) {

res.status(500).json({ message: 'Server error', error: (error as Error).message });

}

} else {

// Handle any other HTTP method

res.setHeader('Allow', ['POST']);

res.status(405).end(`Method ${req.method} Not Allowed`);

}

Step 4: Create the react page for login

// pages/auth/login/index.tsx

import Link from "next/link";

import { useState } from "react";

const LoginPage = () => {

const [email, setEmail] = useState('');

const [password, setPassword] = useState('');

const handleSubmit = async (event: React.FormEvent) => {

event.preventDefault();

try {

const response = await fetch('/api/auth/login', {

method: 'POST',

headers: {

'Content-Type': 'application/json',

body: JSON.stringify({ email, password }),

});

if (!response.ok) {

throw new Error('Network response was not ok');

}

const data = await response.json();

alert(data.message); // Show success message

// Handle further logic here (e.g., redirecting)

} catch (error) {

console.error('There was a problem with your fetch operation:', error);

}

};

return (

<div>

<h3>Login Page</h3>

<div>

<label htmlFor="email">Email</label>

</div>

<div>

<label htmlFor="password">Password</label>

</div>

<button type="submit">Login</button>

</form>

<div>

Do not have an account?{" "}

<Link href="/auth/signup">Create an account</Link>

</div>

);

};

export default LoginPage;

This code it for next 13. If you use next 14 I believe the the code is the same. You need to change index.tsx to page.txt and add "use client"; to the react pages.

How to create a security ASP.NET Web API controller

2024-05-28T07:49:00.003+03:00

Hi,

Here is a code that has base response class and use it in an ASP.NET Web API controller to send a response with a cookie and security headers.

This code creates a BaseResponse<T> class with a Status property and a Data property of type T. In the Post method of MyController, a new HttpResponseMessage is created with a status of OK and the content set to a serialized BaseResponse<string>. A cookie is added to the response headers, and then several security headers are added. The X-Content-Type-Options header is set to nosniff to prevent the browser from trying to interpret content with a MIME type that doesn't match the declared type. The X-Frame-Options header is set to SAMEORIGIN to prevent the page from being displayed in a frame or iframe. The Content-Security-Policy header is set to only allow content from the same origin

In this code, I've assumed that you have a service IDatabaseService with a method CheckIfExists that checks if an ID exists in the database. The Post method now accepts an ID, checks if it exists in the database, and sets the Status property of the BaseResponse to the result. It also generates a new GUID for the session ID and sets it as a cookie in the response headers. The Data property of the BaseResponse is set to the ID that was passed to the Post method.

This code sets the HttpOnly attribute of the cookie to true, which prevents the cookie from being accessed by client-side scripts. It also sets the Expires attribute to 1 hour from now, which means the cookie will be deleted after 1 hour. The Strict-Transport-Security header is set to max-age=31536000; includeSubDomains, which tells the browser to only use HTTPS for all future requests to this domain and its subdomains for the next year. The Secure attribute is set to true, which means the cookie will only be sent over an HTTPS connection. Please note that this attribute will have no effect if your application is not served over HTTPS.

public class BaseResponse<T>
{
    public bool Status { get; set; }
    public T Data { get; set; }
}

public class MyController : ApiController
{
    private readonly IDatabaseService _databaseService;

    public MyController(IDatabaseService databaseService)
    {
        _databaseService = databaseService;
    }

    public async Task<HttpResponseMessage> Post([FromBody] string id)
    {
        var exists = await _databaseService.CheckIfExists(id);

        var response = new HttpResponseMessage(HttpStatusCode.OK)
        {
            Content = new StringContent(JsonConvert.SerializeObject(new BaseResponse<string> { Status = exists, Data = id }), Encoding.UTF8, "application/json")
        };

        var newSessionId = Guid.NewGuid().ToString();
        var cookie = new CookieHeaderValue("session-id", newSessionId)
        {
            HttpOnly = true,
            Secure = true,
            Expires = DateTimeOffset.Now.AddHours(1)
        };
        response.Headers.AddCookies(new CookieHeaderValue[] { cookie });

        response.Headers.Add("X-Content-Type-Options", "nosniff");
        response.Headers.Add("X-Frame-Options", "SAMEORIGIN");
        response.Headers.Add("Content-Security-Policy", "default-src 'self'");
        response.Headers.Add("Strict-Transport-Security", 
                "max-age=31536000; includeSubDomains");

        return response;
    }
}

Have a nice day :)

React lazy component (import component)

2024-03-14T15:00:00.003+02:00

Let's face it - there are some problems with React & Webpack.

When I create a Webpack bundle - All the files (js and css) are merged. (remember files Name Must Start with Capital letter- js , css,..)

It means that if I have some styles with the same name, the style will be applied on all the elements.

Ex:

In A component - there is an element like this:

<Button className="mybutton" label="close" />

with style like this:

.mybutton {color:red}

In B component - there is element with the same class name

<Button className="mybutton" label="open" />

So because I used the same style css class name - the Webpack bundle merged the css files of all the components, its means that we got red color to all components that use the same name. In the example component B got red color for the button.

I call it a bug (not a feature 😀)

In my project I created an app.js. In this file I import all the components. There, I noticed that as I mentioned earlier, one component get styled by another component.
As I remember in Angular, it gives all class names a new name with GUID. It means that in angular one component style does not affect another component.

Before:
we write this code in app.js to import our components

import MyComponent from './MyComponent';

The time and memory:

After:
Now my suggested solution:
const MyComponent = React.lazy(() => import('./MyComponent'));

It's means that ContactUs component now no longer has a style from ModSlider component, because we used React.Lazy.

To complete the job you need to wrap your code with Suspense

Now you need create your own fallback code (loading / spinner)

The time and memory:

On this example we saved almost 6 MB and 1 sec.... amusing 😃

This will automatically load the bundle containing the MyComponent when this component is first rendered.
React.lazy takes a function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component.
The lazy component should then be rendered inside a Suspense component, which allows us to show some fallback content (such as a loading indicator) while we’re waiting for the lazy component to load.

**import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function MyComponent() {

return (

<div>

<Suspense fallback={<div>Loading...</div>}>

<OtherComponent />

</Suspense>

</div>

);

}

The fallback prop accepts any React elements that you want to render while waiting for the component to load. You can place the Suspense component anywhere above the lazy component. You can even wrap multiple lazy components with a single Suspense component.

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

function MyComponent() {

return (

<div>

<Suspense fallback={<div>Loading...</div>}>

<section>

<OtherComponent />

<AnotherComponent />

</section>

</Suspense>

</div>

);

}

To support Webpack Chunk Name

const News = React.lazy(() => import(/*webpackChunkName:"News" */"../components/News/News"));

to webpack.config.js:

output: {

path: path.resolve(__dirname, 'D:/Code/React/'),

filename: 'Roi_bundle.js',

chunkFilename:'[name].[chunkhash].js'

},

Limit access to your IIS site to specific security Active Directory groups

2023-07-18T11:00:00.019+03:00

You can limit access to your IIS site to specific security Active Directory (AD) groups. Here are the steps to do this:

Step 1: Create or Identify the Security Group in Active Directory

1. Open Active Directory Users and Computers (ADUC) on your domain controller.
2. Navigate to the Organizational Unit (OU) where you want to create the group.
3. Right-click the OU, select New > Group.
4. Name your group and ensure the Group scope is set to Security.
5. Add users to this group who should have access to the IIS site.

Step 2: Configure IIS to Use Windows Authentication

1. Open IIS Manager on your web server.
2. Select your site from the Connections pane.
3. Double-click Authentication in the Features View.
4. Enable Windows Authentication and Disable other authentication methods like Anonymous Authentication.

Step 3: Set NTFS Permissions for the Site Folder

1. Navigate to the folder containing your IIS site's content.
2. Right-click the folder, select Properties.
3. Go to the Security tab and click Edit.
4. Click Add and enter the name of your AD security group.
5. Assign the appropriate permissions (e.g., Read & Execute, List Folder Contents, Read).

Step 4: Configure Authorization Rules in IIS

1. In IIS Manager, select your site again.
2. Double-click Authorization Rules in the Features View.
3. Remove any existing rules that allow access to all users.
4. Click Add Allow Rule in the Actions pane.
5. Select Specified roles or user groups, and enter the name of your AD security group.
6. Click OK to save the rule.

Step 5: Test the Configuration

1. Use a user account that is a member of the AD security group to access the site. They should have access.
2. Use a user account that is not a member of the AD security group to access the site. They should be denied access.

These steps will ensure that only users in the specified AD security group can access your IIS site.

How to get the following ID in a SharePoint list

2022-01-18T09:45:00.000+02:00

hi...

More than a decade ago .. I wrote a kwizcom blog article - how to get the following ID in a SharePoint list

https://kwizcom.blogspot.com/2009/08/how-do-i-tell-what-next-list-item-id-is.html

This was valid for SharePoint 2007 and 2010 for sure.

I do not know when Microsoft changed the table in the database ..

But now in SharePoint 2019 they have created another table AllListsAux and the code should look like this

/// Get the next available item id from a list

/// < name="site">site

/// < name="listId">listId

///

public static int SharePointListNextItemId(SPSite site, Guid listId)

{

int id = -1;

SPSecurity.RunWithElevatedPrivileges(delegate ()

{

if (site.WebApplication.ContentDatabases.Count > 0)

{

string DBConnString = site.WebApplication.ContentDatabases[0].DatabaseConnectionString;

using (SqlConnection con = new SqlConnection(DBConnString))

{

try

{

con.Open();

using (SqlCommand command = con.CreateCommand())

{

command.CommandText = String.Format("select NextAvailableId from [AllListsAux] where ListID = '{0}'", listId.ToString());

id = (int)command.ExecuteScalar();

}

finally

{

con.Close();

}

});

return id;

}

Hope this helps!

WSP not deployed in all SharePoint servers in the farm

2021-05-25T08:53:00.004+03:00

If you want to deploy wsp file on the SharePoint farm ... and the installation failed on some of the farm servers - then the solution is the timejob

SharePoint deploy

Run this code at SharePoint PowerShell

$farm = Get-SPFarm

$disabledTimers = $farm.TimerService.Instances | where {$_.Status -ne "Online"}

if ($disabledTimers -ne $null)

{

foreach ($timer in $disabledTimers)

{

Write-Host "Timer service instance on server " $timer.Server.Name " is not Online. Current status:" $timer.Status

Write-Host "Attempting to set the status of the service instance to online"

$timer.Status = [Microsoft.SharePoint.Administration.SPObjectStatus]::Online

$timer.Update()

}

else

{

Write-Host "All Timer Service Instances in the farm are online! No problems found"

}

PowerShell timer job

Before reinstalling recycle time Job on each server

Create React, Angular or Vue widget at Liferay

2021-01-29T17:30:00.004+02:00

In the last year I have made a small change in the professional aspect …

I switched from a Microsoft CMS (SharePoint) that works with .NET and windows IIS to a new CMS - Liferay

In Liferay, I work with Java, Linux servers with tomcat.(On AWS cloud)- I don't remember Microsoft 😖

Enough talking about myself... Let's do Liferay

Before

You need to install before node.js, npm and yomoan. Also you need visual studio code.

Install the Liferay bundle generator

Run the following command (Create before folder for your project)

npm install -g yo generator-liferay-js

And now, generate the React project

yo liferay-js

Select React Widget (Or Angular / Vue)

Now answer the questions about your project… (Name. category, localization etc… )

Chose with example code

Now the npm service installing the project

The Code

Open your project with visual studio code

The package.json file is responsible for the settings of the project (name, version, category, etc. …)

The assets\css\styles.css file is responsible for the style (you can add more files) .

The features\localization\Language.properties is the resource file. It can be a multiple languages, you need to and your local file like Language_iw.properties for Hebrew.

The features\configuration.json is the property of the widget.

The files src\AppComponent.js and src\index.js are the files of the component.

You can add your new component like this.

Deploy

Run this command

npm run deploy

Liferay

On the page (at liferay) add your widget. You widget is under your category, and you can change the property that youadd on the json file.

Enjoy

Roi

Text To Speech (TTS) and Audio file with NativeScript

2020-08-06T11:16:00.002+03:00

In my game - My first game (game for children), that created with NativeScript, I use audio and speak services.

The NativeScript is platform that use to develop an android (or IOS) app with angular and TypeScript.

Here is the class the use for Audio and Speak with NativeScript.

The speak if Text To Speech (TTS) from google.

The audio is mp3 file

import { TNSTextToSpeech, SpeakOptions } from "nativescript-texttospeech";
import { TNSPlayer, AudioPlayerOptions } from "nativescript-audio-player";
import * as timer from "tns-core-modules/timer";
import { Injectable } from "@angular/core";
import * as firebase from "nativescript-plugin-firebase";
@Injectable({
  providedIn: "root",
})
export class AudioAndSpeak {
  public audioTrackDuration: any;
  public remainingDuration: any; // used to show the remaining time of the audio track
  private TTS = new TNSTextToSpeech();
  private _player: TNSPlayer;
  public isSpeaking: boolean = false;
  constructor() {
    this._player = new TNSPlayer();
    this._player.debug = false;
  }
  public async speak(text: string, local : string) {
    let isSpeaking = true;
    let  speakRate = 0.8;
    let speakOptions: SpeakOptions = {
      text: text,
      speakRate: speakRate,
      queue: true,
      locale : local,
      finishedCallback: async () => {
        isSpeaking = false;
      },
    };
    this.TTS.speak(speakOptions).then(() => console.log("End Speak"));
    return isSpeaking;
  }
  public async playSound(filePath: string, filePath2?: string, volume? :number) {
    try {
      if(!volume)
      {
        volume = 1;
      }
      this._player.volume = volume;
      this.isSpeaking = true;
      const playerOptions: AudioPlayerOptions = {
        audioFile: filePath,
        loop: false,        
        completeCallback: async () => {
       
          await this._player.dispose();
          this.isSpeaking = false;          
         // player disposed
          if (filePath2) {
            this.playSound(filePath2);
          }
        },
        errorCallback: (errorObject) => {
          console.log('errorCallback')
          console.log(JSON.stringify(errorObject));
          this.isSpeaking = false;
        },
        infoCallback: (args) => {
          console.log(JSON.stringify(args));
        },
      };
      await this._player.playFromFile(playerOptions).catch((error) => {
        firebase.crashlytics.sendCrashLog('AudioAndSpeak -> playSound playFromFile :' + error);
        console.log(error);
        this.isSpeaking = false;
      });
 
      this.audioTrackDuration = await this._player.getAudioTrackDuration();
      // start audio duration tracking
      this._startDurationTracking(this.audioTrackDuration, volume);
    } catch (e) {
      console.error("AudioAndSpeak -> playSound", e);
      firebase.crashlytics.sendCrashLog('AudioAndSpeak -> playSound :' + e);
    }
  }
  private async _startDurationTracking(duration, volume) {
    if (this._player && this._player.isAudioPlaying()) {
      this._player.volume = volume;
      const timerId = timer.setInterval(() => {
        this.remainingDuration = duration - this._player.currentTime;
      }, 500);
    }
  }
}

You need yo add the service on the contractor

import { AudioAndSpeak } from "../../shared/AudioAndSpeak";

 constructor(
    ...
    private audioAndSpeak: AudioAndSpeak,
    ...
  ) {...}

to call audio file

 this.audioAndSpeak.playSound(audioFilePath);

to call speak

this.audioAndSpeak.speak( 'TEXT' , "en-GB" );

Thanks,

Roi Kolbinger

Game built in Angular and Typescript- for Android users with NativeScript

2020-06-28T09:59:00.000+03:00

During the corona virus vacation, I took the time to learn something new- NetiveScript.
I took a course - at one of the best in the market - Maximilian Schwarzmüller.

https://pro.academind.com/p/nativescript-angular-build-native-ios-android-web-apps

I built a game for my girls.

For Hebrew speakers
Ages 2-4 they will learn Colors, Shapes and Animals.
Ages 4-6 who will teach Numbers and Letters
Ages 6-9 who will teach addition and multiplication .. and learning English in stages ... Letters Numbers, Colors, Shapes and Animals.
For English speakers, the same thing only in English.

Now because everything is object-based .. I tried another language - Spanish .. In the meantime, there are only Numbers and Animals.

The game itself is written in angular and typescript.
It has 3 main components.
Component for choosing a language, Component for chose a game and of course Component of the game itself..

NativeScript gives me, as a web developer, the ability to build an app for both Android and iOS

The game is now in Google play - and Called - My First Game

https://play.google.com/store/apps/details?id=org.nativescript.roifirstgame

Over time, I'll post my insights from NativeScript

Install ... Let the kids play and I'd love to get feedbacks ...
Roi

SharePoint Service Provisioning - the service stuck on starting

2020-06-26T10:26:00.000+03:00

When I tried to run SharePoint service - Manage Metadata Web Service on the Central Admin ... I wait and still Staring (Stuck)...

So again I ran the command (From SharePoint PowerShell)

Get-SPServiceInstance -Server SERVERNAME| where-object {$_.TypeName -eq "Managed Metadata Web Service"} | Start-SPServiceInstance -confirm:$false > $null

And I got the Error

Start-SPServiceInstance : An object of the type Microsoft.SharePoint.Administration.SPServiceInstanceJobDefinition named "job-service-instance-ba7339e3-fb42-49c4-ac66-ab08e84eae0f" already exists under the parent Microsoft.SharePoint.Administration.SPTimerService named "SPTimerV4". Rename your object or delete the existing object. At line:1 char:111 + ... eb Service"} | Start-SPServiceInstance -confirm:$false > $null + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + CategoryInfo : InvalidData: (Microsoft.Share...ServiceInstance: SPCmdletStartServiceInstance) [Start-SPServiceInstance], SPDuplicateObject Exception + FullyQualifiedErrorId : Microsoft.SharePoint.PowerShell.SPCmdletStartSer viceInstance

I deleted the job

$jobToDelete = Get-SPTimerJob | ? { $_.name -eq "job-service-instance-ba7339e3-fb42-49c4-ac66-ab08e84eae0f" }

$jobToDelete.Delete()

You tried to stop again

Stop-SPServiceInstance -Identity ba7339e3-fb42-49c4-ac66-ab08e84eae0f

But I also got the job stuck - Deleting it again

$jobToDelete
= Get-SPTimerJob | ? { $_.name -eq
"job-service-instance-ba7339e3-fb42-49c4-ac66-ab08e84eae0f" }

$jobToDelete.Delete()

I stopped timerJob on the server

Then I tried a different way

$service = Get-SPServiceInstance -Identity ba7339e3-fb42-49c4-ac66-ab08e84eae0f

$service.unprovision()

$service.update()
iisreset /noforce

I was waiting to see that he was really disabled

$service.provision()

$service.update()
iisreset /noforce

I turned on the TimerJob

And It works :)

Restore Problem "Restore-SPSite : The extension

2019-03-21T11:12:00.000+02:00

Next article - User's responsibility only!

Years ago, I saw something in one of the blogs ... but I did not find any mention of it today (maybe Microsoft asked to delete the article because ...).

I tried to migrate a DataBase between two environments, but I was told the versions did not match. Probably updates winsows

Then I'll try through the power shell

restore-spacesite

But I got the following error

Restore Problem "Restore-SPSite: The extension Microsoft.Office.Project.Server.Database.Extension.ProjectDatabaseExtension is version VVVV, and the backup was on version VVV These versions are incompatible.

So what did I do?

Do a backup before ... may be you will need it

I opened the file in binary editor. In Visual Studio -> open file

Open With

Open as binary file editor

And find the wrong virsion

Now replace the number to your current virsion

And try to run the command again (Restore-SPSite)

For me it work ... hope for you too ... if you did not return the backup

Converting SharePoint site from Version 2013 to 2016

2017-02-27T09:00:00.000+02:00

In this time Microsoft did a good job with Migration SharePoint 2013 to SharePoint 2016, and within a few hours it is possible to upgrade the site from 2013 to 2016
Even the code in Visual Studio was easy to upgrade fron VS 2013 to VS 2015 update 3 with Office package

I did this steps

Save wsp website (version 2013)
Copy (backup restore) the DataBase from SQL 2012 DB 2016, and to ensure that it has sp admin privileges DB_Owner to the new DB
In Central Adminstration -> Manage web applications

a. Creating a Web Application with DB temporary
b. Create a Site Collection
c. Setting up the site in the hosts found in the C:\Windows\System32\drivers\etc\ with a local IP
Add the wsp site (Old from 2013)
a. In powerShell -> Add-SPSolution -LiteralPath PATH

b. Installing the solotion site (or in powerShell -> Install-SPSolution or in Central Adminstration -> System Settings -> Manage farm solutions)
Remove the temporary DB site (in Central Adminstration -> Application Management -> Databases -> Manage content databases DB click on the question and select the Remove content database and click OK)
Temporarily connect the DB from 2013 (Test-Mount-SPContentDatabase "DB_FROM_2013" -WebApplication "NEW_WEB_APP" in powershell)
If it is good then, connect the DB from 2013 (Mount-SPContentDatabase "DB_FROM_2013" -WebApplication "NEW_WEB_APP" in powershell)
Run Upgrade-SPSite -VersionUpgrade in powerShell
In your own time, Do a Conversion of the wsp from 2013 to 2016 (Big code works great, this is becuse Microsoft didn't change the mapping of layouts folder - it still 15)
Good Luck :)

The URL is invalid. It may refer to a nonexistent file or folder, or refer to a valid file or folder that is not in the current Web at SharePoint

2016-01-20T08:08:00.000+02:00

I recently had the following error when I tried to add a document to a document library.

The URL <file name> is invalid. It may refer to a nonexistent file or folder, or refer to a valid file or folder that is not in the current Web.

A quick search on google said that brought the resources of SQL Server.I checked and indeed I increased the resources but to no avail.
Even my examination chrome and Internet Explorer. I checked Word file, PDF, and even a small text file. A.
Nothing helped.
I opened a new document library, and in fact it could add document :)

Ok ... what is the problem ???

It should be noted in the document library came from List Definition and Content Type preset.
I started to check each field and field Then I got a Date Field in the file probably was not his elemet.xml incubated right.

When I set it to Today date .... it worked

All it needed was simply to write the true definition of the field

Hope I helped,
Roi

SharePoint 2013 - Get Item Url by REST API and Ajax

2015-04-17T15:18:00.000+03:00

Hey,

This time I will present code to get client-side item

var urlRequest = RoiGetItemUrl(item, listName, rootUrl);

urlRequest.done(function (data, textStatus, jqXHR) {

var path = "";

jQuery.each(data.d.results, function (i, result) {

path = result.EncodedAbsUrl;

});

console.log("Item path is " + path);

});

urlRequest.fail(function (jqXHR, textStatus, errorThrown) {

RoiFailHandler(jqXHR, textStatus, errorThrown, state, fileUploadFailMessage);

});

// Return the link item url

function RoiGetItemUrl(item, listName, rootUrl)

{

var call = jQuery.ajax({

url: rootUrl + "/_api/Web/Lists/getByTitle('" + listName + "')/Items?$select=EncodedAbsUrl&$filter=Id eq " + item.Id,

type: "GET",

dataType: "json",

headers: {

Accept: "application/json;odata=verbose"

}

});

return call;

}

// Handler with error event

function RoiFailHandler(jqXHR, textStatus, errorThrown, state, fileUploadFailMessage) {

try {

var response = JSON.parse(jqXHR.responseText);

var message = response ? response.error.message.value : textStatus;

console.log("Call failed. Error " + message);

}

catch (e) {

console.log("Error " + e.message);

}

Yours,
Roi

Delete SharePoint List by force with PowerShell

2014-09-24T16:19:00.001+03:00

if cannot delete your SharePoint list

try this PowerShell code - it will delete your list

$web = Get-SPWeb http://www.mysite.com

$guid = [Guid]"a07a5c37-0f7c-423d-846a-e9e525f7a8b7"

$list = $web.Lists[$guid]



$list.AllowDeletion = $true

$list.Update()

$list.Delete()

$web.Dispose()

Your,
Roi

An error occurred while processing this request

2013-12-21T16:15:00.000+02:00

I recently started to develop a web form with knockout JS. The system is running on SharePoint 2010. The data given / taken to the form with JSON through WCF services.

I had a problem, I did not want that the service will be expose to web. To prevent exposure, created casing in the SharePoint an Application Page.

The WCF data services and any entity framework written in framework 4.5, and as you know that SharePoint 2010 and with the Application Page written in 3.5.

This means that every reference to in the form of entity framework like linq or lambda expressions written in framework 3.5 - which created (and still creates) a lot of problems.

I will present you one example of the problem we encounter - but Google unfortunately did not help.

The following code in FW3.5 not working in Client Data Service

if (ctx != null && ctx.UsersContext != null)
{

string username = "username";

var userList = ctx.UsersContext.Where(z => z.Code == username).AsEnumerable().ToList();

}

I even tried Windows Application purpose to see that the SP does not hurt me

The Error Massage was:

An error occurred while processing this request

"<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?><error xmlns=\"http://schemas.microsoft.com/ado/2007/08/dataservices/metadata\"><code></code><message xml:lang=\"en-US\">The MaxDataServiceVersion '1.0' is too low for the response. The lowest supported version is '2.0'.</message></error>"

I'll not go with you all the way I went through hardships

The problem is development server and production server does not always match (which always advisable to have :)).
One Development server was windows Server 2008 R2 which was the error. And another was a windows server 2008 R2 SP1

Of course I did not notice until the solution - I only need to install Windows 2008 r2 SP1

Soon I will try to give you a few more problems cropped up this complex project,
Roi

How to open a PDF file (or any file) in the sharepoint site

2013-09-22T14:50:00.000+03:00

Not long ago, I had to view a PDF file from sharepoint. But I got the following message:

Do you want to save file-name from yours-site

Who does not know this message? But I've target 'self' in 'a' tag html????

It turns out that SharePoint having your code to protect customers. They can only give you their familiar software like Office, but a pdf file - Microsoft unfamiliar terms.

To resolve, you need to make a change in Central-Admin

Go to your Web Application manage - General Setting

Find Browser File Handling and Change the default to Strict.

It all friends, now you can view any file on the portal (at your own risk).

Your,
Roi

Service Pack 2‏ (SP2) for Microsoft SharePoint 2010 and Office 2010

2013-08-29T20:03:00.000+03:00

Last month came new version (Service Pack 2) for Office 2010, SharePoint 2010, Project server 2010 and the Fast 2010.

Here are some links that will help you

Service Pack 2 for Microsoft Office 2010 (KB2687455) 32-Bit Edition
http://www.microsoft.com/en-us/download/details.aspx?id=39667

Service Pack 2 for Microsoft Office 2010 (KB2687455) 64-Bit Edition
http://www.microsoft.com/en-us/download/details.aspx?id=39647

Note: In addition to the products in the Office 2010 suite, service pack 2687455 also updates Microsoft Project 2010, Microsoft Visio 2010, and Microsoft SharePoint Designer 2010

Service Pack 2‏ (SP2) for Microsoft SharePoint Server 2010 (KB2687453)
http://www.microsoft.com/he-il/download/details.aspx?id=39672

Service Pack 2‏ (SP2) for Microsoft SharePoint Foundation 2010 Language Pack (KB2687466)
http://www.microsoft.com/he-il/download/details.aspx?id=39674

Service Pack 2‏ (SP2) for Microsoft FAST Search Server 2010 for SharePoint (KB2687446)
http://www.microsoft.com/he-il/download/details.aspx?id=39670

Service Pack 2 for Microsoft Office Web Apps (KB2687470)
http://www.microsoft.com/en-us/download/details.aspx?id=39659

Service Pack 2 for Microsoft SharePoint and Project Server 2010 (KB2687452)
http://www.microsoft.com/en-us/download/details.aspx?id=39657

Service Pack 2 for Microsoft Search Server 2010 (KB2687461)
http://www.microsoft.com/he-il/download/details.aspx?id=39656

Yours,
Roi

Which w3wp process belongs to which App Pool

2013-08-23T13:42:00.000+03:00

Often you wonder which process belongs to which site (in my case usually SharePoint site)? Or maybe you just want to debug only your website on the development server .

For this we have the appcmd.

all you need is to run this command:

%windir%\system32\inetsrv\appcmd.exe list wp

Now you can see who is gobbling sites memory from is id (pid)

Yours,
Roi

Speedup Powershell at SharePoint 2013

2013-08-04T05:00:00.000+03:00

If you worked in stsadm in MOSS 2007 and even if it worked in SharePoint 2010, you saw it slow.
In 2010 we also added the powershell - who was sometimes slow.

It turns out that in sharepoint 2013 not made significant changes - is suggested

The solutions are

Add crl.microsoft.com to your hosts file and point it to your local machine
Go to Start -> Run
Click "Drivers" (It need to open "C:\Windows\System32\drivers" - in not go to it)
Go to folder "etc" and open "hosts" file with notepad
and add this line
127.0.0.1 crl.microsoft.com
Disclosure: this solution find a lot on Google - but my no significant change
Disable the CRL check by modifying the registry for all user accounts that use STSADM and all service accounts used by SharePoint.
Go to Start -> regedit and fund this location

[HKEY_USERS\<userid>\Software\Microsoft\Windows\CurrentVersion\WinTrust\Trust Providers\Software Publishing]

Yon need to change all yours users to “State”=dword:00023e00
Click Modify and change it.

Yours.

Roi

Message presented you leave your site

2013-07-04T15:30:00.000+03:00

This time,I present in JavaScript (Jquery) code that checks whether you leave your domain. If so - popup alert to informing you that you are leaving the domain

$(document).ready(function () {

$("a").click(function(event) {

// check if the target link is your.domain.com

// if not will show alert message

if (this.href.indexOf("your.domian.com") == -1) {

if (this.href.startsWith("http")) {

event.preventDefault();

var linkLocation = this.href;

alert('Note that you are directed to an external site does not belong to this site');

window.open(linkLocation, '');

return false;

}

});

Of course, change the code from "your.domian.com" to your site.

thanks,

Roi