Static Site Dynamic Routes

bls sites init

my-site

? Pick a framework › - Use arrow-keys. Return to submit.
    Blank (Vite)
    React
❯   React (Typescript)
    Next.js
    Vue

npm install react-router-dom axios
 
- or - 
 
yarn add react-router-dom axios

// src/data-model/data-model-types.ts
export type PostType = {
  id: string;
  title: string;
  subtitle: string;
  category: string;
};
 
export type FetchError = {
  message: string;
  status?: number;
};
 
export type DataType = PostType[] | undefined;

// src/config.ts
interface Config {
  get: {
    allPostsApiUrl: string;
  };
}
 
const config: Config = {
  get: {
    allPostsApiUrl: `/api/test_multiple`,
  },
};
 
export default config;

// src/hooks/useFetchData.jsx
import { useState, useEffect } from 'react';
import axios from 'axios';
import { DataType, FetchError } from '../data-model/data-model-types';
 
const useFetchData = (url: string) => {
  const [data, setData] = useState<DataType[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<FetchError | null>(null);
 
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get<DataType[]>(url);
        setData(response.data);
      } catch (err: unknown) {
        if (axios.isAxiosError(err)) {
          // Axios specific error
          setError({
            message: err.message,
            status: err.response?.status,
          });
        } else if (err instanceof Error) {
          // General error
          setError({
            message: err.message,
          });
        } else {
          setError({
            message: 'An unknown error occurred',
          });
        }
      } finally {
        setLoading(false);
      }
    };
 
    fetchData();
  }, [url]);
 
  return { data, loading, error };
};
 
export default useFetchData;
 

// src/components/Table/index.tsx
import React from 'react';
import useFetchData from '../../hooks/useFetchData';
import config from '../../config';
 
const Table: React.FC = () => {
  const { data, loading, error } = useFetchData(`${config.get.allPostsApiUrl}`);
 
  if (loading) {
    return <div>'Loading...'</div>
  }
 
  if (!data || error) {
    return <div>Something went wrong. Please try again.</div>
  }
 
  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>Title</th>
            <th>Category</th>
            <th>Published</th>
          </tr>
        </thead>
        <tbody>
          {data.map((item: any, i: number) => (
            <tr key={i}>
              <td>{item.title}</td>
              <td>{item.category}</td>
              <td>{item.created_at}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};
 
export default Table;

// src/App.tsx
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Table from './components/Table';
 
const App: React.FC = () => {
  return (
    <Router>
      <div className="App">
        <Routes>
          <Route path="/" element={<Table />} />
          <Route path="*" element={<div>Not Found</div>} />
        </Routes>
      </div>
    </Router>
  );
};
 
export default App;

├── assembly
│   └── api
│       └── test_multiple.ts
└── src

import { http } from "@blockless/sdk/assembly";
 
export function GET(req: http.Request): http.Response {
const response = new http.Client().getList(
  "https://jsonfakery.com/blogs/random/10",
);
 
return new http.Response(response.stringify())
  .header("Content-Type", "application/json")
  .status(200);
}

bls login

bls sites preview

bls sites deploy

Publish successful!
 
Deploying react-dynamic-routes ...
Deployment successful!
Name:   react-dynamic-routes
URL:    https://react-dynamic-routes-41cce589.bls.dev
CID:    bafybeihhb3zogxsyik7i6aqhhgghilia57op