This might also be interesting for you: Do it yourself powerbank with voltage regulator and voltmeter

Planning and choice of material

Before I start building, I first think about where the solar panels should be mounted: One on the garden shed, two on the balcony railing and one on the weather station mast.

The garden shed has a straight wooden wall, which makes a flat bracket necessary. The balcony railing and the mast, on the other hand, each have a diameter of 30 mm – a bracket with a rounding is required here. So I currently need two different types of mounting.

I use a monocrystalline 2-watt module with an output voltage of around 6 V as the solar panel (see Figure 1.0.1). For the electrical connection to the panel, I opted for a standard 5.5×2.1 mm hollow socket (see Fig. 1.0.2). Cables and screws are not included in the illustration as they may vary depending on the application. The panels are available in packs of five or ten from various online retailers. Their dimensions are 120 × 110 mm (length × width), whereby the height can vary between 1.3 mm and 1.8 mm.

Construction of the housing

The central component for the solar panel mount is the frame. It provides both the stability and the sealing function of the housing. The frame must be torsion-resistant, be able to accommodate all the necessary threads and still remain compact. The solar panel is pressed into its seat from behind with strips so that it is tightly sealed at the front.
Several screws are required to create an even contact pressure (see Figure 2.0.1).

There is a cover on the back (Fig. 2.0.2), which is reinforced in an X shape for stability. This cover also accommodates the hollow bushing (5.5 × 2.1 mm), which is later attached with a small bridge. One of the four pressure bars that press the panel into the frame can be seen in Figure 2.0.3. The joint holder (Fig. 2.0.4) is used to attach the panel to railings or walls. This serves as a holder for the retaining lever, which holds the housing securely in place and allows flexible alignment.

Figure 2.1.1 shows the holding arm for railing attachment with a 30 mm diameter at the end. The counterpart for the holder can be seen in Fig. 2.1.2. The bridge (Fig. 2.1.3) for attaching the hollow bushing to the cover.

3D printing of the components

For 3D printing, I chose the following print orientations for the Prusa MK4 (see Figures 3.0.1 and 3.0.2).
Particularly important: The bar must of course be printed four times, as it is used on all four sides of the solar panel.

Thread cutting

Now let’s move on to my favorite activity: thread cutting. Admittedly, there is a lot to do in the frame (see Figure 3.1.1): The green markings indicate 12× M3 threads, the yellow ones 4× M3 threads.

There is an alternative version of the frame for those who are not the biggest fans of thread cutting. This is equipped with slots to accommodate normal M3 nuts. The matching file is called: Deckel110x120_V1-2.stl (see Figure 3.1.3).
The recesses for the nuts are also clearly visible in Figures 3.1.4 and 3.1.5.

On the back cover (Figure 3.1.2), however, the cutting of threads can hardly be avoided: 3× M3 threads and 2× M2 threads are required here.
Alternatively, self-tapping screws can also be used – this saves tools and time.

Soldering and assembly

Once all 3D printed parts have been cleaned and threaded, the solar panel can be connected and soldered.

Electrical connections

The first hurdle is to find out where the positive pole is located on the panel.
There are only two soldering lugs on the back of the solar panel, but no labeling – so: plus or minus? To determine this quickly and clearly, we need a multimeter. If we set it to measure direct voltage (DC), it helps us to recognize the polarity.

Figure 4.0.1: The red wire (positive) of the multimeter is connected to one of the soldering lugs, the black wire (negative) to the other. If a minus sign appears in front of the measured value on the display, this means that the red wire is connected to the negative terminal – i.e. the opposite tab is the positive terminal of the solar panel.

Figure 4.0.2 shows the reverse configuration: the red wire is connected to the positive pole of the panel, the black wire to the negative pole. In this case, no minus sign appears in the display – the polarity is correct,
and we now know for sure where the positive pole of the solar panel is.

The hollow socket is now soldered to the solar panel. Figure 4.1.1 clearly shows which connections need to be connected.
Figure 4.1.2 shows the finished soldering in the installed state.

I have also soldered a diode to the positive pole of the hollow socket (see Fig. 4.1.3).
This protects against reverse current: if the connected load does not have its own protective diode, the solar panel would draw energy from the battery in the dark – and unintentionally work as a heater.

A typical example:
If a charge controller does not have an integrated diode, the battery can discharge the panel backwards in the absence of sunlight.

The installation direction of the diode is crucial so that the current can only flow in one direction.

Mounting the hollow bushing and inserting the panel

The installation of the soldered hollow bushing on the retaining bridge is shown in Figure 4.2.1.
The hollow bushing is pushed into the large opening of the retaining bridge until the thread protrudes on the other side. The nut is then placed on the thread and tightened – the result is shown in Figure 4.2.2. The solar panel is now inserted into the retaining seat of the frame (see Figure 4.2.3, red frame).
If you want to increase the tightness, you can apply some elastic adhesive evenly to the seat before inserting the panel. Once the solar panel is correctly seated, the first strip is placed in position and lightly tightened with a screw in the middle (see Figure 4.2.4, magenta circle). A side view is shown in Figure 4.2.5 to illustrate this.

Fastening the slats and screwing

The remaining slats are attached one by one with the screw in the middle (see figure 4.3.1). Then insert the remaining screws, but do not tighten them yet (see figure 4.3.2). When the solar panel is evenly positioned, first tighten the middle screws of each strip.
Then tighten all the remaining screws and retighten them after a short time. If the solar panel still has some play, you can place some shims between the solar panel and the rail until it is firmly in place. Figure 4.3.3 shows how the hollow bushing and retaining bridge are attached to the inside of the back cover.
Finally, the back cover is screwed onto the frame with four screws (see Fig. 4.3.4).

Only a few steps are required to complete the bracket:
First, the M6 nut is pressed into the joint bracket (see figure 4.4.1).
The holder for the railing is then attached to the joint holder with an M6 screw (see Figure 4.4.2).
The joint holder is now screwed to the back cover with three M3 screws.
Do not forget: The M3 nuts must be pressed into the counterholder that will later be used for mounting on the railing (see figure 4.4.4).

Exploded view of the solar panel mount

For a better overview, there is an exploded view of the solar panel holder in Figure 4.5.1.

Note

Of course, there are also alternative mounting options. For instance, in a garden flower bed, plants may grow over time and gradually shade the solar panel. In this case, a holder with an aluminum rod and ground spike can be used (see Fig. 5.0.1).

On a balcony, the panel can be attached via flower boxes that cover the railing; here too, a holder with an aluminum rod is available (see Fig. 5.0.2).

Additionally, a holder designed for mounting on a wall or post is also provided (see Fig. 5.0.3).

Furthermore, I plan to design a solar panel holder with a built-in USB-C output.

The solar panel is an excellent addition for powering my small devices and outdoor sensors – and this holds true even in winter! Depending on your needs, you can either assemble the cables yourself or purchase them ready-made. In any case, the rule of thumb is: the shorter, the better.

Have fun building your own version – or perhaps this project has inspired you to create something entirely new.

Files for Download

• Housing for the solar panel mount

The post DIY solar panel mount for 2W panels appeared first on Nerd Corner.

You might also be interested in this: Create Docker images and upload them to Dockerhub

Set up a VPS with Hetzner

Hetzner often offers referral links with credit benefits for new customers. Of course, you can also use other providers, but Hetzner is attractively priced and offers solid services.

What is a VPS?

A Virtual Private Server (VPS) is a virtual server that is operated on a physical machine and acts as an independent server. It offers more control than classic shared hosting and is a cost-effective alternative to dedicated servers. Access is usually via SSH (Secure Shell), which allows us to control the server via the command line.

SSH access to the VPS

Once a VPS has been created, it is usually managed via a secure shell (SSH). SSH is a protocol that enables encrypted connections to remote servers. The following command is used to connect to the server:

ssh root@<IP-Server>

If an SSH key has been stored, authentication can be carried out using public key authentication, which is more secure than a password.

Create a server at Hetzner

1. After logging into the Hetzner Cloud, we navigate to “Projects” and create a new project.
2. Select “Add server” and can configure an instance.
3. The cheapest model is often sufficient to start with. However, I recommend activating the option for an IPv4 address, as purely IPv6-based setups often cause compatibility problems.

Setting up a domain

To access the application later under your own domain, you must register a domain and link it to the server.

Apply for a domain at Hetzner

1. Register a new domain or add an existing domain in the Hetzner ConsoleH.
2. To manage DNS entries, we need to activate DNS access.

Set name servers

The following name servers should be used:

helium.ns.hetzner.de. 
hydrogen.ns.hetzner.com. 
oxygen.ns.hetzner.com.

These new name servers offer better performance and flexibility compared to the old Hetzner name servers:

ns1.first-ns.de.
robotns2.second-ns.de.
robotns3.second-ns.com.

However, both nameserver variants are possible! The DNS changes take some time. However, we can use tools such as MXToolbox to check whether the changes have already taken place.

Connect the domain to the server

Now the IP address of the server must be linked to the domain:

1. Switch to DNS zones in the Hetzner Cloud.
2. Select the registered domain.
3. Create a new A-Record and enter the IPv4 address of the server.
4. If available, remove the IPv6 record (AAAA) to avoid compatibility problems.

You can also use MXToolbox to check whether the DNS changes have already been applied.

Set up Kubernetes

Kubernetes is a powerful orchestration tool for containers. I use k3s, a lean Kubernetes variant that is particularly suitable for smaller environments.

Install K3s on the server

Connect to the server via SSH and install k3s with the following command:

curl -sfL https://get.k3s.io | sh - 

The script installs k3s and starts the Kubernetes service. After installation, k3s can be checked with the following command:

kubectl get nodes

k3s comes with its own kubectl version, so that no separate installation is necessary.

Create YAML files for FE, BE, MySQL and Redis

To deploy our application, we need YAML files for:

• Frontend (Angular)
• Backend (NestJS)
• Database (MySQL)
• Session-Management (Redis)

A deployment file for the backend could look like this:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: backend
spec:
  replicas: 1
  selector:
    matchLabels:
      app: backend
  template:
    metadata:
      labels:
        app: backend
    spec:
      containers:
        - name: backend
          image: dockerhub-user/backend:latest
          ports:
            - containerPort: 3000
---
apiVersion: v1
kind: Service
metadata:
  name: backend-service
spec:
  selector:
    app: backend
  ports:
    - protocol: TCP
      port: 80
      targetPort: 3000
  type: ClusterIP

What are deployments and services?

• Deployments manage the provision and scaling of containers.
• Services ensure a stable network connection between containers.
• ClusterIP means that the service is only accessible within the Kubernetes cluster.

Set up Caddy as a reverse proxy

A reverse proxy is required to ensure that incoming traffic is distributed correctly. K3s comes with Traefik by default, but I opted for a simpler solution: Caddy. I was really surprised how little guidance or documentation there is on Caddy in combination with Kubernetes.

Why Kubernetes with Caddy?

• Automatic Let’s Encrypt SSL certificates
• Simple configuration via Caddyfile
• Built-in load balancer

Remove Traefik

kubectl delete helmrelease traefik -n kube-system

Create Caddy Deployment

apiVersion: apps/v1
kind: Deployment
metadata:
  name: caddy
spec:
  replicas: 1
  selector:
    matchLabels:
      app: caddy
  template:
    metadata:
      labels:
        app: caddy
    spec:
      containers:
        - name: caddy
          image: caddy
          volumeMounts:
            - name: caddy-config
              mountPath: /etc/caddy/Caddyfile
      volumes:
        - name: caddy-config
          configMap:
            name: caddy-config
---
apiVersion: v1
kind: ConfigMap
metadata:
  name: caddy-config
data:
  Caddyfile: |

    example.com {
        reverse_proxy backend-service:3000
    }

---
apiVersion: v1
kind: Service
metadata:
  name: caddy-service
spec:
  type: LoadBalancer
  selector:
    app: caddy
  ports:
    - port: 80
      targetPort: 80
    - port: 443
      targetPort: 443

Important: Since Let’s Encrypt has a rate limit, tests should first be carried out with staging certificates!

Conclusion

After these steps, the application is now running in a Kubernetes cluster on a Hetzner VPS and can be accessed via its own domain. The next step would be to set up an automatic CI/CD pipeline to deploy new versions without manual effort.

The post Deployment of a WebApp with Kubernetes and Caddy appeared first on Nerd Corner.

You might also be interested in this: Hosting NestJS on Vercel

Creation of the Docker Compose Yml

With Docker Compose, all components of an application can be defined via a single configuration file and built or started together.

version: '3.8'

services:
  frontend:
    build: ./frontend
    ports:
      - "80:80"
    depends_on:
      - backend

  backend:
    build: ./backend
    ports:
      - "3000:3000"
    depends_on:
      - mysql
      - redis
    environment:
      - DATABASE_URL=mysql://user:password@mysql:3306/db
      - SESSION_STORE=redis://redis:6379

  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: db
    ports:
      - "3306:3306"

  redis:
    image: redis:latest
    ports:
      - "6379:6379"

Creating the env file

To manage environment variables centrally, we create an .env file:

DATABASE_URL=mysql://user:password@mysql:3306/db 
SESSION_STORE=redis://redis:6379

Important: All ENV variables used in the code must also appear in docker-compose.yml!

Docker image for the frontend

The Angular frontend must be built for production. Here is an example Dockerfile:

FROM node:20 AS build
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build --prod

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

Since we are dependent on nginx for the build, we also need a corresponding config file:

server {
  listen 80;
  server_name _;

  location / {
    root /usr/share/nginx/html;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
}

Docker image for the backend

The NestJS backend also needs to be built. Here is an optimized Dockerfile.

# Build stage
FROM node:20 AS build
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build

# Production stage
FROM node:20-alpine
WORKDIR /app

COPY --from=build /app/dist ./dist
COPY package.json package-lock.json ./
RUN npm install --only=production
CMD ["node", "dist/main.js"]

Building the app with Docker Compose

Once all the Dockerfiles have been configured, the images can now be built. The whole thing is really easy with Docker compose.

docker compose up -d --build

The images are then ready, the containers are built and the app can be tested locally! The last step is to upload the images to DockerHub so that they can be used more easily later for deployment on a server.

Uploading to Docker Hub

Uploading is explained step by step below:

1. Create an account on Dockerhub
2. Create a repository for the frontend and backend (1 private repo is currently free)
3. Build the images and tag them:

   docker tag <image-id> dockerAccountName/frontend:latest
   docker tag <image-id> dockerAccountName/backend:latest

4. Sign up and push the images:

   docker login
   docker push dockerAccountName/frontend:latest
   docker push dockerAccountName/backend:latest

Outlook: Deployment with Kubernetes

Now that the images are on Docker Hub, nothing stands in the way of deployment. I have opted for a Kubernetes cluster on a Hetzner VPS. More information here.

The post Create Docker images and upload them to Docker Hub appeared first on Nerd Corner.

This might also be interesting for you: Adding Swagger to Node Server

Step 1: Setting Up NestJS Vercel hosting

First things first, getting the basic setup to deploy on Vercel. Vercel is awesome for serverless, but working with NestJS needed a few tweaks. The main thing is to set up a vercel.json configuration file, which tells Vercel exactly how to handle your app.

Here’s the configuration I ended up with:

{
  "version": 2,
  "builds": [
    {
      "src": "src/main.ts",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "src/main.ts",
      "methods": [
        "GET",
        "POST",
        "PUT",
        "PATCH",
        "OPTIONS",
        "DELETE",
        "HEAD",
        "CONNECT",
        "TRACE"
      ]
    }
  ]
}

I deployed it to Vercel and got the following error:

This Serverless Function has crashed. Your connection is working correctly. 
Vercel is working correctly. 500: INTERNAL_SERVER_ERROR 
Code: FUNCTION_INVOCATION_FAILED ID: bom1::sgk4v-1711014022883-1e9ed54f4c37

Looking in the logs, I noticed the database connection was an issue and in addition got the following log message:

No exports found in module "/var/task/app-name/src/main.js".
Did you forget to export a function or a server?

Turned out I could ignore the second part of the error message and just focus on the database connection.

Step 2: Configuring the Database

For my app, I used a mysql database with multiple schemas. I tried several free offers, but they were not compatible with the multiple schemas approach. Therefore I ended up with hosting it on Google Cloud. I scaled it down to a price of 0.01$ per hour and used the 300$ newbie offer.

Allowing Vercel to connect required setting the IP to 0.0.0.0/0 in Google Cloud’s configuration, making the database accessible from any IP address. Important note: make sure you test locally before deploying to Vercel, or you’ll be dealing with errors like these:

Step 3: Dealing with CORS

CORS caused also some headaches. Make sure you allow OPTIONS for CORS preflight requests, as Vercel needed explicit permission for cross-origin requests. I ended up adding a lot of headers to make sure requests were allowed:

app.enableCors({
    origin: 'domain-name',
    credentials: true,
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
    allowedHeaders: [
      'Origin',
      'X-Requested-With',
      'Content-Type',
      'Accept',
      'Authorization',
    ],
  });

Step 4: Switching to express-session and Redis for Session Management

One of the trickiest parts was getting sessions to work. I started with the cookie-session library, but Vercel completely ignore it. After digging into the docs and some trial and error, I switched to express-session, which is more popular and works nicer with Vercel’s serverless environment.

For some reason the import syntax has to be exactly like this:

import session = require('express-session');

I also had to configure the session middleware with trust proxy enabled, since Vercel proxies requests. Here’s what the final setup looked like:

const expressApp = app.getHttpAdapter().getInstance();
expressApp.set('trust proxy', true);

Also setting secure: true and sameSite: 'none' was essential to ensure cookies work across HTTPS and cross-origin requests!

Keep in mind, with Vercel, multiple serverless instances can handle requests simultaneously, which caused session conflicts. To fix this, I connected my session storage to a Redis instance. Luckily this was super easy.

Redis keeps session data consistent, avoiding conflicts across requests, especially under load. The code I ended up with:

const expressApp = app.getHttpAdapter().getInstance();
expressApp.set('trust proxy', true);

const redisClient = createClient({
    password: process.env.REDIS_PASSWORD,
    socket: {
      host: process.env.REDIS_HOST,
      port: parseInt(process.env.REDIS_PORT, 10),
    },
  });

  redisClient
    .connect()
    .catch((err) =>
      console.log('Could not establish a connection with Redis: ' + err),
    );

  redisClient.on('error', (err) => console.log('Redis error: ' + err));
  redisClient.on('connect', () =>
    console.log('Connected to Redis successfully'),
  );

  app.use(
    session({
      store: new RedisStore({ client: redisClient }),
      secret: process.env.COOKIE_SECRET,
      cookie: {
        secure: process.env.NODE_ENV !== 'development',
        sameSite: process.env.NODE_ENV === 'development' ? 'lax' : 'none',
        maxAge: 86400000,
      },
    }),
  );

Step 5: Add withCredentials in the Frontend

This step is just a side note: For session cookies to work between the frontend and backend, withCredentials need to be set to true on my frontend’s HTTP requests. This allows cookies to be included in cross-origin requests, which is important when the frontend and backend are hosted separately. I had to make sure Angular’s HTTP client had this setting enabled.

Step 6: Include font

To include font files in your NestJS project, you can use the compilerOptions in the nest-cli.json file to define assets for build output, like specifying "include": "**/*.ttf" and "outDir": "dist/src".

{
  "$schema": "https://json.schemastore.org/nest-cli",
  "collection": "@nestjs/schematics",
  "sourceRoot": "src",
  "compilerOptions": {
    "assets": [
      {
        "include": "**/*.ttf",
        "outDir": "dist/src"
      }
    ],
    "deleteOutDir": true
  }
}

After the build, ensure the fonts are correctly referenced in your code using path.resolve, e.g., path.resolve(__dirname, '../fonts/Roboto-Regular.ttf'). This approach ensures the font files are bundled with the build and accessible during runtime.

Final Thoughts to NestJS Vercel hosting

Deploying my NestJS app on Vercel was a true roller coaster. Sometimes, I felt like I was on the verge of getting everything working perfectly, only to be hit with new errors that sent me back to troubleshooting mode. There were moments of frustration—especially around the session handling and CORS issues. But each solution brought a new high, and every error fixed felt like a little victory.

Now, with everything finally working smoothly, I can say it feels awesome. Seeing my app live and functioning the way I envisioned is worth all the headaches. It’s a huge relief, but even more, it’s deeply satisfying to know I’ve overcome each hurdle and can look back on what I learned. I hope this guide can save others some of those low points and help them reach that “it just works” moment a little faster!

The post Lessons Learned: Hosting NestJS App on Vercel appeared first on Nerd Corner.

The solution to my problem is the mini-voltmeter, which I have used many times in various projects in the past. The accuracy of the mini-voltmeter is usually sufficient and my projects tend to be in the low-voltage range. In addition, the mini voltmeters are relatively inexpensive and you can get them everywhere.

I also use USB multimeters to measure voltage and current, which save the values at the same time. Figure 1.0 shows some USB multimeters that can handle more or less voltage. Some devices are very expensive and the maximum number of amperes that can be measured also varies. If you only want to measure voltage and don’t have much of a budget, my project is just right for you.

This might also interest you: Do it yourself power bank with voltage regulator and voltmeter

List of components

• Mini voltmeter DSN-DUM-368 /or DSN-DMU-368k (Figure 2.0.1)
• Hollow socket 5.5×2.1 (Figure 2.0.2)
• Hollow plug 5.5×2.1 (image 2.0.3)
• USB micro adapter board optional (picture 2.0.4)
• M2 x 10 countersunk head screw 6x (without picture)
• M2 x 4 cylinder head screw 2x optional (without picture)
• Cable 0.5mm² (without picture)

As can be seen in Fig. 3.0, there are two different types of mini voltmeters. The one with two cables (Figure 3.0.1) and the one with three cables (Figure 3.0.2).
The main difference is that with the mini-voltmeter with two cables, the supply voltage is the same as the voltage to be measured (Figure 3.0.1).

However, there is a problem with this variant. If the voltage is below 4.7V, the mini-voltmeter will no longer work as it requires a supply voltage of at least 4.7V. So if you want to measure a voltage below 4.7V, you need a supply voltage above 4.7V and a separate cable to measure the voltage (Fig. 3.0.2).

You can also convert a mini-voltmeter with three cables into a mini-voltmeter with two cables. You only need to solder a bridge between +Ub and input at jumper-1 (Figure 3.1.1). Jumpers two to four are used for fine adjustment of the mini-voltmeter (Fig. 3.1.1), in some cases the step widths are printed on as in Fig. 3.0.1.
How such a mini-voltmeter is constructed in detail is documented here or here for example.

Construction

Because of these two different types, I have decided to construct two housings. Let’s start with the variant for the two-cable mini-voltmeter. In the past, I have installed mini-voltmeters in enclosures several times and in doing so have become familiar with the challenges of dimensional accuracy and the diversity of variants from different manufacturers. Despite supposedly standardized components, you often have to reckon with slight deviations in the dimensions. It is therefore important to take larger tolerances into account in the design.

One of the housings I designed was intended for the LM2587 step-up module (Figure 3.2.1). This housing seemed suitable for modification to meet the new requirements. It already contains holders for the hollow plug (2.0.3) and the hollow socket (2.0.2) that I want to use. There is also already a recess in the cover for the mini voltmeter (2.0.1). I am largely satisfied with the dimensions (Figure 3.2.2), apart from the length. What bothers me, however, is the position of the voltmeter in the lid – it should be placed more centrally, i.e. closer to the middle.

First I start with the modification of the lid. I’m happy with the width and height, but the housing is too long. I therefore shorten the cover on the side where the hollow socket (2.0.2) is attached. This does not affect the holder of the hollow plug, as this is already perfectly matched to the plug. When shortening, care must be taken to ensure that the internal components do not touch and that there is sufficient space for the cabling. However, you should not overdo it with the reduction in size, as stability and feel are also important factors in a design.

After weighing up all the factors, I shorten the length of the housing or cover to 63.5 mm, and the position of the mini-voltmeter is now centered on the cover (Figure 4.0.1). I have removed the hole for adjusting the LM2587S (marked in white) and the ventilation slots, as no adjustment is required and no ventilation is necessary due to the low heat development.

In picture 4.0.2 (marked in red) you can see that I have changed the recesses or pockets, as some mini voltmeters have a flat surface instead of tabs (picture 4.0.3).

In the next step, I shorten the housing to 63.5 mm, similar to the cover. I also remove the mounting pillars for the LM2587S module, as shown in Figure 4.1.1. On the side of the hollow socket, I remove the recess and move the hole pattern 1 mm upwards, towards the cover (Fig. 4.1.2). Finally, the lettering is corrected to VOLT METER.

3D print of the first variant

Let’s move on to printing the parts for our variant 1 with two cables. We only need three parts for this variant:

• Housing Fig. 5.0.1
• Cover Fig. 5.0.2
• Hollow socket holder Fig. 5.0.3

There are no special requirements for printing these parts and no special material is needed. In this case, I used inexpensive PLA from a reliable manufacturer. The printing was done on a Prusa MK4 with the usual standard settings.

When reworking the printed parts for variant one, only four M2 threads need to be cut into the housing (Fig. 6.0.1) and two M2 threads on the mounting bridge for the hollow bushing (Fig. 6.0.2). Two M2 threads must also be cut in the cover (Figure 6.0.3). Alternatively, self-tapping screws can be used or the parts can be partially glued.

Soldering and wiring the first variant

Once all the parts for variant one have been printed and processed, the hollow socket is soldered to the cables. The positive and negative poles to which the cables are soldered are marked in Figure 6.1.1 (Figure 6.1.2). The cables of the hollow socket and the mini voltmeter are then screwed into the hollow plug (Fig. 6.1.3). Whether the cables are twisted or soldered at the ends is a matter of taste. I always connect the cables of the mini-voltmeter to the current output. Figure 6.1.4 shows the complete inner workings soldered and wired. To stabilize the solder joints on the mini-voltmeter, I reinforced them with a small drop of hot glue. Finally, the hollow socket is inserted into the back of the housing and the hollow plug is pushed into the recess provided (Fig. 6.1.5).

In the penultimate step, I push the mini-voltmeter into the cut-out provided in the cover and secure it by screwing or gluing it in place (Fig. 6.2.1). The cover is then screwed to the housing (Figure 6.2.2). Finally, carry out a function test (Figure 6.2.3).

Construction of the second variant

If you do not want to measure or display the voltage below 4.7 V with the mini-voltmeter, you can stop at this point. However, as I mentioned at the beginning, it is possible to operate these mini-voltmeters with three cables. This option is available if jumper1 (Figure 3.1.1) is not set or not bridged. As the mini-voltmeter requires a minimum supply voltage of 4.7 V in order to function, we need a second voltage source that is above this limit.

In variant one of the housing, however, there is only one input, which is why a second current input is required. As I don’t want to change the dimensions of the housing and there is hardly any space for a second hollow socket, an alternative solution is needed. The solution is a micro-USB board (Figure 2.0.4), which is flat and based on the widely used micro-USB standard.

The question now arises as to where the second connection should be positioned. A side connection would take up too much space, e.g. on a table, as the cable would protrude upwards or downwards at a 90° angle. For me, the best solution is to place the USB port on the same side as the hollow socket.

The next question concerns the mounting of the micro USB board: should it be attached directly to the housing or simply glued on? After careful consideration, I decided to mount the board on the retaining bridge of the hollow socket (Figures 5.0.3, 6.0.2 and 7.0.1). In picture 7.0.2 you can see how I attached a plate to the holder bridge. This plate has two M2 threaded holes (marked in white) for attaching the micro USB board and two cut-outs for cables and solder.

On the housing (Figure 7.0.3), the drilling pattern (marked red) must be moved 1.5 mm towards the cover to create space for the slot of the micro USB connector. The slot (marked yellow) is positioned below the hollow socket.

Printing is relatively quick. We need the housing with USB slot (Fig. 8.0.1), the cover (Fig. 8.0.2) and the new holder for the hollow socket and USB board (Fig. 8.0.3).

In the post-processing of the printed parts for variant “two”, the thread must now be cut. M2 4x on the housing (Fig. 9.0.1) and 4x M2 mounting bridge for the hollow socket and USB board (Fig. 9.0.2). Two M2 threads must also be cut on the cover (Fig. 9.0.3).

Soldering and screwing the second variant

The parts must now be soldered and screwed together, as in variant one (Fig. 6.1). It should be noted that there is now an additional cable and the wiring is different to variant one. The mini-voltmeter is now powered externally via the micro-USB connection. The negative pole is routed from the hollow socket (9.1.3) to the USB board (9.1.1), then to the mini-voltmeter (9.1.2) and finally to the hollow plug (9.1.4).

The positive cable for the power supply of the mini-voltmeter (9.1.2) goes from the positive pole of the micro USB (9.1.1) directly to the positive pole of the mini-voltmeter (9.1.2). The main power cable runs from the positive pole of the hollow socket (9.1.3) to the positive pole of the hollow plug (9.1.4). The test lead runs directly from the mini-voltmeter (9.1.2) to the positive pole of the hollow plug (9.1.4).

Figure 9.2.1 shows how to screw the USB board (9.1.1) to the hollow socket holder (9.0.2). Figure 9.2.2 shows the hollow socket 9.1.3 and the USB board 9.1.1 completely soldered, screwed to the hollow socket holder and then fixed again with hot glue. The result can be seen in picture 9.2.1.

After successfully soldering and gluing, I assemble the mini-voltmeter variant “two”. First, I insert the retaining bridge for the hollow socket and USB board into the back of the housing and screw it in from the outside (Fig. 9.3.1).

The hollow plug is then inserted into the recess provided and pressed down to the bottom (Fig. 9.3.2). Now press the mini-voltmeter into the cover and either screw or glue it in place (Fig. 9.3.3). Finally, the cover is fitted and screwed on with the M2 screws (Fig. 9.3.4).

Function test

Now it’s time for the essential function test. For this we need a micro USB power supply unit and a 12V power supply unit with a 5.5×2.1 mm hollow plug. First, I connect the micro USB power supply, which supplies 5V, to the housing. The display of the mini-voltmeter lights up and shows zero (Figure 9.4.1). This is the expected result, as there is still no voltage on the line to be measured. Only when I connect the 12V power supply unit with hollow plug does the mini-voltmeter correctly display 12V (Fig. 9.4.2).

Everything works perfectly and adds value for me in the workshop.

Files to download

• Mini digital voltmeter

The post Mini Digital Voltmeter appeared first on Nerd Corner.

This might also be interesting for you: Do it yourself powerbank with voltage regulator and voltmeter

List of components

To demonstrate the function, I have decided on a small test setup. I need the following for my test setup:

• Barrel jack 5,5 x 2,1 (1.0.1)
• Voltmeter (1.0.2)
• 5V power supply unit (1.0.3)
• Barrel jack holder (1.0.4)
• Barrel jack Bridge(1.0.5)
• Some cables (1.0.6)

Assembly instructions for bracket and bridge

The first step is to print the holder (1.0.4) and the bridge (1.0.5) with the 3D printer. After cleaning the printed parts, I cut two M2 threads into the holder (see 2.0.1). If you prefer to work with self-tapping screws, you can skip this step. The barrel jack is then pushed into the large hole in the bridge (2.0.2) and screwed tight with the nut on the front of the bridge (2.0.3). Fitting the bridge to the bracket is also very simple: Slide the bridge with the recesses on the right and left over the two cylinder surfaces on the bracket (2.0.4) and secure it with M2 screws (2.0.5). The bracket and bridge with the barrel jack fitted form a very stable unit that can absorb large forces. If everything is fitted correctly, the barrel jack should not protrude, but should be recessed by 0.3 to 0.5 mm.

Wiring and soldering the barrel jack

Now we come to the core of this article: wiring and soldering the barrel jack. I use pre-assembled plugs and sockets that already contain crimped cables and a strain relief. The colour coding of the cables is also practical, as red stands for plus and black for minus (3.0.1).

The barrel jack with switching function usually has three solder lugs. The negative pole is always switched, i.e. in figure 3.0.2 this corresponds to number two. The negative pole of the primary power supply, e.g. battery or accumulator, is also soldered on here. Solder lug number one is intended for the common positive terminal; all positive connections are soldered here. The negative pole to the consumers in the device is soldered to soldering lug number three. Figure 3.0.3 shows the complete soldering of the barrel jack.

Assembly and connection

After successful soldering, you can now continue with the rest of the test setup. Firstly, the holder with the soldered barrel jack is screwed onto a wooden plate (4.0.1). The two mini-voltmeters are then attached to the wooden plate (4.0.2). The mini voltmeters are a creation of Nerd Corner. If you are interested in such housings, you can read the corresponding article and download the STL files at the following link.

Now I connect the cables soldered to the barrel jack to the mini-voltmeters (see Figure 4.0.2, pink frame). Next, I connect the primary power source to my 5V power supply and switch it on (see Figure 4.0.3, yellow frame). After switching on the power supply, a voltage is present at both mini voltmeters: 5.35 volts at the supply (red circle) and 5.28 volts at the load (green circle).

Integration of the second power source

As the current flows cleanly via the barrel jack to the consumer, the second power source now comes into play. I operate this with 12 V in order to have a clear difference to the primary power supply. Figure 4.1.1 shows the second power supply with 12.2 volts (turquoise frame).

Now I plug the second power supply with 12 volts into the barrel jack (Figure 4.1.2, blue frame). After a short delay, the value on the consumer’s mini-voltmeter changes to 12 volts (green frame). Nothing has changed on the primary power supply; it remains plugged in and switched on (red frame). The value is still 5.34 volts, which is 0.01 volts lower than before the second power supply was plugged in, but this is due to the fluctuations of the 5V power supply.

As a final step, I remove the 5 volt power supply unit from the primary circuit to check whether there really is no voltage on the primary circuit. Figure 4.2.1 in the yellow frame remains dark and so the test was successful!

Files for Downloading

• Barrel jack holder and bridge

The post Using a barrel jack as a switch appeared first on Nerd Corner.

I often see blog articles where the HTML code is embedded in the Arduino file. You can do this for a mini demonstration, but it’s complete rubbish for everyday use. It is far too confusing and as soon as the project grows it is no longer usable.

The proper alternative is to set up a folder called “data” and store the web pages in this folder as html files. In addition, the styling is saved as a CSS file and functions can even be executed via a JavaScript file. So everything is 1:1 like on a normal web server!

This might also be interesting for you: WeMos D1 R2 first steps and Wifi integration

List of components

• Arduino IDE (development environment)
• WeMos D1 R2

The setup of the file system (officially SPIFFS) needs to be done once and is very easy:

(First you should have completed the basic setup from the first part!)

1. Download a copy of the file “ESP8266FS-0.2.0.zip” from GitHub and unzip it
2. Place the file esp8266fs.jar in the Arduino tool directory. The path looks like this: [home_dir]\Arduino\tools\ESP8266FS\tool\esp8266fs.jar (See picture) I had to create the path part tools\ESP8266FS\tool\ in the Arduino folder myself.
3. Restart the Arduino IDE.

That’s it already! You can now see the new item “ESP8266 Sketch Data Upload” in the Arduino IDE under Tools.

How can I use the new file system now?

1. Create an additional folder with the name “data” in your current WeMos project folder. As shown in the following image

2. Place the files you want to upload in the ‘data’ directory
3. In the Arduino IDE, select the WeMos in the ‘Tools’ menu and select a size for ‘Flash Size’
4. Close the dialogue box for the serial monitor!
5. Select the ‘ESP8266 Sketch Data Upload’ option from the ‘Tools’ menu.

As soon as the upload is complete, the message window of the Arduino IDE shows 100% upload.

WeMos example programme for switching the OnBoard LED on and off

Similar to the first part, the web server will control the OnBoard LED. The code from the first part also serves as the basis. The revised code looks like this:

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>

ESP8266WebServer server(80);

void setup() {
  Serial.begin(115200); //Baudrate
  Serial.println("ESP starts");

  WiFi.begin("NerdCornerWiFi","NerdCornerPassword");


  Serial.print("Connecting...");

  while(WiFi.status()!=WL_CONNECTED){ //Loop which makes a point every 500ms until the connection process has finished

    delay(500);
    Serial.print(".");
  }
  Serial.println();

  Serial.print("Connected! IP-Address: ");
  Serial.println(WiFi.localIP()); //Displaying the IP Address

  if (MDNS.begin("nerd-corner")) {
    Serial.println("DNS started, available with: ");
    Serial.println("http://nerd-corner.local/");
  }

  server.serveStatic("/", SPIFFS, "/", "max-age=86400");
  SPIFFS.begin();

  server.onNotFound([](){ 
    server.send(404, "text/plain", "Landing page not found! Don't forget to name your landing page 'index.html'!");  
  });
 
  server.on("/led", HTTP_POST, []() {    
     
    const String ledState = server.arg("ledstate");
    if(ledState=="on"){
      switchLedOn();
    }
    else if(ledState=="off"){
      switchLedOff();
    }
    server.send(200, "text/json", "{\"result\":\"ok\"}");
  });

  server.begin();
  // initialize digital pin LED_BUILTIN as an output.
  pinMode(LED_BUILTIN, OUTPUT);
}

void loop() {
  server.handleClient();
  MDNS.update();

}

void switchLedOff(){ 
  digitalWrite(LED_BUILTIN, HIGH);   // turn the D1 LED off 
}

void switchLedOn(){ 
  digitalWrite(LED_BUILTIN, LOW);    // turn the LED on 
}

I would like to point out a few special features. For example, we have added the following:

server.serveStatic("/", SPIFFS, "/", "max-age=86400"); 
SPIFFS.begin();

Without these two lines, access to the files in the “data” folder would not be possible. Please note that the name “index.html” is set as the default for the landing page. However, you can change this if you really want to.

server.on("/led", HTTP_POST, []() {    
     
    const String ledState = server.arg("ledstate");
    if(ledState=="on"){
      switchLedOn();
    }
    else if(ledState=="off"){
      switchLedOff();
      }
      server.send(200, "text/json", "{\"result\":\"ok\"}");
  });

The “/led” endpoint receives the commands from the web server. If the command is “on”, the LED is switched on and if “off”, the LED is switched off.

Wemos website for switching the WeMos OnBoard LED on and off

The example website has a very simple structure. It primarily consists of 2 buttons for switching the LED on and off.

The folder structure of the website is very clearly organised. There is a main page with the name “index.html”. This name is common worldwide for the main pages and is also automatically recognised by WeMos. There is also a “CSS” folder for styling and a “JS” folder for functions.

We link the styles in the header area of the website. There is a standard bootstrap, which automatically makes everything a bit nicer, and a custom styles file with my own customisations. The functions of the website are also linked in the header area. I use the jQuery standard to send requests from the website to the WeMos. My own custom functions are in the “index.js”.

Please note that the jQuery file must be included BEFORE your own file, otherwise no jQuery commands can be used in your own code! The custom functions are then used by the buttons. The HTML code of the page looks as follows:

<!DOCTYPE html>
<html lang="en"></html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="./js/index.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/custom-style.css" />
    <title>D1 Webserver</title>
  </head>
  <body>
    <h1>D1 Webserver with filesystem</h1>
    <p>
      This is an example for a WeMos Webserver with a filesystem. You can easily
      create webpages with html, css and js!
    </p>

    <h3>Example to turn on and off the built in LED</h3>
    <button class="button-style" onclick="changeLEDState('on')">Turn on</button>
    <button class="button-style" onclick="changeLEDState('off')">
      Turn off
    </button>

    <h3>Example to demo a JS function</h3>
    <button class="button-style" onclick="showAlert()">Show alert</button>
  </body>
</html>

Special attention is paid to the JavaScript function “changeLEDState(value)”

function changeLEDState(value) {
  $.post("/led", { ledstate: value });
}

Because jQuery is used for communication with the WeMos, a simple dollar sign with the corresponding request command is sufficient. A value is also sent with this POST request, which is either “on” or “off” to switch the LED on and off.

The web page can be downloaded as a zip file below.

Files to download

• Wemos example webserver to control OnBoard LED

The post WeMos D1 R2 – Host entire website with html, css & js appeared first on Nerd Corner.

My naive thought was that Tensorflow would automatically use the GPU. However, you first have to follow the step-by-step instructions below in order for Tensorflow to recognise and use the GPU at all.

You might also be interested in: Should I use Tensorflow.js or Tensorflow (Python)?

DISCLAIMER: As of version 2.11, Tensorflow no longer supports GPUs under Windows! Either change the operating system or downgrade Tensorflow to version 2.10. In addition, a graphics card from NVIDIA is required!

1. Checking the desired CUDA and cuDNN versions

First, you should find out which CUDA and cuDNN version you need for TensorFlow. The website lists all versions of Tensorflow and the desired CUDA versions or cuDNN versions: https://www.tensorflow.org/install/source_windows#gpu

2. Checking your own graphics card

As already mentioned in the disclaimer, the graphics card must be from NVIDIA. On the website https://developer.nvidia.com/cuda-gpus you can search for your own GPU and check the “Compute Capability”. The minimum requirement for Tensorflow is a value of 3.5, but this is fulfilled by all current graphics cards.

3. Installing the latest NVIDIA drivers

To enable the GPU for TensorFlow, the latest NVIDIA drivers must be installed. Simply go to the NVIDIA website and download the latest driver for your graphics card.

4. Install Visual Studio (optional)

In TensorFlow, some parts of the library have been written in C++ to maximise performance. Therefore, installing Visual Studio can help improve the compatibility and performance of TensorFlow: https://visualstudio.microsoft.com/de/vs/

It is sufficient to select individual components here. I have selected everything with C++ in “Compiler, Buildtools and Runtimes” and also MS Build, which in turn automatically installs a few more components. All in all, however, over 25 GB!

5. Install CUDA Toolkit

The CUDA Toolkit is a toolkit for CUDA application development provided by NVIDIA. TensorFlow requires CUDA to run on the GPU. Simply download and install the version of the CUDA toolkit requested in step 1 from the NVIDIA website: https://developer.nvidia.com/cuda-downloads

6. Installing the cuDNN libraries

cuDNN is a library of deep learning primitives provided by NVIDIA. TensorFlow also requires cuDNN to run on the GPU. cuDNN is free, but you have to create an account as NVIDIA Developer: https://developer.nvidia.com/rdp/cudnn-download

After the download, the content must be unpacked. The content is moved to the “NVIDIA GPU Computing Toolkit” in the “Programs” folder. After moving, copy the file path of the “bin” folder.

7. Set PATH variable

Open the environment variables by simply typing the term into the Windows search. Then edit the system variable “path” and add a new entry with the file path of the “bin” folder from the previous step.

8. Creating a virtual environment

It is recommended to install TensorFlow in a virtual environment to avoid conflicts with other Python packages. Ideally using Anaconda. Simply download and install here: https://www.anaconda.com/download

Then start the Anaconda Navigator. Create a new environment under Environments > Create. Then click on Home again and launch an existing Python IDE from here. Additional IDEs such as PyCharm should also be automatically displayed here after the download.

9. Verify Tensorflow GPU support

To check whether the TensorFlow GPU support was successfully detected, the Tensorflow package should first be installed in the Python IDE. But note that under Windows the GPU is only recognised up to version 2.10! In the following versions it is no longer recognised! Tensorflow 2.10 must therefore be installed.

Then run the following code to display a list of available GPUs:

import tensorflow as tf

tf.config.list_physical_devices('GPU')

The post Enable TensorFlow GPU under Windows appeared first on Nerd Corner.

The flashlight was hard to position properly and it dazzled. For this reason, I came up with the idea of developing my own glare-free lamp, which you can simply place on the heating bed and is not blinding. Preferably wireless with a powerbank. I had already built my own powerbank with the Battery Shield V3, which I used as a basis this time.

This might also be interesting for you: Own powerbank with the Battery Shield V3

List of components

• 1 x Hollow socket 5,5×2,1
• 1 x Battery Shield V3
• 1 x LiPo 18650 3500mAh
• 1 x rocker switch 250V/3A mounting dimension 15×10,5mm
• 4 x hexagon socket head screws M2 x6
• 6 x raised countersunk head screws M2 x 20
• 17 x 5V SMD2835 LED strips
• 5 x jumper cable

Choice of LED

Since the basic housing of the powerbank with the Battery shield V3 was already finished, I mainly had to think about the lighting. LEDs with 5V or 3V should be used as illuminants, because the Battery shield V3 provides either 5V or 3V. For my purposes a lower lumen value is sufficient. After a short research I found suitable LED strips.

The light temperature of my LED strip is 6500K also called cold white. This light contains a lot of blue, which makes it easy to work with and details become visible quickly. Since the Battery shield V3 has three additional 5V and one USB A output, powering the LEDs is no problem.

The LEDs for the glare-free lamp are SMD2835. These are 2.5 mm wide and 3.5 mm long and have a slightly lower luminosity than a SMD5050. How much the LEDs consume is critical to the lamp’s burn time, as the power supply from the battery is limited.

Construction of the cover and middle cover

As already mentioned in the previous section, the base case of the powerbank is not changed. Instead, the LEDs are glued onto an inner cover. The middle cover also serves as a support for the hollow socket for the 3V output. Furthermore, a breakthrough was contructed to pass through the cables from the on-off switch. The slanted openings of the intermediate cover should help to apply adhesive to the LED strips from behind if necessary.

For the top side (the lid, where the light shines through) it became a little more complex. On the one hand, enough light should shine through, but on the other hand, it must not dazzle! Of course, a crystal clear lid would be ideal for the light yield, but as I said, then it would possibly dazzle. To strike a balance between effective light output and freedom from glare, several factors must be taken into account:

• Material selection (filament)
• Distance to the light source
• Thickness of the lens
• Printing strategy

The choice of material for the anti-glare lamp was “ivory”. The distance to the illuminant is 10.5 mm and the layer thickness (material thickness) is 1 mm. The layer height is 0.25 mm, i.e. one millimeter results in four layers, with the first layer applied 45° to the left and the second layer 45° to the right. Due to the different directions of the layers, the light is refracted again and again and becomes glare-free. This is a subjective perception and the designation glare-free therefore does not apply to all people.

Assembly

• Soldering the parts to the jumper cables:
  

• Cutting and gluing the LED strips: The LED strip is separated into two times 6 LEDs and once 5 LEDs and glued to the intermediate cover. The cable opening on the lid for the plug must remain free:
  

• Attach the hollow bushing to the intermediate cover:
  

• Screw the battery shield into the housing after the ten threads have been previously cut into the housing.

• Press the rocker switch into the cover:

• Press LiPo 18650 into the receptacle

• Connect cable and turn on:

• If all LEDs light up, place the middle cover on the housing and then place the cover on the middle cover and screw it down:
  

Glare free lamp CAD design

For the threads, the holes are designed for core hole diameter, i.e. for M2 for diameter 1.6 mm. You can tap the thread with the tap or form (press in) with a screw. Personally, I prefer the thread cutting. The two graphics show where the threads have to be cut on the housing.

Further notes

Some may wonder why the rocker switch sticks out of the lid and is not recessed. It makes it easier to turn the lamp on and off.  Most of the time you only have one hand free and can’t really reach into the recess, but if the rocker switch sticks out it’s easier to operate it. Nevertheless, I have also designed a version with recessed rocker switch, which you can download in the download section!

The power of the lamp is about 1.4 watts. At 5.05 V the current is therefore 0.27 A, which is no problem for the Battery Shield V3 and the LiPo. The burn time of the lamp is about 5 hours in continuous operation. For this data, I used a Samsung 18650 with 3500 mAh. The powerbank can be used in parallel to run the lamp. However, the total current should not exceed 3A.

I use this lamp not only for my 3D printer, but also for soldering, reading or as a night light. The powerbank is also extremely light with 127g.

Download files

• STL files of the glare free lamp

The post Glare free lamp and powerbank appeared first on Nerd Corner.

Also, the focus should always be on clean code and it should be properly documented. Especially when a project gets bigger, proper documented work pays off. For example, to document REST endpoints it is recommended to use Swagger. The Swagger API documentation provides an overview of all endpoints and even the possibility to interact with them.

This might also be interesting for you: Angular Form with clickable SVG

List of components

• IDE (for example VS Code)
• Node.js

Documentation with swagger

Although Swagger is quite well known, I could not find a detailed implementation guide. Therefore I would like to explain 2 ways to implement Swagger in an existing node server. The first way is to add Swagger parameters directly to each endpoint. This is probably the faster variant, but can get messy depending on the number of endpoints. The second option is to create a “swagger.json” file that summarizes the parameters of the endpoints.

To use Swagger the following library and its type extension will be needed:

npm install --save  swagger-ui-express
npm install --save-dev @types/swagger-ui-express

Swagger creates documentation of the endpoints:

These can be opened and you can see an example request and an example response:

The “Try it out” button can be used to interact directly with the endpoint.

Swagger API documentation with params

This variant is more recommended for smaller projects. First, these two Swagger libraries must be integrated into the project:

npm install --save-dev @types/swagger-jsdoc 
npm install --save swagger-jsdoc

The libraries are configured in app.ts or for non Typescript users app.js. Due to the configuration set here, the documentation is located in “/api-docs”:

import express from "express";
import bodyParser from "body-parser";
import exampleRoutes from "./routes/example-route";
import swaggerJSDoc from "swagger-jsdoc";
import swaggerUi from "swagger-ui-express";

const app = express();

const options = {
  definition: {
    openapi: "3.0.1",
    info: {
      title: "REST API for Swagger Documentation",
      version: "1.0.0",
    },
    schemes: ["http", "https"],
    servers: [{ url: "http://localhost:3000/" }],
  },
  apis: [
    `${__dirname}/routes/example-route.ts`,
    "./dist/routes/example-route.js",
  ],
};

const swaggerSpec = swaggerJSDoc(options);

app.use("/api-docs", swaggerUi.serve, swaggerUi.setup(swaggerSpec));
app.use(bodyParser.json());
app.use(exampleRoutes);

app.listen(3000);

The endpoint is described with the parameters as follows:

import { Router } from "express";
import { exampleFunction } from "../controller/example";

const router = Router();

/**
 * @swagger
 * /example:
 *      post:
 *          summary: Send the text to the server
 *          tags:
 *              - ExampleEndpoints
 *          description: Send a message to the server and get a response added to the original text.
 *          requestBody:
 *              required: true
 *              content:
 *                  application/json:
 *                      schema:
 *                          type: object
 *                          properties:
 *                              responseText:
 *                                  type: string
 *                                  example: This is some example string! This is an endpoint
 *          responses:
 *              201:
 *                  description: Success
 *                  content:
 *                      application/json:
 *                          schema:
 *                              type: object
 *                              properties:
 *                                  text:
 *                                      type: string
 *                                      example: This is some example string!
 *              404:
 *                  description: Not found
 *              500:
 *                  description: Internal server error
 */
router.post("/example", exampleFunction);

export default router;

Swagger API documentation with swagger.json

To have a better overview and not to mix the documentation with the actual code, it is recommended to use one, or even more json files. When using TypeScript, the Swagger.json file must be placed in the rootDirectory:

Again, the configuration is first defined in app.ts or, for non-Typescript users, in app.js. The domain path “/api-docs” is also selected here for the documentation:

import express from "express";
import bodyParser from "body-parser";
import exampleRoutes from "./routes/example-route";
import swaggerUi from "swagger-ui-express";

import * as swaggerDocument from "./swagger.json";

const app = express();

app.use("/api-docs", swaggerUi.serve, swaggerUi.setup(swaggerDocument));

app.use(bodyParser.json());

app.use(exampleRoutes);

app.listen(3000);

Important note: To import JSON files into a Typescript project this must be allowed in tsconfig.json. Also, the JSON file must be located in the root directory.

{
  "compilerOptions": {
    "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
    "module": "commonjs" /* Specify what module code is generated. */,
    "rootDir": "./src" /* Specify the root folder within your source files. */,
    "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
    "resolveJsonModule": true /* Enable importing .json files. */,
    "outDir": "./dist" /* Specify an output folder for all emitted files. */,
    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
    "strict": true /* Enable all strict type-checking options. */,
    "skipLibCheck": true /* Skip type checking all .d.ts files. */
  }
}

The previous Swagger documentation with parameters would thus look like this in swagger.json:

{
  "openapi": "3.0.1",
  "info": {
    "title": "REST API for Swagger Documentation",
    "version": "1.0.0"
  },
  "schemes": ["http"],
  "servers": [{ "url": "http://localhost:3000/" }],
  "paths": {
    "/example": {
      "post": {
        "tags": ["ExampleEndpoints"],
        "summary": "Send a text to the server",
        "description": "Send a message to the server and get a response added to the original text.",
        "requestBody": {
          "required": true,
          "content": {
            "application/json": {
              "schema": {
                "$ref": "#/components/schemas/ExampleSchemaHeader"
              }
            }
          }
        },
        "responses": {
          "201": {
            "description": "Success",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/ExampleSchemaBody"
                }
              }
            }
          },
          "404": { "description": "Not found" },
          "500": { "description": "Internal server error" }
        }
      }
    }
  },
  "components": {
    "schemas": {
      "ExampleSchemaBody": {
        "properties": {
          "responseText": {
            "type": "string",
            "example": "This is some example string! This is an endpoint"
          }
        }
      },
      "ExampleSchemaHeader": {
        "required": ["text"],
        "properties": {
          "text": {
            "type": "string",
            "example": "This is some example string!"
          }
        }
      }
    }
  }
}

Download files

• Github example projcet for swagger params
• Github example project for swagger.json

The post Import Swagger in Node TypeScript Project appeared first on Nerd Corner.