refactor!: remove react frontend + re-enable disabled integration tests (backport #4744) (#4756)

* refactor!: remove react frontend + re-enable disabled integration tests (#4744)

* refactor!: remove react frontend + re-enable disabled integration tests

* deprecate command and no-op it

* lint

* bump web to v1.0.8

* remove hooks

* improvements

* update index.ts.tpl

* fix

* improve ux

* add pnpm instructions

* fixes

* fix integration test

* rename

* uncomment other test

* updates

---------

Co-authored-by: Danilo Pantani <danpantani@gmail.com>
(cherry picked from commit d1bf508)

# Conflicts:
#	docs/docs/03-clients/04-react.md
#	go.mod
#	go.sum
#	ignite/cmd/generate.go
#	ignite/cmd/generate_hooks.go
#	ignite/cmd/scaffold_react.go
#	ignite/config/chain/base/config.go
#	ignite/config/chain/config.go
#	ignite/pkg/cosmosgen/cosmosgen.go
#	ignite/services/chain/generate.go
#	ignite/services/scaffolder/scaffolder.go
#	integration/app.go
#	integration/client.go
#	integration/cosmosgen/bank_module_test.go
#	integration/cosmosgen/cosmosgen_composables_test.go
#	integration/cosmosgen/cosmosgen_hooks_test.go
#	integration/cosmosgen/custom_module_test.go

* conflicts

* conflicts

* up

* update

---------

Co-authored-by: julienrbrt <julien@rbrt.fr>

Author: mergify[bot]

changelog.md

@@ -13,7 +13,7 @@
 
 - [#4686](https://github.com/ignite/cli/pull/4686) Filter discovered protos to only messages.
 - [#4691](https://github.com/ignite/cli/pull/4691), [#4706](https://github.com/ignite/cli/pull/4706), [#4725](https://github.com/ignite/cli/pull/4725), [#4737](https://github.com/ignite/cli/pull/4737) Fix ts-client query template and solely Go template for `ts-client` generation.
-- [#4742](https://github.com/ignite/cli/pull/4742) Updates Vue composables template for new ts-client and tanstack/vue-query v5
+- [#4744](https://github.com/ignite/cli/pull/4744) Remove `react` frontend generation via `s react` command. Use the [Ignite CCA App](https://github.com/ignite/apps) instead.
 
 ## [`v28.10.0`](https://github.com/ignite/cli/releases/tag/v28.10.0)
 

docs/docs/03-clients/03-vue.md

@@ -94,20 +94,22 @@ purposes, but you should not do this in production.
 
 In the `example` directory run the following command to start your blockchain:
 
-```
+```bash
 ignite chain serve
 ```
 
 To start your Vue application, go to the `vue` directory and run the following
 command in a separate terminal window:
 
-```
-npm install && npm run dev
+:::note
+Make sure you have [pnpm](https://pnpm.io/) installed.
+:::
+
+```bash
+pnpm install && pnpm dev
 ```
 
-It is recommended to run `npm install` before starting your app with `npm run
-dev` to ensure that all dependencies are installed (including the ones that the
-API client has, see `vue/postinstall.js`).
+It is recommended to run `pnpm install` before starting your app with `pnpm dev` to ensure that all dependencies are installed (including the ones that the API client has, see `vue/postinstall.js`).
 
 Open your browser and navigate to
 [http://localhost:5173/](http://localhost:5173/).

go.mod

@@ -56,7 +56,7 @@ require (
 	github.com/hashicorp/go-plugin v1.6.0
 	github.com/iancoleman/strcase v0.3.0
 	github.com/ignite/ignite-files/protoc v0.0.1
-	github.com/ignite/web v0.6.1
+	github.com/ignite/web v1.0.8
 	github.com/imdario/mergo v0.3.13
 	github.com/jpillora/chisel v1.9.1
 	github.com/lib/pq v1.10.9

go.sum

@@ -835,8 +835,8 @@ github.com/ianlancetaylor/demangle v0.0.0-20210905161508-09a460cdf81d/go.mod h1:
 github.com/ianlancetaylor/demangle v0.0.0-20230524184225-eabc099b10ab/go.mod h1:gx7rwoVhcfuVKG5uya9Hs3Sxj7EIvldVofAWIUtGouw=
 github.com/ignite/ignite-files/protoc v0.0.1 h1:wXxU1dzruUgSVl1diAuAOA+xv0NQKXJFsDWht2+tAP8=
 github.com/ignite/ignite-files/protoc v0.0.1/go.mod h1:cVCHJbEHPIeKHMPk3ZoPS0Xw4XQfUc76BAMAPU9Fwjg=
-github.com/ignite/web v0.6.1 h1:kHG+T7NnR8cCPjAGxEFQD+njVYM08toeG57iYRXzpwo=
-github.com/ignite/web v0.6.1/go.mod h1:WZWBaBYF8RazN7dE462BLpvXDY8ScacxcJ07BKwX/jY=
+github.com/ignite/web v1.0.8 h1:St3L6UJj70+h16+No5em8Vn2Hx93tS2G1MyWO/Kt1cc=
+github.com/ignite/web v1.0.8/go.mod h1:WZWBaBYF8RazN7dE462BLpvXDY8ScacxcJ07BKwX/jY=
 github.com/imdario/mergo v0.3.12/go.mod h1:jmQim1M+e3UYxmgPu/WyfjB3N3VflVyUjjjwH0dnCYA=
 github.com/imdario/mergo v0.3.13 h1:lFzP57bqS/wsqKssCGmtLAb8A0wKjLGrve2q3PPVcBk=
 github.com/imdario/mergo v0.3.13/go.mod h1:4lJ1jqUDcsbIECGy0RUJAXNIhg+6ocWgb1ALK2O4oXg=

ignite/cmd/generate.go

@@ -36,7 +36,6 @@ meant to be edited by hand.
 	c.AddCommand(NewGenerateTSClient())
 	c.AddCommand(NewGenerateVuex())
 	c.AddCommand(NewGenerateComposables())
-	c.AddCommand(NewGenerateHooks())
 	c.AddCommand(NewGenerateOpenAPI())
 
 	return c

ignite/cmd/generate_hooks.go

@@ -2,37 +2,14 @@ package ignitecmd
 
 import (
 	"github.com/spf13/cobra"
-
-	chainconfig "github.com/ignite/cli/v28/ignite/config/chain"
-	"github.com/ignite/cli/v28/ignite/pkg/cliui"
-	"github.com/ignite/cli/v28/ignite/pkg/cosmosgen"
 )
 
 // NewScaffoldReact scaffolds a React app for a chain.
 func NewScaffoldReact() *cobra.Command {
 	c := &cobra.Command{
-		Hidden:  true, // hidden util we have a better ts-client.
-		Use:     "react",
-		Short:   "React web app template",
-		Args:    cobra.NoArgs,
-		PreRunE: migrationPreRunHandler,
-		RunE:    scaffoldReactHandler,
+		Use:        "react",
+		Deprecated: "the React scaffolding feature is removed from Ignite CLI.\nPlease use the Ignite CCA app to create a React app.\nFor more information, visit: https://ignite.com/marketplace/CCA",
 	}
 
-	c.Flags().AddFlagSet(flagSetYes())
-	c.Flags().StringP(flagPath, "p", "./"+chainconfig.DefaultReactPath, "path to scaffold content of the React app")
-
 	return c
 }
-
-func scaffoldReactHandler(cmd *cobra.Command, _ []string) error {
-	session := cliui.New(cliui.StartSpinnerWithText(statusScaffolding))
-	defer session.End()
-
-	path := flagGetPath(cmd)
-	if err := cosmosgen.React(path); err != nil {
-		return err
-	}
-
-	return session.Printf("\n🎉 Scaffolded a React app in %s.\n\n", path)
-}

ignite/cmd/scaffold_react.go

@@ -1,6 +1,8 @@
 package ignitecmd
 
 import (
+	"path/filepath"
+
 	"github.com/spf13/cobra"
 
 	chainconfig "github.com/ignite/cli/v28/ignite/config/chain"
@@ -11,7 +13,7 @@ import (
 // NewScaffoldVue scaffolds a Vue.js app for a chain.
 func NewScaffoldVue() *cobra.Command {
 	c := &cobra.Command{
-		Hidden:  true, // hidden util we have a better ts-client.
+		Hidden:  true,
 		Use:     "vue",
 		Short:   "Vue 3 web app template",
 		Args:    cobra.NoArgs,
@@ -20,7 +22,6 @@ func NewScaffoldVue() *cobra.Command {
 	}
 
 	c.Flags().AddFlagSet(flagSetYes())
-	c.Flags().StringP(flagPath, "p", "./"+chainconfig.DefaultVuePath, "path to scaffold content of the Vue.js app")
 
 	return c
 }
@@ -29,7 +30,7 @@ func scaffoldVueHandler(cmd *cobra.Command, _ []string) error {
 	session := cliui.New(cliui.StartSpinnerWithText(statusScaffolding))
 	defer session.End()
 
-	path := flagGetPath(cmd)
+	path := filepath.Join(".", chainconfig.DefaultVuePath)
 	if err := cosmosgen.Vue(path); err != nil {
 		return err
 	}

ignite/cmd/scaffold_vue.go

@@ -63,9 +63,6 @@ type Client struct {
 	// Composables configures code generation for Vue 3 composables.
 	Composables Composables `yaml:"composables,omitempty"`
 
-	// Hooks configures code generation for React hooks.
-	Hooks Hooks `yaml:"hooks,omitempty"`
-
 	// OpenAPI configures OpenAPI spec generation for API.
 	OpenAPI OpenAPI `yaml:"openapi,omitempty"`
 }
@@ -90,12 +87,6 @@ type Composables struct {
 	Path string `yaml:"path"`
 }
 
-// Hooks configures code generation for react-query hooks.
-type Hooks struct {
-	// Path configures out location for generated vue-query hooks.
-	Path string `yaml:"path"`
-}
-
 // OpenAPI configures OpenAPI spec generation for API.
 type OpenAPI struct {
 	Path string `yaml:"path"`

ignite/config/chain/base/config.go

@@ -26,10 +26,6 @@ var (
 	// The path is relative to the app's directory.
 	DefaultVuePath = "vue"
 
-	// DefaultReactPath defines the default relative path to use when scaffolding a React app.
-	// The path is relative to the app's directory.
-	DefaultReactPath = "react"
-
 	// DefaultVuexPath defines the default relative path to use when generating Vuex stores for a Vue app.
 	// The path is relative to the app's directory.
 	DefaultVuexPath = "vue/src/store"
@@ -38,9 +34,8 @@ var (
 	// The path is relative to the app's directory.
 	DefaultComposablesPath = "vue/src/composables"
 
-	// DefaultHooksPath defines the default relative path to use when generating useQuery hooks for a React app.
-	// The path is relative to the app's directory.
-	DefaultHooksPath = "react/src/hooks"
+	// DefaultVueTypesPath defines the default vue types path.
+	DefaultVueTypesPath = "vue/src/views/Types.vue"
 
 	// DefaultOpenAPIPath defines the default relative path to use when generating an OpenAPI schema.
 	// The path is relative to the app's directory.
@@ -112,16 +107,6 @@ func ComposablesPath(conf *Config) string {
 	return DefaultComposablesPath
 }
 
-// HooksPath returns the relative path to the React useQuery hooks directory.
-// Path is relative to the app's directory.
-func HooksPath(conf *Config) string {
-	if path := strings.TrimSpace(conf.Client.Hooks.Path); path != "" {
-		return filepath.Clean(path)
-	}
-
-	return DefaultHooksPath
-}
-
 // LocateDefault locates the default path for the config file.
 // Returns ErrConfigNotFound when no config file found.
 func LocateDefault(root string) (path string, err error) {