Add frontend files

.dockerignore

@@ -0,0 +1,21 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.github/workflows/fly-deploy.yml

@@ -0,0 +1,18 @@
+# See https://fly.io/docs/app-guides/continuous-deployment-with-github-actions/
+
+name: Fly Deploy
+on:
+  push:
+    branches:
+      - main
+jobs:
+  deploy:
+    name: Deploy app
+    runs-on: ubuntu-latest
+    concurrency: deploy-group    # optional: ensure only one action runs at a time
+    steps:
+      - uses: actions/checkout@v4
+      - uses: superfly/flyctl-actions/setup-flyctl@master
+      - run: flyctl deploy --remote-only
+        env:
+          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

Dockerfile

@@ -0,0 +1,11 @@
+FROM node:15.4 as build 
+
+WORKDIR /react-app
+COPY package*.json .
+RUN npm install
+COPY . .
+RUN npm run build
+
+FROM nginx:1.19
+COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
+COPY --from=build /react-app/build /usr/share/nginx/html

README.md

@@ -0,0 +1,44 @@
+# Fly + Create React App = ❤️
+
+Base code from https://github.com/fly-apps/hello-create-react-app!
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+This serves as a simple way to teach React developers how to deploy on Fly.io
+
+## How to deploy this?
+
+If you just want to deploy this project all you need is `fly launch` and accept copying the configuration.
+
+```sh
+$ fly launch
+An existing fly.toml file was found
+? Would you like to copy its configuration to the new app? Yes
+Creating app in /path/to/fly-create-react-app
+Scanning source code
+Detected a Dockerfile app
+? App Name (leave blank to use an auto-generated name): create-react-app-on-fly
+? Select organization: Lubien (personal)
+? Select region: gru (São Paulo)
+Created app create-react-app-on-fly in organization personal
+Wrote config file fly.toml
+? Would you like to set up a Postgresql database now? No
+? Would you like to deploy now? Yes
+Deploying create-react-app-on-fly
+==> Validating app configuration
+--> Validating app configuration done
+...
+```
+
+## How to add this to my other React project?
+
+The important files here are the Dockerfile, `fly.toml`, `.dockerignore` and the `nginx` folder.
+
+Copy those to your project and you should be good to go.
+
+## How does this work?
+
+This setup uses a Dockerfile with NodeJS to build your project using `npm run build` then we copy the built files
+to a Nginx image to serve all statics handling pretty URLs.
+
+Worth mentioning we added `[[statics]]` to the `fly.toml` to cache statics too.

fly.toml

@@ -0,0 +1,54 @@
+# fly.toml app configuration file generated for syntaxsorcerer on 2024-08-11T14:46:24-07:00
+#
+# See https://fly.io/docs/reference/configuration/ for information about how to use this file.
+#
+
+app = 'syntaxsorcerer'
+primary_region = 'sjc'
+kill_signal = 'SIGINT'
+kill_timeout = '5s'
+
+[experimental]
+  auto_rollback = true
+
+[build]
+
+[http_service]
+  internal_port = 3000
+  force_https = false
+  auto_stop_machines = 'stop'
+  auto_start_machines = true
+  min_machines_running = 0
+  processes = ['app']
+
+[[services]]
+  protocol = 'tcp'
+  internal_port = 80
+  processes = ['app']
+
+  [[services.ports]]
+    port = 80
+    handlers = ['http']
+
+  [[services.ports]]
+    port = 443
+    handlers = ['tls', 'http']
+
+  [services.concurrency]
+    type = 'connections'
+    hard_limit = 25
+    soft_limit = 20
+
+  [[services.tcp_checks]]
+    interval = '15s'
+    timeout = '2s'
+    grace_period = '1s'
+
+[[vm]]
+  memory = '1gb'
+  cpu_kind = 'shared'
+  cpus = 1
+
+[[statics]]
+  guest_path = '/usr/share/nginx/html/'
+  url_prefix = '/'

nginx/nginx.conf

@@ -0,0 +1,25 @@
+worker_processes  1;
+
+events {
+  worker_connections  1024;
+}
+
+http {
+  server {
+    listen 80;
+    server_name  localhost;
+
+    root   /usr/share/nginx/html;
+    index  index.html index.htm;
+    include /etc/nginx/mime.types;
+
+    gzip on;
+    gzip_min_length 1000;
+    gzip_proxied expired no-cache no-store private auth;
+    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
+
+    location / {
+      try_files $uri $uri/ /index.html;
+    }
+  }
+}