PokéAPI Website Documentation

The development server uses React-Static to provide hot-reloading for React components located in the /src directory.

Note: Changes to /alerts.json or files within the /src/docs/ directory do not hot-reload automatically. You must restart the development server for these changes to become visible.

To set up the development environment for the pokeapi.co website, ensure you have Git and Node.js (version 10.11.0 or greater) installed. Follow these steps to install dependencies and start the development server:

1. Navigate to the project root: cd pokeapi.co
2. Install dependencies: npm install
3. Start the hot-reloading development server: npm run start

Once started, you can view the site at http://localhost:3000.

To prepare the site for production deployment, use the build command. This generates static files in the dist directory. You can then use the serve command to test the production build on a local server.

1. Build the site: npm run build
2. Serve the production build: npm run serve

The resulting production files are located in the dist directory.

The getRoutes function returns an array of route objects that define the site's structure. Each route object can specify:

• path: The URL path.
• template: The path to the React component template.
• getData (optional): An async function that returns data specific to that route, which is then passed to the template as props.

getRoutes: async () => {
    return [
        {
            path: '/',
            template: 'src/pages/index.js',
        },
        {
            path: '/docs/v2',
            template: 'src/pages/docs/v2.js',
            getData: async () => {
                let docs = require('./src/docs/index.js').default;
                return {
                    docs: processDocs(docs),
                };
            },
        },
        // ... other routes
    ];
},

The plugins array in the configuration object allows you to register react-static plugins. You can provide a string for simple plugins or an array containing the plugin name and an options object for plugins requiring configuration.

In this project, the following plugins are used:

• react-static-plugin-react-router
• react-static-plugin-google-tag-manager (configured with a specific GTM ID)

export default {
    plugins: [
        'react-static-plugin-react-router',
        ['react-static-plugin-google-tag-manager', {id: 'GTM-MD89GGQ'}],
    ],
    // ...
};

The getSiteData function is used to fetch or process data that should be available to all pages in the application. In this project, it is used to load and process site alerts from ./alerts.json.

Processed alert objects include:

• htmlMessage: The alert message converted to HTML using marked.
• level: The severity level (defaults to 'info').
• id: A unique hash generated from the alert object.

getSiteData: () => {
    let alerts = require('./alerts.json');
    // ... validation logic ...
    return {
        alerts: alerts
            .filter(alert => alert.active !== false)
            .map(alert => ({
                htmlMessage: marked(alert.message),
                level: alert.level || 'info',
                id: hashSum(alert),
            })),
    };
},

The ApiExplorer component is the primary entrypoint for the API Explorer feature in the pokeapi.co project. It provides an interface for users to interactively explore the PokeAPI endpoints. To use it, import the default export from the ApiExplorer module.

import ApiExplorer from './components/ApiExplorer';

// Usage within a React component tree
function App() {
  return <ApiExplorer />;
}

The JsonViewer component is an entrypoint used for inspecting API response formats. It is exported as the default export from the src/components/JsonViewer module.

import JsonViewer from './components/JsonViewer';