teleren/devto huggingface dataset:
Getting Started with Vite.js
Published: 2023-10-13 05:50:22

---
title: Getting Started with Vite.js
published: true
date: 2023-08-13 03:07:22 UTC
tags: 
canonical_url: 
---

Certainly! Here's a basic guide to getting started with Vite.js:

1. **Installation** : To start using Vite, you need to have Node.js and npm (Node Package Manager) installed on your system. If you don't have them installed, you can download and install them from the official Node.js website: [https://nodejs.org/](https://nodejs.org/)

2. **Project Setup** : After the project is initialized, navigate into the project folder using the command:

3. **Installing Dependencies** : Next, you'll need to install the project dependencies using npm:

4. **Development Server** : Vite includes a development server that you can start using the following command:

5. **Creating Components and Code** : Depending on the framework you chose during project initialization, you can start writing your components and code in the appropriate folders. For Vue.js, you'll find the main app file in `src/main.js`.

6. **Viewing Your App** : Open your web browser and navigate to [`http://localhost:3000`](http://localhost:3000). You should see your application running. As you make changes to your code, the development server will automatically update the browser without full page reloads.

Remember that this is just a basic guide to get you started. Vite's official documentation provides more in-depth information on its features, configuration, and advanced usage. You can refer to the official documentation for detailed information and examples: [https://vitejs.dev/](https://vitejs.dev/)
frp로 리버스 프록시 환경 구축하기
Tags: proxy, frp
Published: 2023-08-13 01:53:42

frp란?
ngrok의 오픈소스 버전.

망이 닫혀있거나 포트포워딩을 할 수 없는, 내부망 등의 상황에서 내부 포트를 외부에 흘릴 수 있게 만들어줌.

예를 들어 기숙사에서 내 서버를 열고 싶은데 외부 연결이 차단되어 시도가 힘든 경우 사용할 수 있다.

대신, 이를 중개해줄 서버가 한 대 더 필요함.

중개해줄 서버를 server, 프록시 걸 컴퓨터를 client라고 함.

- server 환경
  - Ubuntu 22.04 LTS
- client 환경
  - Windows 10
# 1. 서버 환경
## FRP 설치
공식 링크에서 직접 다운받거나

```
wget <https://github.com/fatedier/frp/releases/download/v0.43.0/frp_0.43.0_linux_amd64.tar.gz>
```
에서 버전, amd(arm)을 신경써서 변경한다.

## 압축 풀기
```
tar -xf frp_0.43.0_linux_amd64.tar.gz
```
## 세팅
```
sudo cp frps /usr/bin
sudo mkdir /etc/frp
sudo cp frps_full.ini /etc/frp/frps.ini
sudo mkdir /var/frp
```
## 구성 파일 세팅
```
# 클라이언트와의 연결에 사용될 secret key
token=asdh7as5612
bind_addr = 0.0.0.0
# 클라이언트와 통신할 때 사용
bind_port = 7000
```
## 실행하기
```
./frps -c ./frps.ini
```
# 2. 클라이언트 환경
1. 윈도우버전 설치
2. 압축 푼 뒤 frpc.ini 파일 편집
```
[common]
server_addr = # 서버 ip
server_port = 7000
token=1212

[ssh]
type = tcp
local_ip = 127.0.0.1
local_port = 22
remote_port = 6000
```
이후 frpc 파일 실행

```
./frpc -c frpc.ini
```
http, https 연결하려면 도메인 연결이 되어 있어야 함.

# Troubleshooting
## token in login doesn't match token from configuration
분명 서버, 클라이언트 모두 토큰을 같게 맞췄는데 안 맞는다고 한다..!
-c 옵션을 통해 ini 파일을 같이 세팅해주어야 한다.

# 마치며
최소 설정으로 한다면 정말 쉬운 데다가 모난 점 없는 뛰어난 프로그램, frp를 연결해보았다.

# Ref
[Install frp on Ubuntu 18.04 | Morning Star's blog (mls-tech.info)](https://www.mls-tech.info/linux/ubuntu-18-frp-en/)
VSCode SSH로 Compute Engine 연결하기
Tags: gcp, googlecloud
Published: 2023-08-13 01:36:42

직접 ssh 세팅하고, 키 생성하고, 포트 열어주고 하는 일은 매우 귀찮고, 까다로운 일이다.

무슨 문제가 생길지 아무도 모른다는 단점도 있다.

하지만 gcloud에서 지원하는 ssh 진입 과정은 난이도를 상당히 줄여준다.

GCP CLI가 설치되었고, compute engine instance가 생성된 상태라는 가정하에 시작하겠다.

# ssh 키 생성

```
gcloud compute ssh [instance name]
```

과정에서 region을 선택한다.

그럼 해당 인스턴스에 ssh 키가 생성된 것을 확인할 수 있을 것이다.

그리고 Ctrl + Shift + M 키를 눌러서 **open ssh configuration file** 설정을 찾아서 하단의 내용을 참고하여 수정한다.

```
Host my-test-vm-server
HostName 192.131.70.26
	 UseKeychain yes
   AddKeysToAgent yes
   IdentityFile ~/.ssh/google_compute_engine
   User bino
```

여기서 주의할 점은, Windows에서는 UseKeychain을 누락시켜야 한다.

모든 과정이 끝났다.

이제 ssh를 연결해보자.
React Component
Tags: webdev, javascript, programming, react
Published: 2023-08-13 01:10:26


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fp2qpb086hzkc9e570w0.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q1yqw82tdx00xmg5e09j.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1s033nw113xucd2hx39b.png)
A simple React app that stores the click count in local storage
Tags: counter
Published: 2023-08-18 07:49:08

---
title: A simple React app that stores the click count in local storage
published: true
date: 2023-08-13 00:47:00 UTC
tags: Counter
canonical_url: https://reactjsexample.com/a-simple-react-app-that-stores-the-click-count-in-local-storage/
---

# React Counter

## simple react project

### clone

 ![A simple React app that stores the click count in local storage](https://reactjsexample.com/content/images/2023/08/code_2023-11-11-42-30.jpg)

```
git clone https://github.com/asPerReqirements/click-counter.git

cd click-counter

npm i 

npm run start

```

### preview

[![A simple React app that stores the click count in local storage](https://camo.githubusercontent.com/bb4da430a0b97c903e581b954e6cc8a262b78329397b961f63430350a5613cf2/68747470733a2f2f696d6775722e636f6d2f505055535067762e706e67)](https://camo.githubusercontent.com/bb4da430a0b97c903e581b954e6cc8a262b78329397b961f63430350a5613cf2/68747470733a2f2f696d6775722e636f6d2f505055535067762e706e67)

### contributions are open

- UI update
- Logic update
- add new feature
- etc.

## Thanks to all the contributors ❤️

[![A simple React app that stores the click count in local storage](https://camo.githubusercontent.com/d18f364f65aaac4874c723c408aa200e1c3582d4959e0f0afed4440612c086b5/68747470733a2f2f636f6e747269622e726f636b732f696d6167653f7265706f3d61735065725265716972656d656e74732f636c69636b2d636f756e746572)](https://github.com/asPerReqirements/click-counter/graphs/contributors)

## GitHub

[View Github](https://github.com/asPerReqirements/click-counter?ref=reactjsexample.com)
Study timer written in React
Tags: timer
Published: 2023-08-18 07:48:56

---
title: Study timer written in React
published: true
date: 2023-08-13 00:55:00 UTC
tags: Timer
canonical_url: https://reactjsexample.com/study-timer-written-in-react/
---

# Temporizador de estudos
 ![Study timer written in React](https://reactjsexample.com/content/images/2023/08/code_2023-11-11-49-32.jpg)

-Timer Alura studies. -Projeto realizado com React.

![Study timer written in React](https://github.com/karolcossatis/Temporizador_de_estudos/raw/new_branch/alura_studies_print1.png)

![Study timer written in React](https://github.com/karolcossatis/Temporizador_de_estudos/raw/new_branch/alura_studies_print2.png)

![Study timer written in React](https://github.com/karolcossatis/Temporizador_de_estudos/raw/new_branch/alura_studies_print3.png)

- **Curso Fullstack Allura -Oferecido pelo Programa Desenvolve- Grupo Boticario**

## GitHub

[View Github](https://github.com/karolcossatis/Temporizador_de_estudos?ref=reactjsexample.com)
Mocha/Chai with TypeScript (2023 update)
Tags: typescript, tutorial, javascript, webdev
Published: 2023-08-13 00:47:05

I wrote an article in 2020 for using Mocha/Chai in a TypeScript project, that I'm using in [tsParticles](https://github.com/matteobruni/tsparticles) (leave a star if you want 🌟, it's free 👀).

{% github matteobruni/tsparticles %}

Since then, I've made some changes to my codebase that could be helpful to someone.

## New requirements

Previous packages were these:

```
npm install chai mocha ts-node @types/chai @types/mocha --save-dev
```

But now I recommend to install these instead

```
npm install chai mocha ts-node cross-env @types/chai @types/mocha --save-dev
```

If you can't spot the difference, I added `cross-env` to the dependencies.

The `test` command changed too, using `cross-env` instead of the `env` command, which works in all environments correctly.

The old command was:

```
"test": "env TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\" }' mocha -r ts-node/register 'tests/**/*.ts'"
```

the new one is:

```
"test": "cross-env TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\" }' mocha -r ts-node/register 'tests/**/*.ts'"
```

or you can create a custom tsconfig for your tests using this command instead

```
"test": "env TS_NODE_PROJECT='./tsconfig.test.json' mocha -r ts-node/register 'tests/**/*.ts'"
```

and for a shorter command you can create a `.mocharc.json` file like this

```json
{
  "extension": [
    "ts"
  ],
  "spec": "tests/**/*.ts",
  "require": [
    "jsdom-global/register",
    "ts-node/register",
    "source-map-support/register"
  ],
  "recursive": true
}
```

and the command

```
"test": "cross-env TS_NODE_PROJECT='./tsconfig.test.json' mocha"
```

## Coverage

Since then I started using the package `nyc` which is useful for seeing how much code is covered by tests.

It's really easy to use, and it's not interfere with `mocha` or `chai`.

Just install it like this:

```
npm install nyc --save-dev
```

You can start using `nyc` just putting `nyc` in front of `mocha`. Like this:

```
"test": "cross-env TS_NODE_PROJECT='./tsconfig.test.json' nyc mocha"
```

Now when you run the tests, you will see a table containing every file called by tests, with uncovered lines and percentages.

{% link https://dev.to/matteobruni/mocha-chai-with-typescript-37f %}

Happy TypeScript testing to everyone.

---

If you want to support me, here's my [GitHub sponsor profile](https://github.com/sponsors/matteobruni)
Todo App Built With React and Redux
Tags: todo, redux
Published: 2023-08-18 07:49:30

---
title: Todo App Built With React and Redux
published: true
date: 2023-08-13 00:46:00 UTC
tags: Todo,Redux
canonical_url: https://reactjsexample.com/todo-app-built-with-react-and-redux/
---

# Todo App
 ![Todo App Built With React and Redux](https://reactjsexample.com/content/images/2023/08/code_2023-11-11-41-00.jpg)

[Live Project](https://todo.furkanozbek.com/)

![Todo App Built With React and Redux](https://github.com/LouisRobinson0714/Todo-App/raw/main/assets/todoapp-a11y.gif)

![Todo App Built With React and Redux](https://github.com/LouisRobinson0714/Todo-App/raw/main/assets/todoapp.gif)

## Installing

> run `yarn install` or `yarn start`

## Deployment

You can easily deploy the project over [Netlify](https://www.netlify.com/) or `github-pages`. Check out the documentation

## Built With

- [React](https://tr.reactjs.org/) – UI library for js
- [React Hooks](https://reactjs.org/docs/hooks-intro.html)
- [Redux](https://redux.js.org/) – State Management
- **Redux Persistent** – Save the application state locally or remotely
- Accessibility Features, ARIA – User Experience improved
- [Sass](https://sass-lang.com/) – Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

## Contributing

- If you have problems please leave an `issue` from [here](https://github.com/afozbek/react-todo-app/issues)
- Consider forking the project and submitting new `pull requests`. I am much likely control [my github account](https://github.com/afozbek).

## License

This project is licensed under the MIT License – see the [LICENSE](https://github.com/LouisRobinson0714/Todo-App/blob/main/LICENSE) file for details

## GitHub

[View Github](https://github.com/LouisRobinson0714/Todo-App?ref=reactjsexample.com)
NSIS Uninstaller Custom Components with /COMPONENTSONLYONCUSTOM
Tags: installation, nsis, uninstallation, custom
Published: 2023-08-13 00:02:50

NSIS (Nullsoft Scriptable Install System) is a powerful tool for creating installers for software applications. It allows developers to customize the installation process and provide users with a seamless experience. One of the features that NSIS offers is the ability to create custom components and uninstall them using the /COMPONENTSONLYONCUSTOM flag.

When developing software, it is common to have different components that can be installed or uninstalled separately. NSIS provides a flexible way to handle this scenario by allowing developers to define custom components. These components can be installed or uninstalled based on the user's selection.

The /COMPONENTSONLYONCUSTOM flag is used in conjunction with the SectionIn and SectionGetFlags commands to control the installation and uninstallation of custom components. When this flag is set, NSIS will only install or uninstall components that have been explicitly selected by the user.

Let's say you are developing a software application that has multiple optional features. You can create custom components for each feature and allow the user to choose which features they want to install. With the /COMPONENTSONLYONCUSTOM flag, NSIS will only install the selected features and skip the rest.

Using NSIS with the /COMPONENTSONLYONCUSTOM flag is not only practical but also fun! You can add some funny phrases to your installer script to entertain your users during the installation process. For example:

`Section "Feature 1" SEC01 MessageBox MB\_OK "Installing Feature 1... Hold on tight!" SectionIn SEC01 SectionEnd Section "Feature 2" SEC02 MessageBox MB\_OK "Installing Feature 2... Buckle up!" SectionIn SEC02 SectionEnd Section "Feature 3" SEC03 MessageBox MB_OK "Installing Feature 3... Enjoy the ride!" SectionIn SEC03 SectionEnd`

With the above script, when the user selects Feature 1, they will see the message "Installing Feature 1... Hold on tight!" during the installation process. Similarly, for Feature 2 and Feature 3, they will see the corresponding funny messages. It adds a touch of humor to the otherwise mundane installation process.

In conclusion, NSIS provides a convenient way to create custom components and uninstall them using the /COMPONENTSONLYONCUSTOM flag. This feature allows developers to give users more control over the installation process and create a personalized experience. So go ahead, have fun with NSIS and make your installers more entertaining!

References:
-----------

*   [NSIS Documentation - SectionIn Command](https://nsis.sourceforge.io/Docs/Chapter4.html#4.9.3.1)
*   [NSIS Documentation - SectionGetFlags Command](https://nsis.sourceforge.io/Docs/Chapter4.html#4.9.3.3)
How to use ABI in JavaScript(ether.js)?
Tags: javascript
Published: 2023-08-12 23:45:45

Hello everyone, today i'm explaining what ABI is.
Abi is a especification that define how smart contract data can be accessed by an external application.

The abi responsible for ensuring that communication between smart contract and applications is consistent and understandble, regardless of the programming languages used to create the application or contracts. Basicly ABI is a api lol joke , right now let's talk less and code more lol.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xuu3h4g3afqvm0i5qzjo.png)
How to delete ENI's
Tags: vpc, vpcendpoint, proxy
Published: 2023-08-12 23:42:59

An ***elastic network interface*** is a logical networking component in a VPC that represents a virtual network card.

Certain times, you might come across issues when trying to manually detach the Network Interfaces. Some of the errors are

***`eni-xxxxxxx: You do not have permission to access the specified resource.`***

***`“Error detaching network interface. eni-xxxxxxxx: You are not allowed to manage ‘ela-attach’ attachments.”`***

***`Network interface ‘eni-xxxxxxxx’ is currently in use.”`***


Please visit my **[GitHub Repository for VPC articles](https://github.com/awsmine/VPC_projects)** on various topics being updated on constant basis.


_**Let’s get started!**_


# Objectives:

**1.** Detach Network Interfaces

**2.** Delete Network Interfaces

**3.** Find out and review the Description to find which resource the elastic network interface is attached to

**4.** Delete the described service


# Pre-requisites:
- AWS user account with admin access, not a root account.



# Resources Used:
[Elastic network interfaces](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/using-eni.html)

# Steps for implementation to this project:

### 1. Detach Network Interfaces

- not able to detach


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rih577vw4js4ok0irpp4.png)

### 2. Delete Network Interfaces
- not able to delete

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zp0rig2h1jt0wwr5bz1d.png)

### 3. Find out and review the Description to which resource the elastic network interface is attached to

- Navigate to Network Interfaces in the EC2 console.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z6pd46stsnehipb6r4si.png)

- Select the ENI and open the Details tab.
- Review the Description to find which resource the elastic network interface is attached to.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/za7wmej1b7lbwj67s3xb.png)

### 4. Delete the described service

- delete the described service if not being used. (ENI will automatically be deleted if the service is deleted).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/enjw5cvrvt62jatr6oit.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/svlx0thmkpsbu7vrik2i.png)

- Status - Deleting


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/25w2ecft8xs9uqk5ghre.png)

- Wait for 4-5 min

- All got deleted

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65716ktbyj6ollznvhbz.png)



### 5. What we have done so far

- We successfully deleted all the un-used ENI's.
How to use ABI in JavaScript(ether.js)?
Tags: javascript
Published: 2023-08-12 23:27:59

Hello everyone, today i'm explaining what ABI is.
Abi is a especification that define how smart contract data can be accessed by an external application.

The abi responsible for ensuring that communication between smart contract and applications is consistent and understandble, regardless of the programming languages used to create the application or contracts. Basicly ABI is a api ksksksk joke , right now let's talk less and code more ksksk.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bqo76wk1kzd4qz8slxp0.png)
React Next JS dynamic css for grid-template and grid-area
Tags: css, react, nextjs, tailwindcss
Published: 2023-08-12 23:02:52

React Next JS is a popular framework for building dynamic and responsive web applications. One of the key features of Next JS is its ability to handle dynamic CSS, allowing developers to create flexible and customizable layouts. In this article, we will explore how to use dynamic CSS with grid-template and grid-area in React Next JS.

The CSS Grid Layout module is a powerful tool for creating grid-based layouts in CSS. It provides a flexible and intuitive way to arrange elements on a web page. With React Next JS, we can take advantage of the dynamic nature of the framework to create grid layouts that adapt to different screen sizes and content.

Let's start by creating a basic grid layout using CSS Grid. We can define the grid template using the `grid-template` property. For example:

`.container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }`

This will create a grid with two columns and two rows. Each cell in the grid will take up an equal amount of space. We can then use the `grid-area` property to assign specific elements to specific areas of the grid. For example:

`.item { grid-area: 1 / 1 / 2 / 2; }`

This will place the element with the class "item" in the first cell of the grid.

Now, let's see how we can make this grid layout dynamic using React Next JS. One way to achieve this is by using CSS-in-JS libraries such as styled-components or emotion. These libraries allow us to write CSS directly in our JavaScript code, making it easier to create dynamic styles.

First, we need to install the CSS-in-JS library of our choice. For example, to install styled-components, we can run the following command:

`npm install styled-components`

Once we have installed the library, we can import it in our React component and use it to define our dynamic styles. For example:

``import styled from 'styled-components'; const Container = styled.div` display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; `; const Item = styled.div` grid-area: 1 / 1 / 2 / 2; `;``

In this example, we are using the styled-components library to define the styles for our container and item components. We can then use these components in our JSX code, just like any other React component.

By using dynamic CSS with grid-template and grid-area, we can create flexible and responsive grid layouts in React Next JS. The ability to define and manipulate styles directly in our JavaScript code gives us greater control and flexibility over our layouts.

References:

*   [Next JS Official Website](https://nextjs.org/)
*   [CSS Grid Layout - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)
*   [Styled Components](https://styled-components.com/)
Data Structures and Algorithms (DSA)
Tags: dsa, datastructures, typescript
Published: 2023-08-12 22:56:01

Data Structures and Algorithms (DSA) form the backbone of computer science and software development. They provide efficient ways to store and manipulate data, as well as strategies to solve complex problems. In this article, we'll explore some commonly used data structures, 

**Arrays**
Arrays are one of the simplest and most fundamental data structures. They store a collection of elements, which can be of any data type. In TypeScript, arrays can be defined using square brackets [] and can hold elements of mixed types.

**Linked Lists**
Linked lists are linear data structures composed of nodes, where each node stores a value and a reference to the next node. Linked lists can be singly linked (each node points to the next node) or doubly linked (each node points to both the next and previous nodes).

**Stacks**
Stacks are linear data structures that follow the Last-In-First-Out (LIFO) principle. Elements are added and removed from the top of the stack. Think of it like a stack of plates - you can only add or remove plates from the top.

**Queues**
Queues are linear data structures that follow the First-In-First-Out (FIFO) principle. Elements are added to the rear of the queue and removed from the front. Imagine a queue of people waiting in line - the person at the front gets served first.

**Conclusion**
Understanding data structures and algorithms is essential for writing efficient and optimized code. In this article, we've explored some fundamental data structures - arrays, linked lists, stacks, and queues. By grasping these concepts and practicing their implementation, you'll be better equipped to solve complex programming challenges and build robust applications. Happy coding!
Run Apache-AGE and age-viewer using Docker
Published: 2023-08-12 22:16:01

To run Apache-AGE and age-viewer using Docker, you have to follow these  steps:

** Docker** you need to install Docker on your system. You can download and install Docker from the official website.
Clone the following Github Repo
`https://github.com/apache/age.git`
Go to the directory and run the following command
`git submodule update --init --recursive`
Replace the age-viewer/Dockerfile with following code
`FROM node:14-alpine3.16
RUN npm install pm2
WORKDIR /src
COPY . .
RUN npm run setup
EXPOSE 3000`

Run `docker compose up`


Fill the form as below :
**Connect URL : age
Connect Port : 5432
Database Name : postgresDB
User Name : postgresUser
Password : postgresPW
**