Merge pull request #94 from amplication/staging

Staging

.amplication/ignored/admin-ui/Dockerfile

@@ -1,23 +1,51 @@
-FROM node:18.12.1 AS base
+# multi-stage: base (build)
+FROM node:18.13.0-slim AS base
 
-ARG REACT_APP_SERVER_URL
+# instantiate environment variable
+ARG REACT_APP_SERVER_URL=http://localhost:3000
 
+# set the environment variable that points to the server
 ENV REACT_APP_SERVER_URL=$REACT_APP_SERVER_URL
 
+# create directory where the application will be built
 WORKDIR /app
 
-COPY package.json package-lock.json ./
+# copy over the dependency manifests, both the package.json 
+# and the package-lock.json are copied over
+COPY package*.json ./
 
-RUN npm ci
+# installs packages and their dependencies
+RUN npm install
 
+# copy over the code base
 COPY . .
 
+# create the bundle of the application
 RUN npm run build
 
-FROM nginx:stable-alpine AS prod
+# multi-stage: production (runtime)
+FROM nginx:1.22-alpine AS production
 
+# copy over the bundled code from the build stage
 COPY --from=base /app/build /usr/share/nginx/html
+COPY --from=base /app/configuration/nginx.conf /etc/nginx/conf.d/default.conf
 
-EXPOSE 80
+# create a new process indication file
+RUN touch /var/run/nginx.pid
 
-ENTRYPOINT ["nginx", "-g", "daemon off;"]
+# change ownership of nginx related directories and files
+RUN chown -R nginx:nginx /var/run/nginx.pid \
+        /usr/share/nginx/html \
+        /var/cache/nginx \
+        /var/log/nginx \
+        /etc/nginx/conf.d
+
+# set user to the created non-privileged user
+USER nginx
+
+# expose a specific port on the docker container
+ENV PORT=80
+EXPOSE ${PORT}
+
+# start the server using the previously build application
+ENTRYPOINT [ "nginx", "-g", "daemon off;" ]

.amplication/ignored/server/Dockerfile

@@ -1,23 +1,48 @@
-FROM node:18.12.1 AS base
+# multi-stage: base (build)
+FROM node:18.13.0 AS base
 
+# create directory where the application will be built
 WORKDIR /app
 
-COPY package.json ./
+# copy over the dependency manifests, both the package.json 
+# and the package-lock.json are copied over
+COPY package*.json ./
 
+# installs packages and their dependencies
 RUN npm install
 
+# copy over the prisma schema
 COPY prisma/schema.prisma ./prisma/
 
+# generate the prisma client based on the schema
 RUN npm run prisma:generate
 
+# copy over the code base
 COPY . .
 
+# create the bundle of the application
 RUN npm run build
 
-FROM node:18.12.1 AS prod
+# multi-stage: production (runtime)
+FROM node:18.13.0-slim AS production
 
+# create arguments of builds time variables
+ARG user=amplication
+ARG group=${user}
+ARG uid=1001
+ARG gid=$uid
+
+# [temporary] work around to be able to run prisma
+RUN apt-get update -y && apt-get install -y openssl
+
+# create directory where the application will be executed from
 WORKDIR /app
 
+# add the user and group
+RUN groupadd --gid ${gid} ${user}
+RUN useradd --uid ${uid} --gid ${gid} -m ${user}
+
+# copy over the bundled code from the build stage
 COPY --from=base /app/node_modules/ ./node_modules
 COPY --from=base /app/package.json ./package.json
 COPY --from=base /app/dist ./dist
@@ -26,6 +51,18 @@ COPY --from=base /app/scripts ./scripts
 COPY --from=base /app/src ./src
 COPY --from=base /app/tsconfig* ./
 
-EXPOSE 3000
+# change ownership of the workspace directory
+RUN chown -R ${uid}:${gid} /app/
+
+# get rid of the development dependencies
+RUN npm install --production
+
+# set user to the created non-privileged user
+USER ${user}
+
+# expose a specific port on the docker container
+ENV PORT=3000
+EXPOSE ${PORT}
 
-CMD [ "node", "./dist/main"]
+# start the server using the previously build application
+CMD [ "node", "./dist/main.js" ]

.github/workflows/deployment.template.yml

@@ -37,4 +37,4 @@ jobs:
         run: aws eks update-kubeconfig --region ${{ vars.AWS_REGION }} --name amplication-${{ inputs.environment-name }}
 
       - name: rollout restart deployment(s)
-        run: kubectl rollout restart deployments/${{ inputs.component-name }}-${{ inputs.environment-name }} -n ${{ inputs.environment-name }}
+        run: kubectl rollout restart deployments/${{ inputs.component-name }} -n ${{ inputs.environment-name }}

admin-ui/Dockerfile

@@ -1,23 +1,51 @@
-FROM node:16.16 AS base
+# multi-stage: base (build)
+FROM node:18.13.0-slim AS base
 
-ARG REACT_APP_SERVER_URL
+# instantiate environment variable
+ARG REACT_APP_SERVER_URL=http://localhost:3000
 
+# set the environment variable that points to the server
 ENV REACT_APP_SERVER_URL=$REACT_APP_SERVER_URL
 
+# create directory where the application will be built
 WORKDIR /app
 
-COPY package.json package-lock.json ./
+# copy over the dependency manifests, both the package.json 
+# and the package-lock.json are copied over
+COPY package*.json ./
 
-RUN npm ci
+# installs packages and their dependencies
+RUN npm install
 
+# copy over the code base
 COPY . .
 
+# create the bundle of the application
 RUN npm run build
 
-FROM nginx:stable-alpine AS prod
+# multi-stage: production (runtime)
+FROM nginx:1.22-alpine AS production
 
+# copy over the bundled code from the build stage
 COPY --from=base /app/build /usr/share/nginx/html
+COPY --from=base /app/configuration/nginx.conf /etc/nginx/conf.d/default.conf
 
-EXPOSE 80
+# create a new process indication file
+RUN touch /var/run/nginx.pid
 
-ENTRYPOINT ["nginx", "-g", "daemon off;"]
+# change ownership of nginx related directories and files
+RUN chown -R nginx:nginx /var/run/nginx.pid \
+        /usr/share/nginx/html \
+        /var/cache/nginx \
+        /var/log/nginx \
+        /etc/nginx/conf.d
+
+# set user to the created non-privileged user
+USER nginx
+
+# expose a specific port on the docker container
+ENV PORT=8080
+EXPOSE ${PORT}
+
+# start the server using the previously build application
+ENTRYPOINT [ "nginx", "-g", "daemon off;" ]

admin-ui/README.md

@@ -1,47 +1,47 @@
-# Amplication
+<p align="right">
+  <a href="https://amplication.com" target="_blank">
+    <img alt="amplication-logo" height="70" alt="Amplication Logo" src="https://amplication.com/images/amplication-logo-purple.svg"/>
+  </a>
+</p>
 
-This app was generated with Amplication.
-You can learn more in the [Amplication documentation](https://docs.amplication.com/guides/getting-started).
+# Introduction
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app), and built with [react-admin](https://marmelab.com/react-admin/)
+This service was generated with Amplication. It serves as the client-side for the generated server component. The client-side consist of a React application with ready-made forms for creating and editing the different data models of the application. It is pre-conffigured to work with the server and comes with the boilerplate and foundation for the client - i.e., routing, navigation, authentication, permissions, menu, breadcrumbs, error handling and much more. Additional information about the admin component and the architecture around it, can be found on the [documentation](https://docs.amplication.com/guides/getting-started) site. This side of the generated project was bootstrapped with [create-react-app](https://github.com/facebook/create-react-app) and built with [react-admin](https://marmelab.com/react-admin/).
 
-## Environment Variables
 
-| Environment          | Description                                 | Value                 |
-| -------------------- | ------------------------------------------- | --------------------- |
-| PORT                 | The port that the client UI is listening to |
-| REACT_APP_SERVER_URL | Amplication Server URL                      | http://localhost:3000 |
+<p align="center">
+  <img src="https://d33wubrfki0l68.cloudfront.net/2615bedd21c48089ab38a099bad9638b28879511/091b4/assets/images/admin-ui-9b6590728393d532ad798e9dc14138ac.png" width="700px">
+</p>
 
-## Available Scripts
+# Getting started
 
-In the `admin-ui` subdirectory, you can run:
+## Step 1: Configuration
 
-### `yarn start`
+Configuration for the client component can be provided through the use of environment variables. These can be passed to the application via the use of the `.env` file in the base directory of the generated service. Below a table can be found which show the different variables that can be passed. These values are provided default values after generation, change them to the desired values.
 
-Runs the app in development mode.
+| Variable             | Description                                      | Value                           |
+| -------------------- | ------------------------------------------------ |  ------------------------------ |
+| PORT                 | the port on which to run the client              | 3001                            |
+| REACT_APP_SERVER_URL | the url on which the server component is running | http://localhost:[server-port]  |
 
-Open [http://localhost:3001](http://localhost:3001) to view it in the browser.
+> **Note**
+> Amplication generates default values and stores them under the .env file. It is advised to use some form of secrets manager/vault solution when using in production. 
 
-### `yarn test`
 
-Runs tests to make sure everything is working correctly.
+## Step 2: Scripts
 
-### `yarn build`
+After configuration of the client the next step would be to run the application. Before running the client side of the component, make sure that the different pre-requisites are met - i.e., npm, docker. Make sure that the server-side of the application is running.
 
-Builds the app for production in the `build` folder.
+```sh
+# installation of the dependencies
+$ npm install
 
-### `yarn eject`
+# starts the application in development mode - available by default under http://localhost:3001 with a pre-configured user with the username "admin" and password "admin"
+$ npm run start
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+# builds the application in production mode - available under 'build'
+$ npm run build
 
-Ejects the Create React App. [Click here for more info](https://create-react-app.dev/docs/available-scripts/#npm-run-eject).
-
-### `docker:build`
-
-Build the Admin-UI Docker image.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
+# removes the single build dependency from the project
+$ npm run eject
+```

admin-ui/configuration/nginx.conf

@@ -0,0 +1,11 @@
+server_tokens off;
+
+server {
+    listen       8080;
+    server_name  localhost;
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        try_files $uri /index.html;
+    }
+}