2.5 KiB
Tube Archivist Frontend
This repo is WIP, recreation of Tube Archivist frontend in NextJS/React.
This is a Next.js project bootstrapped with create-next-app
.
Setup your environment
Copy .env.local.example to .env.local and set:
- NEXTAUTH_SECRET: Some long random string
- NEXTAUTH_URL: Your frontend, most likely
http://localhost:3000
- NEXT_PUBLIC_TUBEARCHIVIST_URL: Your Tube Archivist backend testing server, e.g.
http://localhost:8000
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
Errors:
- next command not found: Install next with
npm install next
- Error: Invalid src prop [...] hostname [...] is not configured under images in your
next.config.js
: Add the NEXT_PUBLIC_TUBEARCHIVIST_URL to the list of domains. - CORS errors in console: In your backend in
tubearchivist/config/settings.py
replace the line containing CORS_ALLOWED_ORIGIN_REGEXES withCORS_ORIGIN_ALLOW_ALL = True
and rebuild the container. NEVER do that on network accessible installation.
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.tsx
. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts
.
The pages/api
directory is mapped to /api/*
. Files in this directory are treated as API routes instead of React pages.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.