sync/upstream

.bunnyshell/templates/express-angular-postgres/README.md

@@ -4,28 +4,18 @@ This Environment [Template](https://documentation.bunnyshell.com/docs/templates-
 
 The template provides the Bunnyshell configuration composed of 3 Components (frontend + backend + database) and the CRUD application that demonstrates how the components work together to form an environment.
 
-You can extend the template by further adding Components, be them more APIs or other services, such as queues, caches, block storage etc.
+An [Environment in Bunnyshell](https://documentation.bunnyshell.com/docs/environments) is a user-defined group that brings together applications and all of the services and databases those applications require.
 
  
 
 # Environment overview
 
-An [Environment in Bunnyshell](https://documentation.bunnyshell.com/docs/environments) is a user-defined group that brings together applications and all of the services and databases those applications require.
-
-This Environment Template contains 3 components:
-- `app` for frontend, based on a `node` image
-- `api` for backend, also based on a `node` image
-- `db` using a `postgres` image
-
-and 1 persistent volume:
-- `data-volume`
-
 ## Container images
 
 The images for both frontend and backend have 2 possible stages: `dev` and `prod`.
 
 The `dev` stage is suitable for development, as it contains development packages and libraries and has debugging enabled.  
-The `prod` stage is meant for production/staging, as it produces an optimizied image, as lightweight as possible.
+The `prod` stage is meant for production/staging, as it produces an optimized image, as lightweight as possible.
 
 The stage (`dev` or `prod`) can be set from the Environment's configuration (`bunnyshell.yaml`), within each Component's `dockerCompose.build.target` property. The default is `dev`, and it can be changed to `prod` to produce production-like images.
 
@@ -34,19 +24,11 @@ The stage (`dev` or `prod`) can be set from the Environment's configuration (`bu
 # How to use this Template
 
 You can create Environments from a [Bunnyshell Template](https://documentation.bunnyshell.com/docs/templates-what-are-templates); these Environments can have multiple purposes:
-- Development
-- Staging / Dev testing / End-to-end testing
-
-Development Environments should be created with the `dev` target for images (see "Container images") and can be used for Remote Development.
-
-Staging / Testing Environments should be created with the `prod` target for images, in order to have the application running as it does in production.
 
  
 
 ## Staging / Testing
 
-For staging / testing purposes, the Environments just need to be deployed.
-
 You need to ensure that the `dockerCompose.build.target` is set to `prod` for all the Components, and then [deploy the Environment](https://documentation.bunnyshell.com/docs/environment-workflows-deploy).
 
  
@@ -55,51 +37,35 @@ You need to ensure that the `dockerCompose.build.target` is set to `prod` for al
 
 [Remote Development](https://documentation.bunnyshell.com/docs/remote-development) allows you to develop directly in a cloud environment, therefore eliminating all inconsistencies and approximations of traditional local environments.
 
-The code is ran in a container running in Kubernetes, and you can choose one of two ways to work, depending whether you prefer to keep a local copy of the code or not.
-
-1. You can have the code existing **only in the container** - you will need an IDE capable of connecting via SSH to install a headless IDE in the container, eg. VS Code or the JetBrains suite.
-
-2. You can have the code existing **on your device** and it will be synchronized into the container - any IDE or plain text editor will do.
+The code is executed in a container running in Kubernetes, while being synchronized real-time with your local folders.
 
 📖 For more information on how Remote Development works in Bunnyshell, please see the [dedicated documentation](https://documentation.bunnyshell.com/docs/remote-development).
 
 🧱 Remote Development can only be started from the CLI, so you will need to [install the Bunnyshell CLI](https://documentation.bunnyshell.com/docs/bunnyshell-cli-install) installed and to [authenticate in the CLI](https://documentation.bunnyshell.com/docs/bunnyshell-cli-authentication).
 
  
 
-### Start a Remote Development session
-
-In order to start a Remote Development session, you must run the dedicated command from the CLI:
-```
-bns remote-development up
-```
-
-The CLI will present a wizard, so you can choose your Environment first, then the Component on which you want to develop on.  
-You can also pass on the Component ID, to skip the wizard. The full command can be copied from the UI: go to the Environment details screen, click the desired Component, then expand the *Component Actions* and select *Remote Development*.
-
-💡 When typing, you can use the shorter alias: `bns rdev up`
-
-🧱 Please note that starting a Remote Development session requires the *Remote Development* setting to be *ON* for the Environment (*ON* is the default value).
-
-You need to choose the way you wish to work with files, before starting the Remote Development session.
+You need to ensure that the `dockerCompose.build.target` is set to `dev` for all the Components, and then [deploy the Environment](https://documentation.bunnyshell.com/docs/environment-workflows-deploy).
 
  
 
-#### Working with code from your machine
+### Start a Remote Development session
 
-When working with code stored locally (the default mode), you just need to run:
+In order to start a Remote Development session, you must run a command from the CLI:
 ```
-bns remote-development up
+bns remote-development up --component {COMPONENT_ID}
 ```
 
+The exact command can be copied from the UI: go to the Environment details screen, select the desired Component, then *Remote Development*. In case you do not specify the `component` flag, the CLI will guide you through using a wizard.
+
 You need to provide 2 additional paths:
 - the *local path*, for your local code files
 - the *remote path*: the path where code files are located within the container (you can find this out from the `Dockerfile`, it's in the `WORKDIR` statement); for the `api` application, it is `/usr/src/app/backend`.
 
-💡 The wizard will require these from you, but you can also provide them as options, `-l` and `-r` respectively.
+💡 The wizard will require these from you, but you can also provide them as options, `-l` and `-r` respectively. You can also define [the remote development configuration](https://documentation.bunnyshell.com/docs/remote-development-sharing-configuration) in `bunnyshell.yaml`.
 
 After starting the Remote Development session, the Bunnyshell CLI opens a shell into the container. From it, you can run any application-related command you would run on local.  
-Please note that **you must start the application** manually, as you may needed to start the application in a number of ways, eg. with or without debugging.
+Please note that **you must start the application** manually, as you may need to start the application in a number of ways, eg. with or without debugging.
 
 ```
 $ bns remote-development up --component {YOUR_COMPONENT_ID}
@@ -111,53 +77,15 @@ $ bns remote-development up --component {YOUR_COMPONENT_ID}
 📖 For more information on starting a remote Development session, please see:
 - [How to Start Remote Development](https://documentation.bunnyshell.com/docs/remote-development-start)
   - [with local files](https://documentation.bunnyshell.com/docs/remote-development-local-files)
-
- 
-
-#### Working with code from the container
-
-When working directly with the files from the container, you need to disable the synchronization of files, by adding the option `--sync-mode none` to the command. Usually, since you'll be using your IDE to connect to the container, you will also want to pass in `--no-tty`, to disable leaving an SSH terminal into the container, but this is optional and depends on your preferences.
-
-You need to provide the *remote path*: the path where code files are located within the container (you can find this out from the `Dockerfile`, it's in the `WORKDIR` statement); for the `api` application, it is `/usr/src/app/backend`.
-
-💡 The wizard will require this from you, but you can also provide it as an option, using `-r`.
-
-```
-bns remote-development up --sync-mode none --no-tty
-? Remote Path /usr/src/app/backend
-Pod is ready for Remote Development.
-You can find the SSH Config file in /Users/myuser/.bunnyshell/remote-dev/ssh-config
-```
-
-💡 Remember that you can pass in the optional flag `--component {YOUR_COMPONENT_ID}` to skip running the wizard to choose the Component.
-
-Using the SSH config file, you can now configure your IDE to connect remotely to the container, via SSH.  
-🚀 [See how to configure VS Code for Remote Development via SSH](https://documentation.bunnyshell.com/docs/remote-development-configure-vs-code-connection)
-
-Please note that using the Terminal from the IDE, **you must start the application** manually, as you may needed to start the application in a number of ways, eg. with or without debugging.
-
-```
-/usr/src/app/backend # npm run start:dev
-```
-
-📖 For more information on starting a remote Development session, please see:
-- [How to Start Remote Development](https://documentation.bunnyshell.com/docs/remote-development-start)
   - [with remote files](https://documentation.bunnyshell.com/docs/remote-development-remote-files)
 
  
 
 ### Stop a Remote Development session
 
-In order to stop a Remote Development session, you must run the dedicated command from the CLI:
+In order to stop a Remote Development session, you must run the complementary command for `up` from the CLI:
 ```
-bns remote-development down
-```
-
-The CLI will present a wizard, so you can choose your Environment first, then the Component for which you want to stop the session for.  
-You can also pass on the Component ID, to skip the wizard. The full command for starting a session can be copied from the UI: go to the Environment details screen, click the desired Component, then expand the *Component Actions* and select *Remote Development*. Then, you just need to replace `up` with `down.
-
-```
- bns remote-development down --component {YOUR_COMPONENT_ID}
+bns remote-development down --component {YOUR_COMPONENT_ID}
 ```
 
 📖 For more information on stopping a remote Development session, please see:
@@ -173,7 +101,7 @@ The configuration differs based on the way you chose to work, and also on your I
 
  
 
-#### Debugging backend with code from your machine
+#### Debugging backend
 
 When debugging with local code, you need to:
 1. start the Remote Development session with port-forwarding on the debugger's port (`9229` for `nodemon`)
@@ -184,47 +112,17 @@ When debugging with local code, you need to:
 
 For the `api` service, you need to run:
 ```
-$ bns remote-development up --port-forward "9229>9229"
+$ bns remote-development up --component {YOUR_COMPONENT_ID} --port-forward "9229>9229"
 ? Local Path {YOUR_OWN_LOCAL_PATH}}
 ? Remote Path /usr/src/app/backend
 /usr/src/app/backend # npm run start:dev
 ```
-💡 Remember that you can pass in the optional flag `--component {YOUR_COMPONENT_ID}` to skip running the wizard to choose the Component.
 
 You can now add breakpoints and start debugging.
 
 📖 For more information on debugging locally, please see:
 - [Debugging locally with port forwarding](https://documentation.bunnyshell.com/docs/remote-development-debugging)
-  - [Debugging node.js](https://documentation.bunnyshell.com/docs/remote-development-debugging-nodejs) for both `app` and `api`
-
- 
-
-#### Debugging backend with code from the container
-
-When debugging with remote code, you need to:
-1. have the necessary libraries installed in the container image: see [Prepare the container image](https://documentation.bunnyshell.com/docs/remote-development-configure-vs-code-pre-requisites#prepare-the-container-image)
-2. install the necessary IDE extensions (if any): see [Prepare VS Code Extensions](https://documentation.bunnyshell.com/docs/remote-development-configure-vs-code-pre-requisites#prepare-vs-code-extensions)
-3. start the Remote Development session with no code sync, `--sync-mode none` and (optionally) without an interactive shell once the preparation is done `--no-tty` (See "Working with code from the container" from the current Template description)
-4. [configure the IDE SSH connection](https://documentation.bunnyshell.com/docs/remote-development-configure-vs-code-connection)
-5. [start the debug process from your IDE](https://documentation.bunnyshell.com/docs/remote-development-configure-vs-code-debug-nodejs)
-
-For the `api` service, you need to run:
-```
-$ bns remote-development up --sync-mode none --no-tty
-? Remote Path /usr/src/app/backend
-Pod is ready for Remote Development.
-You can find the SSH Config file in /Users/myuser/.bunnyshell/remote-dev/ssh-config
-```
-💡 Remember that you can pass in the optional flag `--component {YOUR_COMPONENT_ID}` to skip running the wizard to choose the Component.
-
-And within the IDE terminal, you need to start the `node` process with debugging capabilities:
-```
-/usr/src/app/backend # npm run start:dev
-```
-
-You can now add breakpoints and start debugging.
-
-📖 For more information on debugging remotely, please see:
+  - [Debugging node.js](https://documentation.bunnyshell.com/docs/remote-development-debugging-nodejs) for both `frontend` and `api`
 - [Debugging remotely with VS Code](https://documentation.bunnyshell.com/docs/remote-development-configure-vs-code)
 
  

.bunnyshell/templates/express-angular-postgres/bunnyshell.yaml

@@ -14,7 +14,7 @@ components:
                 dockerfile: .docker/Dockerfile
                 target: dev
             environment:
-                FRONTEND_URL: 'https://{{ components.app.ingress.hosts[0] }}'
+                FRONTEND_URL: 'https://{{ components.frontend.ingress.hosts[0].hostname }}'
                 POSTGRES_DB: bunny_books
                 POSTGRES_HOST: db
                 POSTGRES_PASSWORD: need-to-replace
@@ -44,7 +44,7 @@ components:
                 subPath: ''
     -
         kind: Application
-        name: app
+        name: frontend
         gitRepo: 'https://github.com/bunnyshell/templates.git'
         gitBranch: angular-books-app/v0.3.0
         gitApplicationPath: components/angular-books-app
@@ -60,7 +60,7 @@ components:
                     reservations:
                         memory: 1G
             environment:
-                API_URL: 'https://{{ components.api.ingress.hosts[0] }}'
+                API_URL: 'https://{{ components.api.ingress.hosts[0].hostname }}'
             labels:
                 kompose.service.healthcheck.readiness.test: 'CMD sh -c "wget --no-verbose --tries=1 --spider http://127.0.0.1:8080 || exit 1"'
                 kompose.service.healthcheck.readiness.interval: 15s
@@ -79,3 +79,14 @@ volumes:
         name: data-volume
         size: 1Gi
         type: disk
+dev:
+    api:
+        -
+            containers:
+                api:
+                    remoteDevProfile: api
+    frontend:
+        -
+            containers:
+                frontend:
+                    remoteDevProfile: frontend

.bunnyshell/templates/express-angular-postgres/template.yaml

@@ -2,6 +2,7 @@ name: Express + Angular + PostgreSQL
 description: This is a boilerplate for creating a new environment using Node, Express, Angular and PostgreSQL. It contains a basic CRUD example to demonstrate how components connect and make it easy to start with.
 tags: [ nodejs, express, angular, typescript, postgres ]
 icons: [ nodejs, express, angular, typescript, postgres ]
+categories: [ framework ]
 stack:
   packages:
     - name: Node.js