ngrok tunnel

./ngrok http -host-header=rewrite local.reeyysy.cc:80

Use config file to run multi tunnels

• find config file location.

  ./ngrok authtoken 23siywfFYojsSVe8ojvO0yTEgf4_7dsx9xsdsfffdwww

• set up config file
• start tunnels

  ./ngrok start --all

Sample config file

bind_tls means https only to save endpoints

authtoken: 23siywfFYojsSVe8ojvO0yTEgf4_7dcnsnsdfskflfl
tunnels:
  webpack:
    proto: http
    addr: 8090
    host_header: rewrite
    domain: webpack.myseieie.ninja
    bind_tls: true
  cartSite:
    proto: http
    addr: 80
    domain: localhost
    host_header: rewrite
    bind_tls: true

React Context

React Context Docs

How to work

• Create a context
• Create a context provider component. Add values in the provider
• Wrap components with the provider component
• For these wrapped components, can use useContext to access values

Create Context Sample Code

export const placeContext = createContext();

//create a function component PlaceContextProvider
const PlaceContextProvider = ({ children }) => {
  const [places, dispatch] = useReducer(placeReducer, []);
  return (
    <placeContext.Provider value={{ places, dispatch }}>
      {children}
    </placeContext.Provider>
  );
};

export default PlaceContextProvider;

Main parts to create a context

1. call createContext()// const placeContext = createContext();
2. Create a context provider component. Set values property when create this component.
3. export the above context provider

Use context provider

import PlaceContextProvider from "./contexts/place";

function App() {
  return (
    <div className="App">
      <PlaceContextProvider>
        <Nav />
        <PlaceList />

        <PlaceForm />
      </PlaceContextProvider>
    </div>
  );
}

export default App;

Main parts to use context provider

1. import context provider
2. wrap components which will use context in the context provider

Use context in a component

import { placeContext } from "../contexts/place";

export default function Nav() {
  const { places } = useContext(placeContext);
  return <h1>You have visited {places.length} places.</h1>;
}

Main parts to use context in a component

1. import context (not context provider)
2. pass the context as paramter of useConext function
3. destruct the result which is values we pass to context provider
4. use these values in the component