AnimeThemes Web Client
Configuration
To get started you need to define some environment variables. This can be done by creating a .env.local file in the
root directory. A minimal setup only requires one variable to be set:
; Set this to the URL on which your local API is served.
;
; (If you do not have a local instance of animethemes-server set up
; you can also use the production or staging URLs of the AnimeThemes API.
; Keep in mind though that this puts addtional load on our servers.
; That's why it's recommended to set up your own API instance locally.)
ANIMETHEMES_API_URL=http://localhostTo get to use all features of the client, you may configure some additional variables.
This is a list of all available options:
; ===== Server-side =====
; The URL to the AnimeThemes API which will be used on the server.
ANIMETHEMES_API_URL=http://localhost
; If specified, this API key will be used to make requests to the AnimeThemes API.
; This is used to by-pass rate limiting.
ANIMETHEMES_API_KEY=...
; The token to use for manual revalidation.
REVALIDATE_TOKEN=secret
; Set to any truthy value to activate the bundle analyzer.
ANALYZE=true
; ===== Server-side + Client-side =====
; The base path the app should be hosted on.
NEXT_PUBLIC_BASE_PATH=/wiki
; The URL to the AnimeThemes API which will be used on the browser.
NEXT_PUBLIC_API_URL=https://api.animethemes.moe
; The URL from which video files should be served.
NEXT_PUBLIC_VIDEO_URL=https://v.animethemes.moe
; The URL to use for app links.
NEXT_PUBLIC_APP_URL=https://app.animethemes.moe
; Set to any truthy value to activate staging mode.
; Staging mode only pre-renders a small subset of pages to reduce build time.
STAGING=trueFor more information on environment variables see the Next.js documentation.
Development
npm installnpm run dev
Deployment
npm install(If not done already.)npm run buildgenerates all static pages and produces a production ready bundle.npm run startstarts the server.- The server is now listening on port 3000 for incoming requests.
Used technologies
- Next.js
- styled-components
- react-query
- Font Awesome
- ...some other small packages, see the
package.json.