teleren/devto huggingface dataset:
Different ways to connect react frontend and node backend
Tags: webdev, beginners, node, react
Published: 2021-11-21 09:33:08

There are different ways to connect react frontend and NodeJS backend. In this blog, I am going to tell you three ways how you can connect backend and frontend. These are the ways most developers prefer.

## Prerequisites
* React and NodeJS

## Let's get started

### 1. Single server
![Single server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/idd985nerinfgag58dkd.jpg)

The first way is having a single server that serves both Node API and React SPA under the same domain. Here data is still exchanged through JSON. As you can see in the above picture, all the routes which do not start with **/api** will be handled by React SPA.
This is a simple way and you don't need to worry about those [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) errors🥶.
Here's how you can do it-
* Copy `build` folder files from react app and paste them in `public` folder of NodeJS server.
* Now server the static `index.html` which in the `public` folder
```java
app.use(express.static(path.join('public')));
app.use((req,res) => {
   res.sendFile(path.resolve(__dirname, 'public', 'index.html'));
});
```

#### Pros
* Single server.
* No more CORS errors 😅
* Ideal for small applications.

#### Cons
* As both frontend and backend will be handled by the same server, you may face performance issues.

### 2. Two separated servers
![Two separated servers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j4r735kh5mzslxq4l0yf.jpg)
Here we need two separate servers. One server serve static React SPA and another server serve Node API. Data will be exchanged through JSON.

#### Pros
* As we use two different servers for backend and frontend, we get better performance.
* Ideal for bigger applications.

#### Cons
* Have to maintain two different servers.

### 3. Template engines
The third way and the least preferred way is server-side rendering with template engines like [ejs](https://ejs.co/), [handlebars](https://handlebarsjs.com/), [pugjs](https://pugjs.org/) etc... Here we don't create any REST API.
We render different HTML pages for different HTTP requests and use react to pre-render some parts of the page.
This is not the preferred way to connect React and Node because we don't get the power of reactive user experience. 

---

So, what other ways do you know and what is your preferred way? Comment below 👇

---

##⚒️ Tool of the week ⚒️
###[Web Maker](https://webmaker.app)
Web maker is a offline web playground which you can use in your browser. Simply open web maker once and bookmark it.

---

Hope this helps you!
Save for reference.
Connect with me on [Twitter](https://twitter.com/rakesh_at_tweet) and [LinkedIn](https://www.linkedin.com/in/rakesh-potnuru-067a8b1b1/). Follow me for more 😃.
Day 67/100 The Document Object Model
Tags: 100daysofcode, programming, motivation, challenge
Published: 2021-11-21 08:18:30

"Too bad! Same old story! Once you’ve finished building your house you notice you’ve accidentally learned something that you really should have known—before you started."

– Friedrich Nietzsche, Beyond Good and Evil

![tree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cyjqe3pmv0x39r7amej.png)
How to Create Awesome README File For Your GitHub Repository
Tags: github, documentation
Published: 2021-11-21 07:55:24

Hello, devs! If your README file doesn't look good, no one will be interested on your repo. So, how do you create nice READMEs? One way is to learn markdown format and use your creativity to make amazing READMEs, but in my opinion, this is waste of time because markdowns are not used directly in your app, but only for documentation reasons. What is there's a tool that lets you create cool READMEs real quick without you having to learn or know the boring markdown?

Luckily, there's a tool that allows you to do exactly that with a WYSIWYG editor. You just need to click some buttons, drag and drop, and type the content of your README without writing confusing markdown symbols, and that tool is....

###readme.so
![Mohmed Ishak](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ladz78gzpe9w0udtnhph.PNG)

With this tool, you just have to select a component from the section to your left such as installation component or feedback component, and this site will give you boilerplate with markdown template, and you just need to edit the content to your liking. The view on your very right shows how the actual README file will look like once published. When you're happy, just copy the entire code and paste it in your repo's README. 

Yeah, thank you.
Adding Page Progress Bar To SvelteKit
Tags: svelte
Published: 2021-11-21 07:53:33

Adding a progress bar to your SPA or [Transitional Application](https://www.youtube.com/watch?v=860d8usGC0o) can significantly impact the user. For example, a fast-finishing progress bar can signal how fast the page work. The faster experience, [the more likely the user will spend time on your website](https://www.cloudflare.com/en-in/learning/performance/more/website-performance-conversion-rates/). In case your website is slow, it can give a message like *❝it's working but need more time to load❞*. 

> convince your users that something is happening!

Let's see how to add a page progress bar to your sveltekit application. We'll be using [nprogress](https://ricostacruz.com/nprogress/) to do so. 

## Basic Setup

Assuming you have a basic sveltekit project setup using `npm init svelte@next`, let's add a `__layout.svelte` and `about.svelte` routes to the project. 

```html
<!-- src/routes/__layout.svelte -->

<nav>
  <a href="/">Index</a>
  <a href="/about">About</a>
</nav>

<slot />
```

```html
<!-- src/routes/about.svelte -->

<h1>About page</h1>
```

## Installing NProgress

```bash
npm i -D nprogress
```

## Adding Progress Bar

We will use the [$app/stores](https://kit.svelte.dev/docs#modules) module for our progress bar login. Specifically, the `$navigating` store. 

> navigating is a [readable store](https://svelte.dev/tutorial/readable-stores). When navigating starts, its value is { from, to }, where from and to both mirror the page store value. When navigating finishes, its value reverts to null - Official docs.

Update the `__layout.svelte` like so:

```html
<script>
  import NProgress from 'nprogress'
  import {navigating} from '$app/stores'
  
  // NProgress css
  import 'nprogress/nprogress.css'

  NProgress.configure({
		// Full list: https://github.com/rstacruz/nprogress#configuration
		minimum: 0.16,
	})
  
  $: {
    if ($navigating) {
      NProgress.start();
    }
    if (!$navigating) {
      NProgress.done();
    }
  }
</script>

<nav>
  <a href="/">Index</a>
  <a href="/about">About</a>
</nav>

<slot />
```

Notice the `$: { ... }` declaration. It is a [reactive declaration](https://svelte.dev/tutorial/reactive-declarations) is svelte. Every time something in the page changes, the code block runs. 

Before testing out your app, navigate to dev tools and set the page to load from a slow connection. 

![simulate slow network](https://cdn.hashnode.com/res/hashnode/image/upload/v1637475462878/vamvl0QbO.png)

For some reason your throttling is not working, (I used stackblitz and it wasn't working for me), add the following to any of your pages.

```html
<script context="module">
  export async function load() {
    await new Promise(resolve => setTimeout(resolve, 2000));
    return {
      props: {
        
      }
    }
  }
</script>
```

Basically, it creates a 2-second delay in the pages where it is added. Go back to your application and test it out. 

## Demo

{% youtube sq9nlHKpe-E %}
Types of Web API
Tags: javascript, programming, webdev, beginners
Published: 2021-11-21 07:38:06

Hello there, everyone. I'm Kunal, and I prefer to share information with as many people as possible so that everyone can learn alongside me.
I was recently studying about APIs and their various varieties, which I'd like to share with you.

There are four types of APIs:

1. __Public API__:- Public APIs are available to any developers with a low or moderate level of authentication and authorisation. Any public API must be stable. Any modifications to the public API, such as introducing a new parameter, may cause apps that rely on that API to fail.

2. __Private API__:- Private APIs, also known as Internal APIs, are exclusively available to developers within a company or organisation.

Private APIs are used for a variety of purposes, including:

- Data Access Across Departments 
- Establishing An App-Enabled Business
- Enabling Contractors to Construct Features
- Effectively manage the supply chain

3. __Partner API__:- Business partners have access to partner APIs. They are not accessible to the general public and require specific authentication to have access to them.

4. __Composite API__:- Composite API is a design strategy in which numerous API calls are combined into a single API query.

All of this information was obtained via Rapid API. Please check them out and share any thoughts you have in the Comments / Discussions.
Launch Linux machine-EC2
Tags: devops, aws, cloud, linux
Published: 2021-11-21 07:31:31

Launch Linux machine
-------------------------------
Create new EC2  Machine --  
If any key pairs - delete
If any security groups - delete  ( except default )

Observation:
Storage ( 30 gb for windows , 8 gb for linux )
Security Group (  RDP for windows, SSH for Linux )

AMI -  Amazon Linux 2 --->  T2.micro --> No of instance 2 -- tag - MyLinux ---> Change security group Security group name - LinSG , Description - LinSG ( optional ) - Review launch -- Create new keypair -- download key pair --  View Instances


Observation - Two machines created.
Lets change the names to   MyLinux-1, MyLinux-2

Credentials required for windows machines are (  dns,  username and password )


We use putty tool , to connect to linux machine.
And, putty required  ppk file ( Putty private key )
So, we need to convert .pem file to .ppk file.

We use puttygen  to get the ppk file.

Download from google using the  keywords "putty and puttygen"

Under alternate binary files
select putty.exe ( 64 bit )
select puttygen.exe  ( 64 bit )


Open puttygen  --  load  -- Save private key -- Save key without passphrase  ( Yes )  -- Save 

Credentials required for putty -- 
Hostname  -  username@dns       ( We get this from ssh command )

select SSH -- Auth 	-  selecy ppk file using browse option --> Open

username is - ec2-user   ( We get this from ssh command )

---
Now lets connect to 2nd linux machine 

We do not need to conver the pem to ppk, as both the machines have same pem file.

Right click on title bar of putty -- new session -- provide details -- change colors ( for easy identification )


Note: Both machines have different DNS names.
Terminate both the machines

++++++++++++++++++++++
Session terminated abnormaly.
Be Aware of the !-- script Bug
Tags: security, webdev, javascript, html
Published: 2021-11-21 07:21:43

Lets say you have this string in a variable (case insensitive):
```
`etc etc etc<!-- etc etc<scRipT> etc`
```
This will break any html tag after it.

Or lets say you divided that into some variables:
```
const first = `etc etc etc <!--`;
const second = `anything`;
const third = `<script>`
```
This will also break the html page.

Therefore please carefully assign any string that contains 
``` 
`<!--<script>` 
```
or similar into a variable, if it is inside `<script>` tag.


[codepen example](https://codepen.io/Labnan/pen/XWaQNxV)

Edit: The original title is changed

Feel free to ask any question related to this in the comments :)
Notify Tel
Tags: actionshackathon21, python, github
Published: 2021-11-21 07:19:57


### My Workflow

To keep track of all events taking place in a repository, I have built [Notify Tel](https://github.com/Raswanth8/Actions_Bot).
All the events would be sent as notifications to the telegram bot chat for further reference and to bring in a collaborative environment.

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

### Submission Category: 

- Maintainer Must-Haves

### Yaml File or Link to Code

{% github Raswanth8/Actions_Bot %} 

### Additional Resources

[GitHub Repository](https://github.com/Raswanth8/Actions_Bot).

**❤️ from [Raswanth](https://github.com/Raswanth8)**
Amazon Elastic Compute Cloud (Amazon EC2) 
Tags: devops, aws, cloud, ubuntu
Published: 2021-11-21 07:19:42

EC2  --  Elastic  compute cloud

Amazon Elastic Compute Cloud (Amazon EC2) provides scalable computing capacity in the Amazon Web Services (AWS) cloud. Using Amazon EC2 eliminates your need to invest in hardware up front, so you can develop and deploy applications faster. 


Synonyms
Computer, machine, box, PC, Server  = As per AWS terminology - Instance



Ex 1: Launch windows instnace
Step 1: Login to AWS  
Step 2: Choose a region that is near?  ( Asia pacific - Mumbai )
Step 3: Services --  EC2
	( If any keypairs -- delete )
	( If any security groups - delete,  except default )

	Services -- EC2 --- Launch Instance 


	Stage 1  -- Select AMI  ( Note: Select free tier eligible ) Win Server 2012
	Stage 2  --  t2.micro
	Stage 3   --  No of instances  --  1
	Stage 4  --  Storage - 30GB ( Observation - we have root - it is same as C Drive)

	Stage 5  --  Add Tag --  Giving name to the machine 
			Add Name Tag
			Value - MyWindows
	Stage 6  -- Security group  --  ( It deals with ports )
			We have 0 to 65535  ports
			Every port is dedicated to special purpose

			RDP -- 3389
			SSH -- 22
			HTTP -- 80
			HTTPS - 443
			
			For windows machine , we need to open RDP port  ( Remote Desktop Protocol )
			He by default , we have RDP
			
	Stage 7		Just observe the warnings, Just verify the options, Launch


Create a new keypair--  download key pair -- launch instance

We get the instance ID  i-0dddc6c37c9dfb460
			View Instances



Now, the new windows machines ,is having its own DNS Name, Username and password


We need to provide all the above 3 details in our laptop, so that we can connect.

We use an application called Remote Desktop Connection


AWS , gives us  DNS name , username, it does not give the password.
	Instead of password, AWS has given us pem file.
	But, to connect to Window, we need password

	AWS gives an option to convert .pem to password

How to connect .pem to password
---------------------------------
Connect to instance Get password -- upload pem file -- Decrypt  



Open Remote Desktop
Computer - Provide DNS
User name  --  Administrator
password  -- c&$*LjvfdL


Hurray!!
We are connected.


Lets check the hardware configuration
CHeck hard disk
Check Ram
You can copy paste file from laptop to win server  !!

To disconnect, just close the remote desktop window.
Explain about  Stop and reboot and terminate
Bitcoin Technology Fundamentals - Tutorial 4 – Bitcoin Improvement Proposals
Tags: bitcoin, blockchain, cryptocurrency, digitalcurrency
Published: 2021-11-21 07:10:46

Youtube video - https://www.youtube.com/watch?v=5Dpxk5f6BaA


#Bitcoin, #cryptocurrencies, #cryptocurrency, #cryptonews, #cryptotrading, #cryptocurrencies, #cryptoadoption, #bitcointrading, #bitcoinmining, #bitcoins, #bitcoincash, #bitcoinvalue, #Bitcoin,

Bitcoin Technology Fundamentals

In this video series, we will cover Basic to advanced bitcoin technology.

********************************************************************
I am Amitesh Raikwar.
Master of Technology in Electronics & Communication Engineering
Bachelor of Engineer in Electronics & Communication Engineering

I also have Blockchain certification from IBM.

Issued on: 06 JAN 2019 | Issued by: IBM
Verify: https://www.credly.com/go/Ulzl1eEi


********************************************************************
If you wanna support our channel please donate in the below-given link of Paypal / Paytm

________
Paypal
:- https://paypal.me/amiteshraikwar?coun...

Paytm 
:-  Rs. 100/-   - https://paytm.me/d-OGoZn
  Rs. 1001/-  https://paytm.me/MgL-psh
  Rs. 5000/-  https://paytm.me/PR-YL5c
Bitcoin Technology Fundamentals - Tutorial 3 – Bitcoin Mining
Tags: bitcoin, blockchain, cryptocurrency, digitalcurrency
Published: 2021-11-21 07:10:26

Youtube video - https://www.youtube.com/watch?v=WZv7G3j1dN8&t=95s

#Bitcoin, #cryptocurrencies, #cryptocurrency, #cryptonews, #cryptotrading, #cryptocurrencies, #cryptoadoption, #bitcointrading, #bitcoinmining, #bitcoins, #bitcoincash, #bitcoinvalue, #Bitcoin

Bitcoin Technology Fundamentals

In this video series, we will cover Basic to advanced bitcoin technology.

********************************************************************
I am Amitesh Raikwar.
Master of Technology in Electronics & Communication Engineering
Bachelor of Engineer in Electronics & Communication Engineering

I also have Blockchain certification from IBM.

Issued on: 06 JAN 2019 | Issued by: IBM
Verify: https://www.credly.com/go/Ulzl1eEi


********************************************************************
If you wanna support our channel please donate in the below-given link of Paypal / Paytm

________
Paypal
:- https://paypal.me/amiteshraikwar?coun...

Paytm 
:-  Rs. 100/-   - https://paytm.me/d-OGoZn
  Rs. 1001/-  https://paytm.me/MgL-psh
  Rs. 5000/-  https://paytm.me/PR-YL5c
Control CSS using x-state state machines
Tags: react, javascript, css, xstate
Published: 2021-11-21 07:02:40

## Introduction
Do you ever think about adding a CSS condition to control a CSS behavior? 
It will be hard and will include a lot of if statements most of the time.
Here is how you can control your styling through an x-state state machine.

## Coding
First installing
``` npm install xstate @xstate/react ```
Let's build the machine. We'll design three possible states: idle, loading, and success. 
To simulate, I added an automatic transition (this is the after with time in JSON).
Now that we have finished the machine, let's integrate it with the react code.
We will create a new data attribute called data-state.
This data attribute will contain the current state.
We are almost done, let's add CSS behavior.
you need to create CSS selector like this
``` .btn[data-state='loading'] ```
Congratulations we done.
The full code - 
https://stackblitz.com/edit/vitejs-vite-wjcxwo?file=src/App.jsx
please run this line in terminal
``` npm run dev ```

## Conclusion
I like this approach.
I can design the state's behavior using x-state, then control it via CSS selector and assign the relevant attributes.
I think it gives a lot of power and simplicity to your styling ecosystem.
Bitcoin Technology Fundamentals - Tutorial 2 – Bitcoin Network
Tags: bitcoin, blockchain, cryptocurrency, digitalcurrency
Published: 2021-11-21 06:54:37

Youtube video -  https://www.youtube.com/watch?v=TyajsRb9vqQ&t=8s


#Bitcoin, #cryptocurrencies, #cryptocurrency #cryptonews #cryptotrading #cryptocurrencies #cryptoadoption #bitcointrading #bitcoinmining #bitcoins #bitcoincash #bitcoinvalue
Bitcoin Technology Fundamentals

In this video series, we will cover Basic to advanced bitcoin technology.

I am Amitesh Raikwar.
Master of Technology in Electronics & Communication Engineering
Bachelor of Engineer in Electronics & Communication Engineering
I also have Blockchain certification from IBM.
Issued on: 06 JAN 2019 | Issued by: IBM
Verify: https://www.credly.com/go/Ulzl1eEi

If you wanna support our channel please donate in the below-given link of Paypal / Paytm

Paypal
:- https://paypal.me/amiteshraikwar?coun...

Paytm
:- Rs. 100/- - https://paytm.me/d-OGoZn
Rs. 1001/- https://paytm.me/MgL-psh
Rs. 5000/- https://paytm.me/PR-YL5c
Learning Svelte Part # 5
Tags: svelte, javascript, webdev, 100daysofcode
Published: 2021-11-21 06:54:07



## Arrays & Objects

Hello developers and welcome back to this series about how i am learning Svelte.
In today's post i will explain how to update Arrays and Objects, the update happen reactively when we change values.

Let’s try with an example:

First of all, we’re going to declare a new variable called frameworks.

```
<script>
let frameworks = ["Vue", "React","Angular", "Ember"];
</script>
```
And we will loop trough it, in th HTML section:

```
<ul>
{#each frameworks as framework}
  <li>{framework}</li>
{/each}
</ul>
```
Essentially we are creating a new list item for each one out of our Frameworks, the result in our html file:


![Html result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cmls1iq8bsi73l1rytrm.png)

Now to demonstrate the reactivity we are going to add another item to our list, let’s say after a 3 seconds delay.

To do that we need a new function:

![Function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mlermz72ru999rq999p7.png)

We would expect now to have the last item added to our list, but it's not the case, we need another step before accomplishing the result.

Svelte it's not able to catch the change yet, so it's not reflected inside the list.

To make Svelte to pick up the change we only need to write another line of code on our function, that it's going to work because we will use an equal operator that it's re-assigning the value of **frameworks**

The new function: 

![frameworks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2de7v4twalx7t8rmlcna.png)

Now the result is the one expected:
![Adde Svelte](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ngsx20m05ducxf46owy0.png)

Another way to achieve the same result it's using the spread syntax in our variable: 

![spread operator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92ojyqx7fxuzksoc0uof.png)

This is the equivalent to using "push", also we use the equal operator.

For the Objects it's the same but just a little bit easier: 

![Object operator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7q6yztykg0bwxt180dlx.png)
 
This is it for my weekly update, see you next Sunday, until then you can find me on [Twitter](https://twitter.com/giuzioale)
Cryptocurrency dashboard App with Streamlit [Python]
Tags: blockchain, python, tutorial, webdev
Published: 2021-11-21 06:23:48

Streamlit is an open-source Python library that makes it easy to create and share beautiful, custom web apps for machine learning and data science.

This is the 10th time I use Streamlit to create simple yet powerful web apps, but in this special tutorial, you will see how in just a few minutes you can build a cryptocurrency dashboard to present the various crypto values [in this case I retrieved data for the dataframe and charts for : ***Bitcoin, Ethereum, Ripple & Bitcoin-Cash*** ]  in any period of time that you determine in the code.

Streamlit turns data scripts into shareable web apps in minutes; and the best part is that it's all in Python, and it's open source which means all for free. No front‑end experience required. So to create animation sliders, rendering charts/graphs, animating download bars and much more is done without any HTML/CSS/JS , just Python.

To try it out, go ahead to your terminal and type:

$ pip install streamlit
then fire the server for demo apps:
$ streamlit hello

If you want to know who to create and customize this cryptocurrency dashboard application, check out the latest video tutorial on the channel :

{%youtube 5f1SLsvL8us %}

Hope you enjoy it, and I will see in next video posts :)

✨ Streamlit Website: https://streamlit.io

🔗 Social Media
Facebook : https://www.facebook.com/bekbrace​​​​
Twitter : https://twitter.com/BekBrace
Instagram : https://www.instagram.com/bek_brace/
GitHub profile : https://github.com/BekBrace
Website : https://bekbrace.com
Covid cases report via GitHub action
Tags: actionshackathon21, api
Published: 2021-11-21 05:51:35

### My Workflow
This workflow will every day 10:15 get from API covid cases and push this information to discord webhook specified as secret!

### Submission Category: 
Wacky Wildcards


### Yaml File or Link to Code
{% github https://github.com/Shirobachi/covidReporter %}


### Additional Resources / Info
You can pretty easy custom the workflow time when run or even information what it gets. If you want use this API but different information have a look here to learn about endpoints: [https://coronavirus-tracker-api.herokuapp.com](https://coronavirus-tracker-api.herokuapp.com)