Forem: briankarlsayen

Create an NodeJs Server in Typescript

briankarlsayen — Fri, 25 Aug 2023 06:38:27 +0000

If you're a beginner on typescript or some veteran who tends to forget how to setup a typescript server the you've come to the right place.

Here are the steps to create a typescript server up and running:

Make a folder then, initialize the node project

npm init -y

Install dependencies, in this case I'm installing expressjs as my web app framework but feel free to use others like fastify

npm i express cors dotenv
npm i -D typescript @types/node @types/express concurrently

Initialize tsconfig

npx tsc --init

Edit tsconfig.json

"outDir": "./dist"

Edit package.json scripts

"scripts": {
"build": "npm install typescript && npx tsc",
"start": "node dist/index.js",
"dev": "concurrently \"npx tsc --watch\" \"nodemon -q dist/index.js\""
}

Create a file named index.ts, this will server as the root file for your server. Paste this inside index.ts.

import express, { Express } from 'express';
import dotenv from 'dotenv';
import cors from 'cors';
import http from 'http';
dotenv.config();

const app: Express = express();
const port = process.env.PORT ?? 5905;
app.use(cors());
const server = http.createServer(app);

server.listen(port, () => {
  console.log(`⚡️[server]: Server is running at http://localhost:${port}`);
});

Run build

npm run build

Finally run the server

npm run dev

Add Localstorage to Reduxtoolkit

briankarlsayen — Wed, 03 Aug 2022 13:52:49 +0000

Are you annoyed that your saved data disappear whenever you refresh the page? There are many ways of saving your data, such as saving it in the localstorage, session storage, or in a database. This tutorial is how you can store reduxtoolkit data in your localstorage.

I presumed in reading this that you already have a working app that uses reduxtoolkit and searching on ways to store the data, so I won't explain details on the installation of reduxtoolkit and such.

Introduction

What is a Local Storage?

A place where you can store your browser data. The stored data is a key-value pair which can persist even after reload or browser is closed.
You can access your storage data in google chrome by using inpect tool, then go to the application tab. There you can see the stored data in your localstorage.

What is ReduxToolKit?

Redux in simple terms is a package which has the ability to store the state of variables globally. Reduxtoolkit is a package is intended to be the standard way to write Redux logic. It solves the problems with redux such as the: Complicated redux store, Multiple broiler plates, and lots of packages needed to work.

How to save my redux state in the localstorage?

Lucky for us there is a package called Redux Persist which is used to store data in the local storage.

To install it type the following in your console:

npm i redux-persist

or in yarn:

yarn add redux-persist

Configure your Store.js like this:

import { configureStore } from '@reduxjs/toolkit'
import fetchPokemons from './reducers/pokemonSlice'
import pokemonTeam from './reducers/pokemonTeamSlice'
import storage from 'redux-persist/lib/storage'
import {combineReducers} from "redux"; 
import { persistReducer } from 'redux-persist'

const reducers = combineReducers({
  fetchPokemons,
  pokemonTeam     
 });

 const persistConfig = {
  key: 'root',
  storage
};

const persistedReducer = persistReducer(persistConfig, reducers)

const Store = configureStore({
  reducer: persistedReducer
})

export default Store

Then configure your index.js like this:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {Provider} from 'react-redux';
import Store from './Store';
import {BrowserRouter} from 'react-router-dom';
import { PersistGate } from 'redux-persist/integration/react'
import { persistStore } from 'redux-persist'
let persistor = persistStore(Store);

ReactDOM.render(
  < React.StrictMode>
    < BrowserRouter>
      < Provider store={Store}>
        < PersistGate loading={null} persistor={persistor}>
          < App />
        < /PersistGate>
      < /Provider>
    < /BrowserRouter>
  < /React.StrictMode>,
  document.getElementById('root')
);

After that is done you will now see that the redux state will be saved in your localstorage

For more information you can you can read docs of the Reduxtoolkit.

Login Authentication

briankarlsayen — Wed, 03 Aug 2022 13:52:47 +0000

//disclaimer, introduction
//overview of the project
//explain each the techs
//show code
This project is a beginner's overview on how to create a login
authentication.

Overview

Login authentication is how the web keeps track on users preference by storing individual the data in a server.
This project is done by using JWT, express.js, and bcrypt.

What is JWT?

JWT, or JSON Web Token, is an open standard used to share security information between two parties — a client and a server. Each JWT contains encoded JSON objects, including a set of claims. JWTs are signed using a cryptographic algorithm to ensure that the claims cannot be altered after the token is issued. In other words JWT connects the server and the user.

What is crypt?

A library to help you hash passwords. It's slowness and multiple rounds ensures that an attacker must deploy massive funds and hardware to be able to crack your passwords.

What is NodeJs?

Is an open-source, cross-platform runtime environment that allows developers to create all kinds of server-side tools and applications in JavaScript.

What is ExpressJs?

Is the most popular Node web framework, and is the underlying library for a number of other popular Node web frameworks. It is used for designing web apps, apps that run on web browser, easily and quickly.

Login / Register authentication

briankarlsayen — Wed, 03 Aug 2022 13:52:45 +0000

Overview

This is a simple login authentication for backend. You need to basic understanding on how to use Express.js, Mongoose, and Node.js. I assumed that you already have an app that is connected to MongoDB so I won't explain on that and just focus on the login and register part.

You need to install the following libraries:

yarn add express jsonwebtoken bcrypt

Technologies

In high level explanation:

express.js - backend web application framework for Node.js
jsonwebtoken - standard way of transmitting information between parties as a JSON object.
bcrypt - is a password-hashing function.

The code

Register

Let's say we are registering a google account. There are rules that we need to follow, those rules should be met in order to successfully create and account. Here we call them error handling.

Let's check if the request is in proper type and length:

const {username, password, email} = req.body;
  if (!username || typeof username !== "string"){
    return res.json({status: 'error', error: 'Invalid username'})
  }
  if (!password || typeof password !== "string"){
    return res.json({status: 'error', error: 'Invalid password'})
  }
  if (password.length < 6){
    return res.json({status: 'error', error: 'Password too short. Should atleast be 6 characters'})
  }
  if (!email || typeof password !== "string"){
    return res.json({status: 'error', error: 'Invalid Email'})
  }

Then check if it is unique:
User is the name of the mongoDB model.

const newUser = await User.findOne({username}).lean()
const newMail = await User.findOne({email}).lean()
if(newUser){
    return res.status(500).json({status: 'error', error: 'Username is already inuse'})
  }
  if(newMail){
    return res.status(500).json({status: 'error', error: 'Email is already inuse'})
  }

After that we hash the password to be unreadable in the database:

const user = new User({
    username: username,
    password: await bcrypt.hash(password, 10),
    email: email
  })

Then try to save the account in the database:

try {
    const saveUser = await user.save()
    res.status(200).json({status:'ok', message: 'Account succesfully made'})
  }
  catch(err){
    return res.status(400).json({msg: err.message})
  }

When you've register an account you will notice that the password is different from what you've typed.

Login

You need first to create a secret token, it is like your housekey, use to prevent others from accessing your important things while making you able to access it.

JWT_SECRET = I'm am the key~~@-@~~E.

Hashing is a one-way operation which means the server cannot decrypt the password. What you can do is to compare the hashed typed(password) and server password(user.password) to verify.

bcrypt.compare(password, user.password)

jwt.sign is used to create a token that usually is stored in the localstorage to access the data.

const token = jwt.sign({ id: user._id, username: user.username}, JWT_SECRET)

Login Fullcode

const {username, password} = req.body;
JWT_SECRET = I'm am the key~~@-@~~E.

  // check username, password, email exist
  if (!username || typeof username !== "string"){
    return res.json({status: 'error', error: 'Invalid username'})
  }
  if (!password || typeof password !== "string"){
    return res.json({status: 'error', error: 'Invalid password'})
  }
  if (password.length < 6){
    return res.json({status: 'error', error: 'Password too short. Should atleast be 6 characters'})
  }

  try {
    const user = await User.findOne({username}).lean()  
    if(!user){
      return res.status(500).json({status: 'error', error: 'Invalid username or password'})
    }
    if(await bcrypt.compare(password, user.password)){
      const token = jwt.sign({ id: user._id, username: user.username}, JWT_SECRET)
      return res.status(200).header('auth-token', token).send({token, status: 'ok'})
    }
    return res.status(500).json({status: 'error', error: 'Invalid username or password'})
  }
  catch(err){
    return res.status(500).json({msg: err.message})
  }

Register Fullcode

const {username, password, email} = req.body;
  if (!username || typeof username !== "string"){
    return res.json({status: 'error', error: 'Invalid username'})
  }
  if (!password || typeof password !== "string"){
    return res.json({status: 'error', error: 'Invalid password'})
  }
  if (password.length < 6){
    return res.json({status: 'error', error: 'Password too short. Should atleast be 6 characters'})
  }
  if (!email || typeof password !== "string"){
    return res.json({status: 'error', error: 'Invalid Email'})
  }
  const newUser = await User.findOne({username}).lean()
  const newMail = await User.findOne({email}).lean()
  if(newUser){
    return res.status(500).json({status: 'error', error: 'Username is already inuse'})
  }
  if(newMail){
    return res.status(500).json({status: 'error', error: 'Email is already inuse'})
  }
  const user = new User({
    username: username,
    password: await bcrypt.hash(password, 10),
    email: email
  })
  try {
    const saveUser = await user.save();
    //res.send({user: user._id})
    res.status(200).json({status:'ok', message: 'Account succesfully made'})
  }
  catch(err){
    return res.status(400).json({msg: err.message})
  }

Node v17.0.1 bug

briankarlsayen — Wed, 03 Aug 2022 13:52:44 +0000

Error encountered when running yarn start, npm start.

Probably caused by issue with webpack digital envelope routines::unsupported.

A quick fix is configuring package.json script.

"start": "react-scripts --openssl-legacy-provider start"

SonarQube windows setup

briankarlsayen — Wed, 03 Aug 2022 13:52:42 +0000

Download sonarcube and sonar-scanner.
Extract both zip files to to C:\
At C:\sonar-scanner\conf\sonar-scanner.properties paste this:

#Configure here general information about the environment, such as SonarQube server connection details for example
#No information about specific project should appear here

#----- Default SonarQube server
sonar.host.url=http://localhost:9000

#----- Default source code encoding
sonar.sourceEncoding=UTF-8

Add window environment variables ControlPanel > SystemAndSecurity > System > AdvanceSystemSettings > Environment > EnvironmentVariables add new path:

C:\sonar-scanner\bin

Create a sonarqube project

In your browser go to:

http://localhost:9000/

Create a project, then save the generated token and the generated command. We will need the command to run the project later.

On your code, create file called sonar-project.properties, paste this:

# must be unique in a given SonarQube instance
sonar.projectKey=my:project

# --- optional properties ---

# defaults to project key
# sonar.projectName=My project
# defaults to 'not provided'
#sonar.projectVersion=1.0

# Path is relative to the sonar-project.properties file. Defaults to .
sonar.sources=.

# Encoding of the source code. Default is default system encoding
#sonar.sourceEncoding=UTF-8

Change projectKey same with the name of created sonarqube project.

Run the sonarqube

Run C:\sonarqube\bin\windows-x86-64\StartSonar.bat

Paste the saved generated command inside your project to run the sonarqube.

Go back to http://localhost:9000
Now you can see the vulnerabilities and given suggestion by sonarqube.

ReactJS + ViteJS

briankarlsayen — Wed, 03 Aug 2022 13:52:41 +0000

What is ViteJS?

In simple terms, it is a web builder that focuses on speed

Compared to the traditional way of using create-react-app that uses webpack, this has much faster build time

How to Install?

npm create @vitejs/app

it will prompt you on the settings that you want, or if you want to use default settings, use this:

npm init vite@latest [app name] -- --template react

cd [app name], then install the dependecies:

npm install

time to run the project by typing:

npm run dev