Merge pull request #1 from infracloudio/acornfile

mern stack acornfile

.github/workflows/publish.yaml

@@ -0,0 +1,29 @@
+name: Publish Acorn image
+on:
+  workflow_dispatch:
+  push:
+    tags:
+      - "v[0-9]*"
+
+jobs:
+  publish:
+    name: Publish
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - uses: acorn-io/actions-setup@v2
+        with:
+          acorn-version: "main"
+      - name: Login to GHCR
+        uses: acorn-io/actions-login@v1
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Build and Publish with signature
+        run: |
+          TAG=${GITHUB_REF#refs/*/}
+          acorn build --platform linux/amd64 --platform linux/arm64 --push -t ghcr.io/infracloudio/mern-acorn:${TAG} .

Acornfile

@@ -0,0 +1,57 @@
+name:        "Mern Stack Acorn"
+description: "Acorn running a simple MERN stack app"
+readme:      "./README.md"
+icon:        "./mern.png"
+
+
+args: {
+  mongodbname: "mongodb"
+}
+
+services: db: {
+    image: "ghcr.io/acorn-io/mongodb:v#.#-#"
+    serviceArgs: {
+      dbName: args.mongodbname
+  }
+}
+containers: {
+    server: {
+        build: {
+        context:    "./server"
+        dockerfile: "./server/Dockerfile"
+        }
+        dirs: "/usr/src/app": "./server"
+        ports: publish: "5050:5050/http"
+        if args.dev{
+            dirs: {
+            "/usr/src/app": "./server"
+            }
+        }
+        env: {
+            DB_HOST: "@{service.db.address}"
+            DB_PORT: "@{service.db.port.27017}"
+            DB_NAME: "@{service.db.data.dbName}"
+            DB_USER: "@{service.db.secrets.admin.username}"
+            DB_PASS: "@{service.db.secrets.admin.password}"
+        }
+        consumes: ["db"]
+    }
+    client: {
+        build: {
+        context:    "./client"
+        dockerfile: "./client/Dockerfile"
+        }
+        dirs: "/usr/src/app": "./client"
+        ports: publish: "3000:3000/http"
+        env: {
+            REACT_APP_SERVER_HOST: "@{services.server.endpoint}"
+        }
+        if args.dev{
+            dirs: {
+            "/usr/src/app": "./client"
+            }
+        }
+        dependsOn: ["server"]
+    }
+
+}

README.md

@@ -0,0 +1,14 @@
+# Acorn for MERN stack
+===
+
+The MERN stack is a web development framework made up of the stack of MongoDB, Express.js, React.js, and Nodejs. It is one of the several variants of the MEAN stack.
+
+
+This is Acornfile for simple MERN stack application following [mongodb guide](https://www.mongodb.com/languages/mern-stack-tutorial) while is a simple Record List for Employee.
+
+
+## Configure the MERN stack
+
+MERN stack  uses mongodb as the database and it is been used as the [services](https://docs.acorn.io/reference/acornfile#services-consuming) . If you are using Advanace Options on Acorn Platform you can provide the `mongodbname`. By default it will be named as `mongodb`.
+
+Once your application on the Acorn platform is running click on the client to get the UI. Server it expose so that client can access the endpoint.

client/.gitignore

@@ -0,0 +1,91 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# IDEs and editors
+.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+.sass-cache
+connect.lock
+typings
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
+
+# Lerna
+lerna-debug.log
+
+# System Files
+.DS_Store
+Thumbs.db

client/Dockerfile

@@ -0,0 +1,20 @@
+# Dockerfile for React client
+
+# Build react client
+FROM node:20.1.0-alpine
+
+# Working directory be app
+WORKDIR /usr/src/app
+
+COPY package*.json ./
+
+###  Installing dependencies
+
+RUN npm install --silent
+
+# copy local files to app folder
+COPY . .
+
+EXPOSE 3000
+
+CMD ["npm","start"]

client/cypress.json

@@ -0,0 +1 @@
+{}

client/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

client/cypress/integration/endToEnd.spec.js

@@ -0,0 +1,35 @@
+
+describe('Web site availability', () => {
+
+    after(() => {
+      cy.contains("Delete").click({ force: true });
+      }); 
+      it('Sanity listings web site', () => {
+        cy.visit('http://localhost:3000');
+        cy.contains('Create Record').should('exist');
+      });
+      it('Test Adding Employee listings', () => {
+        cy.visit('http://localhost:3000/create');
+        cy.get('#name').type("Employee1");
+        cy.get('#position').type("Position1");
+        cy.get("#positionIntern").click({ force: true });
+        cy.contains("Create person").click({ force: true });
+        cy.visit('http://localhost:3000');
+        cy.contains('Employee1').should('exist');
+      });
+     /* it('Test Editing Employee listings', () => {
+        //cy.visit('http://localhost:3000');
+        cy.contains('Edit').click({ force: true })
+        cy.on('url:changed', url => {
+                  cy.visit(url);
+                  cy.get('#position').clear();
+                  cy.get('#position').type("Position2");
+                  cy.contains("Update Record").click({ force: true });
+                  cy.visit('http://localhost:3000');
+                  cy.contains('Position2').should('exist');
+              });
+       
+        
+        
+      });*/
+    });

client/cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

client/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

client/cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')