Posts

Showing posts from May, 2024

week 7.1 routeing, lazy component, prop drilling, contextAPI

//create a react project 1. npm install 2. npm install react-router-dom  //for using react routing //create page OR component folder inside create 2page landing.jsx and dashboard.jsx ----------------------------------------------------------- //then we use navigation to use client side route / first import usenavigation import { BrowserRouter, Routes, Route, useNavigate } from 'react-router-dom'; // definre up from the syntx you write const navigate = useNavigate(); then syntax**   <button onClick={() => {           navigate("/");         }}>Landing</button> -------------------------------------------------------------- +++++++++++++++++++++++++++++ now we will do only client side routing do not hard refresh like before we did //then we use navigation to use client side route / first import usenavigation import { BrowserRouter, Routes, Route, useNavigate } from 'react-router-dom'; // definre up from the syntx you...

week12.1 aws frontend deploing, serve

https://projects.100xdevs.com/tracks/w5E6PT2t0IyOFM3bZxcM/aws-fe-1  1. when you devloping your project to run you react project  // npm run dev    1. after development project you need to buil you code react into simple html use this command // npm run build 1.then serve you code to run your code // npm install -g serve 1. then go to dist folder and run the command // serve

week 11.3 aws, certificate, pm2

use thsi  file https://projects.100xdevs.com/tracks/g0AcDSPl74nk45ZZjRdU/aws-1    download nginx to perform revers proxy //sudo apt update //sudo apt install nginx this should start a nginx start on port 80   create reverse proxy //sudo rm /etc/nginx/nginx.conf //sudo vi /etc/nginx/nginx.conf events {     # Event directives... } http {     server {     listen 80;     server_name be1.100xdevs.com;     location / {         proxy_pass http://localhost:8080;         proxy_http_version 1.1;         proxy_set_header Upgrade $http_upgrade;         proxy_set_header Connection 'upgrade';         proxy_set_header Host $host;         proxy_cache_bypass $http_upgrade;     }  ...

week 11.2 aws | nginx

https://projects.100xdevs.com/tracks/g0AcDSPl74nk45ZZjRdU/aws-7 first transfer permition of this fle chmod 700 fileName.pem get access of your instances ssh -i fileName.pem ubuntu@publicIP clone your code in aws machine git clone https://github.com/luciferdk/auth0backend.git for then when our connection lost or server stuck on our terminal sudo vi /etc/resolve .conf  and write nameserver 8.8.8.8 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash   //reverse proxy sudo apt update sudo apt install nginx   sudo rm /etc/nginx/nginx.cong sudo vi /etc/nginx/nginx.cong   //write this code and modified server_name and localhost events { # Event directives... } http { server { listen 80; server_name be1.100xdevs.com; location / { proxy_pass http://localhost:8080; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $ho...

week 11.1 serverles function, prisma, hono

1. Initializing a worker //To create and deploy you application, you cna take the following steps npm create cloudflare -- my-aap 2. to signup page of cloudflare npx wrangler login  3. to deploy you code npm run dev          =============== hono application ======= 1. initialize a new app npm create hono@latest my-app 1. move to my-app and install the dependencies. cd my-app npm i this is syntax of sending data in body, header, parems and bunch of things# import { Hono } from 'hono' const app = new Hono() app.get('/', async (c) => {   //body, headers, query parameters, middlewares, connecting to a database   const body = await c.req.json()   console.log(body);   console.log(c.req.header("Authorization"));   console.log(c.req.query("param"));   return c.text('Hello Hono!') }) export default app        //middleware import { Hono , Next } from 'hono' import { Context } from 'hono/jsx' ; const a...