Web App for Pentesters

Setting everything up

Install Node and npm using nvm

# Install nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# Install node and npm
nvm install 20.10.0

# Set the default version of node
nvm alias default 20.10.0

The web-application

In Documents, I created a directory called web-application. The directory structure is as follows (only the interesting stuff):

web-application
├── client
│   └── src
│       ├── App.css
│       └── App.tsx
└── server
    ├── server.ts
    └── tsconfig.json

The React application

Create the app

Run this command in the Documents folder:

npx create-react-app client --template typescript
npm install axios cors

Run the app

cd client
npm start

Add ✨bling🌟 to it (TailWind CSS)

npm install tailwindcss
npx tailwindcss init

Next, add the following to tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

In src/index.css, add the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

Build! npm run build

Make images work

In the src/ directory, create a folder called types, and add a file called declarations.d.ts with the following content:

declare module "*.png" {
    const value: any;
    return value;
}

declare module "*.svg" {
    const content: any;
    export default content;
}

declare module "*.gif" {
    const src: any;
    return src;
}

The Node server

cd into the web-application directory and run the following commands:

mkdir server
cd server
npm init -y
npm install express
node server.ts

To make it easier in the development process, I installed ts-node and nodemon globally:

npm install -g ts-node nodemon

Now, to run the app, I can simply run nodemon server.ts. This will automatically restart the server when I make changes to the code. It also lets me restart the server by pressing rs and exit by pressing Ctrl + C.

Setting up git

git config --global user.name "Tudor Radoni" 
git config --global user.email "tudor.radoni@gmail.com"
git config --global code.editor vim                     
git config --global init.defaultBranch main

To check if everything is set up correctly, run git config --list.

$ git config --list
user.name=Tudor Radoni
user.email=tudor.radoni@gmail.com
code.editor=vim
init.defaultbranch=main

Setting up the repository

I added a .gitignore file, which contains the following templates:

• Node
• default template for React (automatically added by create-react-app)

git init
git add .
git commit -m "Initial commit"