react sample

Author: commit111

samples/react/.devcontainer/Dockerfile

@@ -0,0 +1,12 @@
+# Note: universal image is not compatible with the devcontainer tools.
+#       we use the typescript-node image instead here but should switch out per 
+#       project requirements. You can choose a devcontainer that's appropriate 
+#       for your sample from the list below #REMOVE_ME_AFTER_EDITING
+
+# FROM mcr.microsoft.com/devcontainers/go:1.22-bookworm
+# FROM mcr.microsoft.com/devcontainers/python:3.12-bookworm
+# FROM mcr.microsoft.com/devcontainers/php:8.3-bookworm
+# FROM mcr.microsoft.com/devcontainers/ruby:3.2-bookworm
+# FROM mcr.microsoft.com/devcontainers/java:11-bookworm
+# FROM mcr.microsoft.com/devcontainers/rust:1-bookworm
+FROM mcr.microsoft.com/devcontainers/typescript-node:22-bookworm

samples/react/.devcontainer/devcontainer.json

@@ -0,0 +1,11 @@
+{
+  "build": {
+    "dockerfile": "Dockerfile",
+    "context": ".."
+  },
+  "features": {
+    "ghcr.io/defanglabs/devcontainer-feature/defang-cli:1.0.4": {},
+    "ghcr.io/devcontainers/features/docker-in-docker:2": {},
+    "ghcr.io/devcontainers/features/aws-cli:1": {}
+  }
+}

samples/react/.github/workflows/deploy.yaml

@@ -0,0 +1,20 @@
+name: Deploy
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+
+    steps:
+    - name: Checkout Repo
+      uses: actions/checkout@v4
+
+    - name: Deploy
+      uses: DefangLabs/[email protected]

samples/react/README.md

@@ -0,0 +1,57 @@
+# React
+
+[![1-click-deploy](https://defang.io/deploy-with-defang.png)](https://portal.defang.dev/redirect?url=https%3A%2F%2Fgithub.com%2Fnew%3Ftemplate_name%3Dsample-react-template%26template_owner%3DDefangSamples)
+
+A minimal React app that uses Vite, running on Defang. 
+
+## Prerequisites
+
+1. Download [Defang CLI](https://github.com/DefangLabs/defang)
+2. (Optional) If you are using [Defang BYOC](https://docs.defang.io/docs/concepts/defang-byoc) authenticate with your cloud provider account
+3. (Optional for local development) [Docker CLI](https://docs.docker.com/engine/install/)
+
+## Development
+
+To run the application locally, you can use the following command (make sure you've got `npm` and [Node.js](https://nodejs.org/en) installed):
+
+```bash
+npm run dev
+```
+
+To run it using a Docker container, you can use the following command:
+
+```bash
+docker compose up --build
+```
+
+## Deployment
+
+> [!NOTE]
+> Download [Defang CLI](https://github.com/DefangLabs/defang)
+
+### Defang Playground
+
+Deploy your application to the Defang Playground by opening up your terminal and typing:
+```bash
+defang compose up
+```
+
+### BYOC (AWS)
+
+If you want to deploy to your own cloud account, you can use Defang BYOC:
+
+1. [Authenticate your AWS account](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-configure.html), and check that you have properly set your environment variables like `AWS_PROFILE`, `AWS_REGION`, `AWS_ACCESS_KEY_ID`, and `AWS_SECRET_ACCESS_KEY`.
+2. Run in a terminal that has access to your AWS environment variables:
+    ```bash
+    defang --provider=aws compose up
+    ```
+
+---
+
+Title: React
+
+Short Description: A minimal React app running on Defang. 
+
+Tags: React, Vite, JavaScript, Frontend
+
+Languages: JavaScript

samples/react/app/.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+npm-debug.log

samples/react/app/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

samples/react/app/Dockerfile

@@ -0,0 +1,32 @@
+# Build stage
+FROM node:18-alpine as build
+
+# Set working directory to /app
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy the rest of the application code
+COPY . .
+
+# Build the app
+RUN npm run build
+
+# Production stage
+FROM nginx:stable-alpine
+
+# Copy the build output from the build stage
+COPY --from=build /app/dist /usr/share/nginx/html
+
+# Copy custom Nginx configuration
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Expose port 5173
+EXPOSE 5173
+
+# Start Nginx
+CMD ["nginx", "-g", "daemon off;"]

samples/react/app/eslint.config.js

@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]

samples/react/app/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/defang.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

samples/react/app/nginx.conf

@@ -0,0 +1,10 @@
+server {
+    listen 5173;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}