feat: use PORT in React from backend .env created in frontend (#355)

Author: sibteali786

.github/workflows/generate-linter-advanced.yml

@@ -35,7 +35,7 @@ jobs:
         run: echo "PROJECT_DIRECTORY=${{ matrix.framework }}" | sed 's/\//-/g' >> $GITHUB_ENV
 
       - name: build templates
-        run: script -q /dev/null -c "go run main.go create -n ${{ env.PROJECT_DIRECTORY }} -f ${{ matrix.framework}} -d ${{ matrix.driver }} -g ${{ matrix.git}} --advanced --feature ${{ matrix.advanced }}" /dev/null
+        run: script -q /dev/null -c "go run main.go create -n ${{ env.PROJECT_DIRECTORY }} -f ${{ matrix.framework}} -d ${{ matrix.driver }} -g ${{ matrix.git}} --advanced --feature ${{ matrix.advanced }}"
 
       - if: ${{ matrix.advanced == 'htmx' || matrix.advanced == 'tailwind' }}
         name: Install Templ & gen templates

.github/workflows/generate-linter-core.yml

@@ -34,7 +34,7 @@ jobs:
         run: echo "PROJECT_DIRECTORY=${{ matrix.framework }}" | sed 's/\//-/g' >> $GITHUB_ENV
 
       - name: build templates
-        run: script -q /dev/null -c "go run main.go create -n ${{ env.PROJECT_DIRECTORY }} -f ${{ matrix.framework}} -d ${{ matrix.driver }} -g ${{ matrix.git}}" /dev/null
+        run: script -q /dev/null -c "go run main.go create -n ${{ env.PROJECT_DIRECTORY }} -f ${{ matrix.framework}} -d ${{ matrix.driver }} -g ${{ matrix.git}}"
 
       - name: golangci-lint
         run: | 

.github/workflows/testcontainers.yml

@@ -24,7 +24,7 @@ jobs:
           git config --global user.email 'testemail@users.noreply.github.com'
 
       - name: build ${{ matrix.driver }} template
-        run: script -q /dev/null -c "go run main.go create -n ${{ matrix.driver }} -g commit -f fiber -d ${{matrix.driver}}" /dev/null
+        run: script -q /dev/null -c "go run main.go create -n ${{ matrix.driver }} -g commit -f fiber -d ${{matrix.driver}}"
 
       - name: run ${{ matrix.driver }} integration tests
         working-directory: ${{ matrix.driver }}

cmd/program/program.go

@@ -855,6 +855,32 @@ func (p *Project) CreateViteReactProject(projectPath string) error {
 		return fmt.Errorf("failed to write App.tsx template: %w", err)
 	}
 
+	// Create the global `.env` file from the template
+	err = p.CreateFileWithInjection("", projectPath, ".env", "env")
+	if err != nil {
+		return fmt.Errorf("failed to create global .env file: %w", err)
+	}
+
+	// Read from the global `.env` file and create the frontend-specific `.env`
+	globalEnvPath := filepath.Join(projectPath, ".env")
+	vitePort := "8080" // Default fallback
+
+	// Read the global .env file
+	if data, err := os.ReadFile(globalEnvPath); err == nil {
+		lines := strings.Split(string(data), "\n")
+		for _, line := range lines {
+			if strings.HasPrefix(line, "PORT=") {
+				vitePort = strings.SplitN(line, "=", 2)[1] // Get the backend port value
+				break
+			}
+		}
+	}
+
+	// Use a template to generate the frontend .env file
+	frontendEnvContent := fmt.Sprintf("VITE_PORT=%s\n", vitePort)
+	if err := os.WriteFile(filepath.Join(frontendPath, ".env"), []byte(frontendEnvContent), 0644); err != nil {
+		return fmt.Errorf("failed to create frontend .env file: %w", err)
+	}
 	// Handle Tailwind configuration if selected
 	if p.AdvancedOptions[string(flags.Tailwind)] {
 		fmt.Println("Tailwind selected. Configuring with React...")

cmd/template/advanced/files/react/app.tsx.tmpl

@@ -7,7 +7,7 @@ function App() {
   const [count, setCount] = useState(0)
 
   const fetchData = () => {
-    fetch('http://localhost:8080/')
+    fetch(`http://localhost:${import.meta.env.VITE_PORT}/`)
       .then(response => response.text())
       .then(data => setMessage(data))
       .catch(error => console.error('Error fetching data:', error))

cmd/template/advanced/files/react/tailwind/app.tsx.tmpl

@@ -5,7 +5,7 @@ function App() {
   const [message, setMessage] = useState<string>('')
 
   const fetchData = () => {
-    fetch('http://localhost:8080/')
+    fetch(`http://localhost:${import.meta.env.VITE_PORT}/`)
       .then(response => response.text())
       .then(data => setMessage(data))
       .catch(error => console.error('Error fetching data:', error))

docs/docs/advanced-flag/react-vite.md

@@ -7,6 +7,7 @@ The React advanced flag can be combined with the Tailwind flag for enhanced styl
 ```bash
 / (Root)
 ├── frontend/                     # React advanced flag. Excludes HTMX.
+│   ├── .env                      # Frontend environment configuration
 │   ├── node_modules/             # Node dependencies.
 │   ├── public/
 │   │   ├── index.html
@@ -209,3 +210,7 @@ volumes:
 networks:
   blueprint:
 ```
+
+## Environment Variables
+
+The `VITE_PORT` in .env refers `PORT` from .env in project root ( for backend ). If value of `PORT` is changed than `VITE_PORT` must also be changed so that requests to backend work fine and have no conflicts.