readme

.env.example

@@ -1,7 +1,7 @@
 APP_URL=http://localhost:8080
 APP_DEBUG=true
 
-DEVELOPER_TOKEN="<YOUR DEVELOPER TOKEN>"
+# DEVELOPER_TOKEN="<YOUR DEVELOPER TOKEN>"
 STOREFRONT='fr'
 
 TEST_USER_TOKEN="<TEST USER TOKEN>"

README.md

@@ -1,36 +1,30 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+npm install
+cp .env.example .env.dev
+npm run dev:dev {-- -p 3001}
+
+npm install --production
+cp .env.example .env.production
+npm run build:production
+npm install pm2 -g
+pm2 start npm --name "AM+" -- start:production {-p 3001}
+
+```conf
+Define APP_URL amplus.dmchp.fr
+Define APP_LOCAL_URL http://localhost:3000
+
+<VirtualHost *:80>
+    ServerName ${APP_URL}
+
+    ProxyPass / ${APP_LOCAL_URL}/
+    ProxyPassReverse / ${APP_LOCAL_URL}/
+
+    <Proxy *>
+        Require all granted
+    </Proxy>
+
+    ProxyPreserveHost On
+    RequestHeader set X-Forwarded-Proto "http"
+    RequestHeader set X-Forwarded-Port "80"
+    RequestHeader set Host "${APP_URL}"
+</VirtualHost>
 ```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

app/tests/page.tsx

@@ -9,6 +9,10 @@ import SongsListSection from '@/src/components/Layout/SongsListSection/SongsList
 import { Album, Song } from '@/types/Items/Items'
 
 // region api
+const getApiUrl = () => {
+	return String(process.env.APP_URL).replace(/\/+$/, '')
+}
+
 const apiHeaders = {
 	Accept: 'application/json',
 	Authorization: `Bearer ${process.env.TEST_USER_TOKEN}`,
@@ -30,7 +34,7 @@ const timestampParam = () => ({
 })
 
 async function getNewReleases() {
-	return await axios.get(`${process.env.APP_URL}/api/user/releases`, {
+	return await axios.get(`${getApiUrl()}/api/user/releases`, {
 		headers: apiHeaders,
 		params: {
 			...timestampParam(),
@@ -44,7 +48,7 @@ async function getNewReleases() {
 }
 
 async function getNewSingles() {
-	return await axios.get(`${process.env.APP_URL}/api/user/releases`, {
+	return await axios.get(`${getApiUrl()}/api/user/releases`, {
 		headers: apiHeaders,
 		params: {
 			...timestampParam(),
@@ -58,7 +62,7 @@ async function getNewSingles() {
 }
 
 async function getUpcoming() {
-	return await axios.get(`${process.env.APP_URL}/api/user/releases`, {
+	return await axios.get(`${getApiUrl()}/api/user/releases`, {
 		headers: apiHeaders,
 		params: {
 			...timestampParam(),
@@ -70,7 +74,7 @@ async function getUpcoming() {
 }
 
 async function getNewSongs() {
-	return await axios.get(`${process.env.APP_URL}/api/user/releases/songs`, {
+	return await axios.get(`${getApiUrl()}/api/user/releases/songs`, {
 		headers: apiHeaders,
 		params: {
 			...timestampParam(),
@@ -82,7 +86,7 @@ async function getNewSongs() {
 }
 
 async function getUpcomingSongs() {
-	return await axios.get(`${process.env.APP_URL}/api/user/releases/songs`, {
+	return await axios.get(`${getApiUrl()}/api/user/releases/songs`, {
 		headers: apiHeaders,
 		params: {
 			...timestampParam(),
@@ -141,6 +145,12 @@ export default function Test() {
 		)
 	}
 
+	const debug = (): boolean => {
+		return ['true', '1'].includes(
+			String(process.env.APP_DEBUG).toLowerCase()
+		)
+	}
+
 	// throw new Error('testestestes')
 
 	return (
@@ -207,14 +217,14 @@ export default function Test() {
 				{refreshButton('Upcoming Songs', loadUpcomingSongs)}
 			</div>
 
-			{process.env.APP_DEBUG && (
+			{debug() && (
 				<>
 					<hr />
 
 					<section className="w-full overflow-hidden">
 						<ul>
 							<li>APP_URL : {process.env.APP_URL}</li>
-							<li>APP_DEBUG : {Number(process.env.APP_DEBUG)}</li>
+							<li>APP_DEBUG : {process.env.APP_DEBUG}</li>
 							<li>
 								DEVELOPER_TOKEN : {process.env.DEVELOPER_TOKEN}
 							</li>

package.json

@@ -10,6 +10,8 @@
 		"build:dev": "env-cmd -f .env.local next build",
 		"build:production": "env-cmd -f .env.production next build",
 		"start": "next start",
+		"start:dev": "env-cmd -f .env.local next start",
+		"start:production": "env-cmd -f .env.production next start",
 		"lint": "next lint"
 	},
 	"dependencies": {

src/components/CollectionItems/Albums/Album.tsx

@@ -8,6 +8,10 @@ import { Album } from '@/types/Items/Items'
 interface AlbumProps extends React.HTMLAttributes<HTMLDivElement>, Album {}
 
 // region api
+const getApiUrl = () => {
+	return String(process.env.APP_URL).replace(/\/+$/, '')
+}
+
 const apiHeaders = {
 	Accept: 'application/json',
 	Authorization: `Bearer ${process.env.TEST_USER_TOKEN}`,
@@ -20,7 +24,7 @@ async function addResourceToLibrary(
 ) {
 	// todo : use MusicKit API
 	return await axios.post(
-		`${process.env.APP_URL}/api/applemusic/library`,
+		`${getApiUrl()}/api/applemusic/library`,
 		{},
 		{
 			headers: apiHeaders,