Skip to content

Commit dd343bd

Browse files
BaalmartBaalmart
authored
Merge pull request #2525 from airqo-platform/staging
move to production
2 parents 7eb755a + f7a7ee4 commit dd343bd

File tree

4 files changed

+224
-93
lines changed

4 files changed

+224
-93
lines changed

‎src/website2/README.md

Lines changed: 166 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,184 @@
1-
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
1+
# Website
2+
3+
Welcome to the Website repository, part of the AirQo Frontend project. This website is built with [Next.js](https://nextjs.org) and was bootstrapped using [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). The live website can be found at [airqo.net](https://airqo.net).
4+
5+
> **Note:** This repository only contains the frontend portion of the project. The backend has been built with Django and is maintained in the [airqo-api](https://github.com/airqo-platform/airqo-api) repository. If you wish to use the database for the website, please contact the project admin to obtain the necessary database URL for the frontend configuration.
6+
7+
This guide provides clear, step-by-step instructions to help you set up your local development environment, run the website, and contribute effectively. Additionally, it explains how to handle environment variables and update CI/CD workflows.
8+
9+
---
10+
11+
## Table of Contents
12+
13+
- [Website](#website)
14+
- [Table of Contents](#table-of-contents)
15+
- [Getting Started](#getting-started)
16+
- [1. Clone the Repository](#1-clone-the-repository)
17+
- [2. Navigate to the Website Folder](#2-navigate-to-the-website-folder)
18+
- [3. Install Dependencies](#3-install-dependencies)
19+
- [4. Run the Development Server](#4-run-the-development-server)
20+
- [Environment Variables \& Workflow Updates](#environment-variables--workflow-updates)
21+
- [Backend \& Database Integration](#backend--database-integration)
22+
- [Contributing](#contributing)
23+
- [Learn More](#learn-more)
24+
- [Deployment](#deployment)
25+
26+
---
227

328
## Getting Started
429

5-
First, run the development server:
30+
Follow these steps to set up your local development environment for the website. These instructions are applicable on Windows, Mac, and Linux.
31+
32+
### 1. Clone the Repository
33+
34+
Clone the AirQo Frontend repository using the following command:
35+
36+
```bash
37+
git clone https://github.com/airqo-platform/AirQo-frontend.git
38+
```
39+
40+
_Tip for Mac/Linux:_
41+
If you encounter any permission issues with Git, ensure that Git is correctly installed on your system. You can install Git via [Homebrew](https://brew.sh) on Mac (`brew install git`) or use your package manager on Linux (e.g., `sudo apt-get install git` on Debian/Ubuntu).
42+
43+
### 2. Navigate to the Website Folder
44+
45+
After cloning the repository, navigate to the folder that contains the website application:
46+
47+
```bash
48+
cd AirQo-frontend/src/website2
49+
```
50+
51+
_Note:_
52+
The folder structure is consistent across all operating systems. Use your terminal (Mac/Linux) or Command Prompt/PowerShell (Windows) to run this command.
53+
54+
### 3. Install Dependencies
55+
56+
This project requires **Node.js version 18 or above**. Ensure you have Node.js and npm installed on your system by running:
57+
58+
```bash
59+
node -v
60+
npm -v
61+
```
62+
63+
If you need to install or update Node.js, download it from [nodejs.org](https://nodejs.org/) or use a version manager like [nvm](https://github.com/nvm-sh/nvm) (especially useful for Mac/Linux).
64+
65+
To install the required dependencies using **npm**, run:
66+
67+
```bash
68+
npm install
69+
```
70+
71+
_For Mac/Linux Users:_
72+
If you experience permission issues while installing packages globally, consider using a Node version manager like [nvm](https://github.com/nvm-sh/nvm).
73+
74+
### 4. Run the Development Server
75+
76+
Launch the development server with the following command:
677

778
```bash
879
npm run dev
9-
# or
10-
yarn dev
11-
# or
12-
pnpm dev
13-
# or
14-
bun dev
1580
```
1681

17-
test
82+
Once the server starts, open [http://localhost:3000](http://localhost:3000) in your browser to view the website. The page will automatically reload as you make changes.
83+
84+
_Alternate Tips for Mac/Linux:_
85+
86+
- Use your terminal’s tab completion to quickly navigate directories.
87+
- If you’re using a firewall or proxy, ensure your local ports are accessible.
88+
89+
---
90+
91+
## Environment Variables & Workflow Updates
92+
93+
When adding new environment variables to the project, ensure that the CI/CD workflows remain consistent across staging, production, and preview environments.
94+
95+
For example, if you add new variables, update your workflow YAML files as follows:
96+
97+
```bash
98+
echo " NEXT_PUBLIC_OPENCAGE_API_KEY: ${{ secrets.WEBSITE_NEXT_PUBLIC_OPENCAGE_API_KEY }}" >> .env.yaml
99+
echo " NEXT_PUBLIC_API_TOKEN: ${{ secrets.WEBSITE_PROD_NEXT_PUBLIC_API_TOKEN }}" >> .env.yaml
100+
```
101+
102+
**Important Notes:**
103+
104+
- Verify that the secret names used in your workflows match those defined in your repository.
105+
- If you add new environment variables, please contact the project admin to have them added to the GitHub secrets.
106+
- Always update the workflow files whenever you introduce or modify environment variables.
107+
- You can find the workflow files for the different environments in the `.github/workflows` folder.
108+
109+
---
110+
111+
## Backend & Database Integration
112+
113+
The backend for this project is built with Django and is maintained in the [airqo-api](https://github.com/airqo-platform/airqo-api) repository. If you wish to connect the website to a live database:
114+
115+
- **Database Access:**
116+
You will need the database URL which is not publicly available.
117+
**Action Required:** Contact the project admin to obtain the database URL for frontend integration.
118+
119+
- **Environment Variables:**
120+
Once you receive the database URL, update your environment variables accordingly in the `.env.yaml` file and any other relevant configuration files.
121+
122+
---
123+
124+
## Contributing
125+
126+
We welcome contributions from the open source community. To help you get started, please follow these steps:
127+
128+
1. **Fork and Clone:**
129+
130+
- Fork the repository on GitHub.
131+
- Clone your fork to your local machine:
132+
```bash
133+
git clone https://github.com/your-username/AirQo-frontend.git
134+
```
135+
136+
2. **Create a Branch:**
137+
138+
- Create a feature or bug-fix branch:
139+
```bash
140+
git checkout -b feature/your-feature-name
141+
```
142+
143+
3. **Make Your Changes:**
144+
145+
- Follow the coding standards and guidelines established in the project.
146+
- Update documentation as needed.
147+
- Test your changes locally to ensure everything works as expected.
148+
149+
4. **Commit and Push:**
150+
151+
- Commit your changes with a clear commit message:
152+
```bash
153+
git commit -m "Description of your changes"
154+
```
155+
- Push your branch to your fork:
156+
```bash
157+
git push origin feature/your-feature-name
158+
```
159+
160+
5. **Open a Pull Request:**
161+
- Navigate to the main repository on GitHub and open a Pull Request against the `main` branch.
162+
- Provide a detailed description of your changes and reference any related issues.
18163

19-
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
164+
---
20165

21-
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
166+
## Learn More
22167

23-
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
168+
To expand your knowledge about Next.js and modern web development, consider exploring these resources:
24169

25-
## Learn More.
170+
- **[Next.js Documentation](https://nextjs.org/docs)** – Learn about Next.js features and APIs.
171+
- **[Learn Next.js](https://nextjs.org/learn)** – An interactive tutorial for building Next.js applications.
172+
- **[Next.js GitHub Repository](https://github.com/vercel/next.js)** – Explore and contribute to the core Next.js codebase.
26173

27-
To learn more about Next.js, take a look at the following resources:
174+
---
28175

29-
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
30-
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
176+
## Deployment
31177

32-
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
178+
The simplest way to deploy the website is via 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). For more detailed deployment instructions, refer to the [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying).
33179

34-
## Deploy on Vercel
180+
---
35181

36-
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.
182+
Thank you for your interest in contributing to our website. Your support and contributions are vital to the ongoing success and improvement of the project!
37183

38-
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
184+
---

‎src/website2/src/app/layout.tsx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,14 +39,18 @@ export default async function RootLayout({
3939
children: ReactNode;
4040
}) {
4141
const maintenance = await checkMaintenance();
42-
const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID || '';
42+
const GA_MEASUREMENT_ID =
43+
process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID || 'G-79ZVCLEDSG';
4344

4445
return (
4546
<html lang="en" className={interFont.variable}>
4647
<body>
4748
<ErrorBoundary>
4849
<ReduxDataProvider>
4950
<Suspense fallback={<Loading />}>
51+
{/* Initialize & Track Google Analytics only on the client */}
52+
<GoogleAnalytics measurementId={GA_MEASUREMENT_ID} />
53+
5054
{maintenance.isActive ? (
5155
<MaintenancePage message={maintenance.message} />
5256
) : (
@@ -58,11 +62,6 @@ export default async function RootLayout({
5862
</Suspense>
5963
</ReduxDataProvider>
6064
</ErrorBoundary>
61-
62-
{/* Initialize & Track Google Analytics only on the client */}
63-
{GA_MEASUREMENT_ID && (
64-
<GoogleAnalytics measurementId={GA_MEASUREMENT_ID} />
65-
)}
6665
</body>
6766
</html>
6867
);

‎src/website2/src/components/GoogleAnalytics.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ export default function GoogleAnalytics({
2525
const pathname = usePathname();
2626
const searchParams = useSearchParams();
2727

28+
console.info('gta', measurementId);
29+
2830
useEffect(() => {
2931
if (
3032
typeof window === 'undefined' ||

0 commit comments

Comments
 (0)