Add vue and angular frontend parts

Author: Vic Shóstak

.goreleaser.yml

@@ -23,7 +23,6 @@ builds:
       - CGO_ENABLED=0
 
 dockers:
-  # You can have multiple Docker images.
   - # GOOS of the built binary that should be used.
     goos: linux
     goarch: amd64
@@ -42,10 +41,10 @@ dockers:
       - "koddr/cgapp:{{ .Major }}.{{ .Minor }}.{{ .Patch }}"
       - "koddr/cgapp:{{ .Major }}.{{ .Minor }}"
       - "koddr/cgapp:{{ .Major }}"
-      - "koddr/cgapp-deploy:latest"
+      - "koddr/cgapp:latest"
 
     # Path to the Dockerfile (from the project root).
-    dockerfile: Dockerfile.deploy
+    dockerfile: Dockerfile
 
 archives:
   - # Replacements for GOOS and GOARCH in the archive name.

Dockerfile

@@ -2,14 +2,14 @@ FROM alpine:3.12
 
 LABEL maintainer="Vic Shóstak <[email protected]>"
 
-# Copy Create Go App binary
+# Copy Create Go App binary.
 COPY cgapp /cgapp
 
-# Install git
+# Install git, npm.
 RUN apk add --no-cache git npm
 
-# Install frontend CLIs
+# Install frontend CLIs.
 RUN npm i -g -s create-react-app preact-cli @vue/cli degit @angular/cli
 
-# Set entry point to /cgapp
+# Set entry point.
 ENTRYPOINT ["/cgapp"]

README.md

@@ -4,7 +4,7 @@
 </h1>
 <p align="center">Create a new production-ready project with <b>backend</b> (Golang), <b>frontend</b> (JavaScript, TypeScript)<br/>and <b>deploy automation</b> (Ansible, Docker) by running one CLI command.<br/><br/>Focus on <b>writing</b> code and <b>thinking</b> of business-logic! The CLI will take care of the rest.</p>
 
-<p align="center"><a href="https://github.com/create-go-app/cli/releases" target="_blank"><img src="https://img.shields.io/badge/version-v1.4.1-blue?style=for-the-badge&logo=none" alt="cli version" /></a>&nbsp;<a href="https://pkg.go.dev/github.com/create-go-app/cli?tab=doc" target="_blank"><img src="https://img.shields.io/badge/Go-1.11+-00ADD8?style=for-the-badge&logo=go" alt="go version" /></a>&nbsp;<a href="https://gocover.io/github.com/create-go-app/cli/pkg/cgapp" target="_blank"><img src="https://img.shields.io/badge/Go_Cover-94%25-success?style=for-the-badge&logo=none" alt="go cover" /></a>&nbsp;<a href="https://goreportcard.com/report/github.com/create-go-app/cli" target="_blank"><img src="https://img.shields.io/badge/Go_report-A+-success?style=for-the-badge&logo=none" alt="go report" /></a>&nbsp;<img src="https://img.shields.io/badge/license-apache_2.0-red?style=for-the-badge&logo=none" alt="license" /></p>
+<p align="center"><a href="https://github.com/create-go-app/cli/releases" target="_blank"><img src="https://img.shields.io/badge/version-v1.5.0-blue?style=for-the-badge&logo=none" alt="cli version" /></a>&nbsp;<a href="https://pkg.go.dev/github.com/create-go-app/cli?tab=doc" target="_blank"><img src="https://img.shields.io/badge/Go-1.11+-00ADD8?style=for-the-badge&logo=go" alt="go version" /></a>&nbsp;<a href="https://gocover.io/github.com/create-go-app/cli/pkg/cgapp" target="_blank"><img src="https://img.shields.io/badge/Go_Cover-94%25-success?style=for-the-badge&logo=none" alt="go cover" /></a>&nbsp;<a href="https://goreportcard.com/report/github.com/create-go-app/cli" target="_blank"><img src="https://img.shields.io/badge/Go_report-A+-success?style=for-the-badge&logo=none" alt="go report" /></a>&nbsp;<img src="https://img.shields.io/badge/license-apache_2.0-red?style=for-the-badge&logo=none" alt="license" /></p>
 
 ## ⚡️ [Quick start](https://create-go.app/quick-start/)
 
@@ -96,19 +96,27 @@ cgapp init
 project:
   # Backend for your project.
   # (Required)
-  # String: `net/http`, `fiber`, `echo`, `gin`
+  # String:
+  #   - `net/http`
+  #   - `fiber`
+  #   - `echo`
+  #   - `gin`
   # User template: supported, set to URL (without protocol),
   # like `github.com/user/template`
   - backend: fiber
 
   # Frontend for your project.
   # (Optional, to skip set to `none`)
   # String:
-  #   - `react`, `react:<template>`
-  #   - `preact`, `preact:<template>`
+  #   - `react`
+  #     - `react:<template>`
+  #   - `preact`
+  #     - `preact:<template>`
   #   - `vue`
-  #   - `svelte`
+  #     - `vue:<user/repo>` (for preset from GitHub)
+  #     - `vue:<gitlab|bitbucket>:<user/repo>` (for presets from others)
   #   - `angular`
+  #   - `svelte`
   # User template: supported, set to URL (without protocol),
   # like `github.com/user/template`
   - frontend: svelte
@@ -131,7 +139,7 @@ project:
 roles:
   # Ansible roles for deploy your project.
   # (Optional, to skip set to empty or comment)
-  # Objects list: `deploy`
+  # Objects list.
   - deploy:
     # Username of remote's server or local's user.
     # (Required)

cmd/create.go

@@ -172,6 +172,15 @@ var runCreateCmd = func(cmd *cobra.Command, args []string) {
 			cgapp.SendMsg(true, "[ERROR]", err.Error(), "red", true)
 			os.Exit(1)
 		}
+
+		// Create Dockerfile for frontend.
+		filesToMake := map[string][]byte{
+			"frontend/Dockerfile": embed.Get("/Dockerfile.frontend"),
+		}
+		if err := cgapp.MakeFiles(currentDir, filesToMake); err != nil {
+			cgapp.SendMsg(true, "[ERROR]", err.Error(), "red", true)
+			os.Exit(1)
+		}
 	}
 
 	// Docker containers.

configs/.cgapp.yml

@@ -6,19 +6,27 @@
 project:
   # Backend for your project.
   # (Required)
-  # String: `net/http`, `fiber`, `echo`, `gin`
+  # String:
+  #   - `net/http`
+  #   - `fiber`
+  #   - `echo`
+  #   - `gin`
   # User template: supported, set to URL (without protocol),
   # like `github.com/user/template`
   - backend: fiber
 
   # Frontend for your project.
   # (Optional, to skip set to `none`)
   # String:
-  #   - `react`, `react:<template>`
-  #   - `preact`, `preact:<template>`
+  #   - `react`
+  #     - `react:<template>`
+  #   - `preact`
+  #     - `preact:<template>`
   #   - `vue`
-  #   - `svelte`
+  #     - `vue:<user/repo>` (for preset from GitHub)
+  #     - `vue:<gitlab|bitbucket>:<user/repo>` (for presets from others)
   #   - `angular`
+  #   - `svelte`
   # User template: supported, set to URL (without protocol),
   # like `github.com/user/template`
   - frontend: svelte
@@ -41,7 +49,7 @@ project:
 roles:
   # Ansible roles for deploy your project.
   # (Optional, to skip set to empty or comment)
-  # Objects list: `deploy`
+  # Objects list.
   - deploy:
     # Username of remote's server or local's user.
     # (Required)

configs/Dockerfile.frontend

@@ -0,0 +1,17 @@
+FROM node:14-alpine AS builder
+
+LABEL maintainer="Vic Shóstak <[email protected]>"
+
+# Go to work directory.
+WORKDIR /build
+
+# Copy all needed files to /build folder.
+COPY package*.json src ./
+
+# Install frontend dependencies and run build.
+RUN npm ci -s --only=production && npm run build
+
+FROM scratch
+
+# Copy builded files to container root.
+COPY --from=builder /build/dist /

pkg/cgapp/create.go

@@ -134,6 +134,20 @@ func CreateProjectFromCmd(p *registry.Project, c map[string]*registry.Command, m
 				options = []string{create, project[1], p.Type, args["cwd"], p.RootFolder, args["name"], "cgapp"}
 			}
 			break
+		case "vue":
+			// vue create [options] <app-name>
+			options = []string{create, "--default", "--bare", p.Type}
+			if len(project) == 2 {
+				options = []string{create, "--preset", project[1], "--bare", p.Type}
+			}
+			if len(project) == 3 {
+				options = []string{create, "--preset", project[1] + ":" + project[2], "--bare", "--clone", p.Type}
+			}
+			break
+		case "angular":
+			// ng new <app-name> [options]
+			options = []string{create, "cgapp", "--defaults", "--routing", "--directory", p.Type}
+			break
 		case "svelte":
 			// npx degit [template] [dest]
 			options = []string{create, args["template"], folder}

pkg/cgapp/create_test.go

@@ -173,7 +173,7 @@ func TestCreateProjectFromCmd(t *testing.T) {
 		wantErr bool
 	}{
 		{
-			"successfully create react",
+			"successfully create react:redux",
 			args{
 				p: &registry.Project{
 					Type:       "frontend",
@@ -210,6 +210,63 @@ func TestCreateProjectFromCmd(t *testing.T) {
 			},
 			false,
 		},
+		{
+			"successfully create vue (with mock for GitHub)",
+			args{
+				p: &registry.Project{
+					Type:       "frontend",
+					Name:       "vue:mock",
+					RootFolder: "../../tmp",
+				},
+				c: map[string]*registry.Command{
+					"vue": {
+						Runner: "echo",
+						Create: "vue",
+						Args:   map[string]string{},
+					},
+				},
+				m: registry.RegexpFrontendPattern,
+			},
+			false,
+		},
+		{
+			"successfully create vue (with mock for others)",
+			args{
+				p: &registry.Project{
+					Type:       "frontend",
+					Name:       "vue:mock:mock",
+					RootFolder: "../../tmp",
+				},
+				c: map[string]*registry.Command{
+					"vue": {
+						Runner: "echo",
+						Create: "vue",
+						Args:   map[string]string{},
+					},
+				},
+				m: registry.RegexpFrontendPattern,
+			},
+			false,
+		},
+		{
+			"successfully create angular",
+			args{
+				p: &registry.Project{
+					Type:       "frontend",
+					Name:       "angular",
+					RootFolder: "../../tmp",
+				},
+				c: map[string]*registry.Command{
+					"angular": {
+						Runner: "echo",
+						Create: "angular",
+						Args:   map[string]string{},
+					},
+				},
+				m: registry.RegexpFrontendPattern,
+			},
+			false,
+		},
 		{
 			"successfully create svelte",
 			args{

pkg/embed/blob.go

@@ -30,13 +30,13 @@ import "github.com/AlecAivazis/survey/v2"
 
 const (
 	// CLIVersion version of Create Go App CLI.
-	CLIVersion = "1.4.1"
+	CLIVersion = "1.5.0"
 	// RegexpAnsiblePattern pattern for Ansible roles.
 	RegexpAnsiblePattern = "^(deploy)$"
 	// RegexpBackendPattern pattern for backend.
 	RegexpBackendPattern = "^(net/http|fiber|echo)$"
 	// RegexpFrontendPattern pattern for backend.
-	RegexpFrontendPattern = "^(p?react:?|vue|angular|svelte)"
+	RegexpFrontendPattern = "^(p?react:?|vue(:?[\\w]+)?(:?[\\w-_0-9\\/]+)?|angular|svelte)"
 	// RegexpWebServerPattern pattern for web/proxy servers.
 	RegexpWebServerPattern = "^(nginx)$"
 	// RegexpDatabasePattern pattern for databases.
@@ -132,6 +132,16 @@ var (
 				"name": "--name",
 			},
 		},
+		"vue": {
+			Runner: "vue",
+			Create: "create",
+			Args:   map[string]string{},
+		},
+		"angular": {
+			Runner: "ng",
+			Create: "new",
+			Args:   map[string]string{},
+		},
 		"svelte": {
 			Runner: "npx",
 			Create: "degit",
@@ -156,7 +166,7 @@ var (
 			Name: "frontend",
 			Prompt: &survey.Select{
 				Message: "Choose a frontend UI library:",
-				Options: []string{"none", "React", "Preact", "Svelte"},
+				Options: []string{"none", "React", "Preact", "Vue", "Angular", "Svelte"},
 				Default: "none",
 			},
 		},