@@ -56,7 +56,6 @@ import {
56
56
import { AddDomain } from "./add-domain" ;
57
57
import { humanizeString } from "~/shared/string-utils" ;
58
58
import { trpcClient , nativeClient } from "~/shared/trpc/trpc-client" ;
59
- import { isFeatureEnabled } from "@webstudio-is/feature-flags" ;
60
59
import type { Templates } from "@webstudio-is/sdk" ;
61
60
import DomainCheckbox , { domainToPublishName } from "./domain-checkbox" ;
62
61
import { CopyToClipboard } from "~/builder/shared/copy-to-clipboard" ;
@@ -641,30 +640,38 @@ const Content = (props: {
641
640
) ;
642
641
} ;
643
642
644
- const deployTargets = {
645
- vanilla : {
643
+ type DeployTarget = {
644
+ docs ?: string ;
645
+ command ?: string ;
646
+ ssgTemplates ?: Templates [ ] ;
647
+ } ;
648
+
649
+ const deployTargets : Record < string , DeployTarget > = {
650
+ docker : {
651
+ docs : "https://docs.docker.com" ,
646
652
command : `
647
- npm install
648
- npm run dev
653
+ docker build -t my-image .
654
+ docker run my-image
649
655
` ,
650
- docs : "https://remix.run/" ,
656
+ } ,
657
+ static : {
651
658
ssgTemplates : [ "ssg" ] ,
652
659
} ,
653
660
vercel : {
654
- command : "npx vercel@latest" ,
655
661
docs : "https://vercel.com/docs/cli" ,
662
+ command : "npx vercel@latest" ,
656
663
ssgTemplates : [ "ssg-vercel" ] ,
657
664
} ,
658
665
netlify : {
666
+ docs : "https://docs.netlify.com/cli/get-started/" ,
659
667
command : `
660
668
npx netlify-cli@latest login
661
669
npx netlify-cli sites:create
662
670
npx netlify-cli build
663
671
npx netlify-cli deploy` ,
664
- docs : "https://docs.netlify.com/cli/get-started/" ,
665
672
ssgTemplates : [ "ssg-netlify" ] ,
666
673
} ,
667
- } as const ;
674
+ } ;
668
675
669
676
type DeployTargets = keyof typeof deployTargets ;
670
677
@@ -673,7 +680,7 @@ const isDeployTargets = (value: string): value is DeployTargets =>
673
680
674
681
const ExportContent = ( props : { projectId : Project [ "id" ] } ) => {
675
682
const npxCommand = "npx webstudio@latest" ;
676
- const [ deployTarget , setDeployTarget ] = useState < DeployTargets > ( "vanilla " ) ;
683
+ const [ deployTarget , setDeployTarget ] = useState < DeployTargets > ( "docker " ) ;
677
684
678
685
return (
679
686
< Grid columns = { 1 } gap = { 3 } css = { { padding : theme . panel . padding } } >
@@ -698,152 +705,151 @@ const ExportContent = (props: { projectId: Project["id"] }) => {
698
705
</ Grid >
699
706
</ Grid >
700
707
701
- < Grid columns = { 1 } gap = { 1 } >
702
- { isFeatureEnabled ( "staticExport" ) && (
703
- < >
704
- < PublishStatic
705
- projectId = { props . projectId }
706
- templates = { deployTargets [ deployTarget ] . ssgTemplates }
707
- />
708
- < div />
709
- < Text color = "subtle" >
710
- Learn about deploying static sites{ " " }
711
- < Link
712
- variant = "inherit"
713
- color = "inherit"
714
- href = "https://wstd.us/ssg"
715
- target = "_blank"
716
- rel = "noreferrer"
717
- >
718
- here
719
- </ Link >
720
- </ Text >
721
-
722
- < div />
723
- < div />
724
- < Grid
725
- gap = { 2 }
726
- align = { "center" }
727
- css = { {
728
- gridTemplateColumns : `1fr auto 1fr` ,
729
- } }
730
- >
731
- < Separator css = { { alignSelf : "unset" } } />
732
- < Text color = "main" > CLI</ Text >
733
- < Separator css = { { alignSelf : "unset" } } />
734
- </ Grid >
735
- </ >
736
- ) }
737
-
738
- < Text color = "main" variant = "labelsTitleCase" >
739
- Step 1
740
- </ Text >
741
- < Text color = "subtle" >
742
- Download and install Node v20+ from{ " " }
743
- < Link
744
- variant = "inherit"
745
- color = "inherit"
746
- href = "https://nodejs.org/"
747
- target = "_blank"
748
- rel = "noreferrer"
749
- >
750
- nodejs.org
751
- </ Link > { " " }
752
- or with{ " " }
753
- < Link
754
- variant = "inherit"
755
- color = "inherit"
756
- href = "https://nodejs.org/en/download/package-manager"
757
- target = "_blank"
758
- rel = "noreferrer"
759
- >
760
- a package manager
761
- </ Link >
762
- .
763
- </ Text >
764
- </ Grid >
765
-
766
- < Grid columns = { 1 } gap = { 2 } >
708
+ { deployTargets [ deployTarget ] . ssgTemplates && (
767
709
< Grid columns = { 1 } gap = { 1 } >
768
- < Text color = "main" variant = "labelsTitleCase" >
769
- Step 2
770
- </ Text >
771
- < Text color = "subtle" >
772
- Run this command in your Terminal to install Webstudio CLI and sync
773
- your project.
774
- </ Text >
775
- </ Grid >
776
-
777
- < Flex gap = { 2 } >
778
- < InputField
779
- css = { { flex : 1 } }
780
- text = "mono"
781
- readOnly
782
- value = { npxCommand }
710
+ < PublishStatic
711
+ projectId = { props . projectId }
712
+ templates = { deployTargets [ deployTarget ] . ssgTemplates }
783
713
/>
784
-
785
- < CopyToClipboard text = { npxCommand } >
786
- < Button type = "button" color = "neutral" prefix = { < CopyIcon /> } >
787
- Copy
788
- </ Button >
789
- </ CopyToClipboard >
790
- </ Flex >
791
- </ Grid >
792
- < Grid columns = { 1 } gap = { 2 } >
793
- < Grid columns = { 1 } gap = { 1 } >
794
- < Text color = "main" variant = "labelsTitleCase" >
795
- Step 3
796
- </ Text >
714
+ < div />
797
715
< Text color = "subtle" >
798
- Run this command to publish to { " " }
716
+ Learn about deploying static sites { " " }
799
717
< Link
800
718
variant = "inherit"
801
719
color = "inherit"
802
- href = { deployTargets [ deployTarget ] . docs }
720
+ href = "https://wstd.us/ssg"
803
721
target = "_blank"
804
722
rel = "noreferrer"
805
723
>
806
- { humanizeString ( deployTarget ) }
807
- </ Link > { " " }
724
+ here
725
+ </ Link >
808
726
</ Text >
809
727
</ Grid >
810
-
811
- < Flex gap = { 2 } align = "end" >
812
- < TextArea
813
- css = { { flex : 1 } }
814
- variant = "mono"
815
- readOnly
816
- value = { stripIndent ( deployTargets [ deployTarget ] . command )
817
- . trimStart ( )
818
- . replace ( / + $ / , "" ) }
819
- />
820
-
821
- < CopyToClipboard text = { deployTargets [ deployTarget ] . command } >
822
- < Button
823
- type = "button"
824
- css = { { flexShrink : 0 } }
825
- color = "neutral"
826
- prefix = { < CopyIcon /> }
827
- >
828
- Copy
829
- </ Button >
830
- </ CopyToClipboard >
831
- </ Flex >
832
- </ Grid >
833
- < Grid columns = { 1 } gap = { 1 } >
834
- < Text color = "subtle" >
835
- Read the detailed documentation{ " " }
836
- < Link
837
- variant = "inherit"
838
- color = "inherit"
839
- href = "https://wstd.us/cli"
840
- target = "_blank"
841
- rel = "noreferrer"
728
+ ) }
729
+
730
+ { deployTargets [ deployTarget ] . command && (
731
+ < Grid columns = { 1 } gap = { 2 } >
732
+ < Grid
733
+ gap = { 2 }
734
+ align = { "center" }
735
+ css = { {
736
+ gridTemplateColumns : `1fr auto 1fr` ,
737
+ } }
842
738
>
843
- here
844
- </ Link >
845
- </ Text >
846
- </ Grid >
739
+ < Separator css = { { alignSelf : "unset" } } />
740
+ < Text color = "main" > CLI</ Text >
741
+ < Separator css = { { alignSelf : "unset" } } />
742
+ </ Grid >
743
+ < Grid columns = { 1 } gap = { 1 } >
744
+ < Text color = "main" variant = "labelsTitleCase" >
745
+ Step 1
746
+ </ Text >
747
+ < Text color = "subtle" >
748
+ Download and install Node v20+ from{ " " }
749
+ < Link
750
+ variant = "inherit"
751
+ color = "inherit"
752
+ href = "https://nodejs.org/"
753
+ target = "_blank"
754
+ rel = "noreferrer"
755
+ >
756
+ nodejs.org
757
+ </ Link > { " " }
758
+ or with{ " " }
759
+ < Link
760
+ variant = "inherit"
761
+ color = "inherit"
762
+ href = "https://nodejs.org/en/download/package-manager"
763
+ target = "_blank"
764
+ rel = "noreferrer"
765
+ >
766
+ a package manager
767
+ </ Link >
768
+ .
769
+ </ Text >
770
+ </ Grid >
771
+
772
+ < Grid columns = { 1 } gap = { 2 } >
773
+ < Grid columns = { 1 } gap = { 1 } >
774
+ < Text color = "main" variant = "labelsTitleCase" >
775
+ Step 2
776
+ </ Text >
777
+ < Text color = "subtle" >
778
+ Run this command in your Terminal to install Webstudio CLI and
779
+ sync your project.
780
+ </ Text >
781
+ </ Grid >
782
+ < Flex gap = { 2 } >
783
+ < InputField
784
+ css = { { flex : 1 } }
785
+ text = "mono"
786
+ readOnly
787
+ value = { npxCommand }
788
+ />
789
+ < CopyToClipboard text = { npxCommand } >
790
+ < Button type = "button" color = "neutral" prefix = { < CopyIcon /> } >
791
+ Copy
792
+ </ Button >
793
+ </ CopyToClipboard >
794
+ </ Flex >
795
+ </ Grid >
796
+
797
+ < Grid columns = { 1 } gap = { 2 } >
798
+ < Grid columns = { 1 } gap = { 1 } >
799
+ < Text color = "main" variant = "labelsTitleCase" >
800
+ Step 3
801
+ </ Text >
802
+ < Text color = "subtle" >
803
+ Run this command to publish to{ " " }
804
+ < Link
805
+ variant = "inherit"
806
+ color = "inherit"
807
+ href = { deployTargets [ deployTarget ] . docs }
808
+ target = "_blank"
809
+ rel = "noreferrer"
810
+ >
811
+ { humanizeString ( deployTarget ) }
812
+ </ Link > { " " }
813
+ </ Text >
814
+ </ Grid >
815
+ < Flex gap = { 2 } align = "end" >
816
+ < TextArea
817
+ css = { { flex : 1 } }
818
+ variant = "mono"
819
+ readOnly
820
+ value = { stripIndent ( deployTargets [ deployTarget ] . command )
821
+ . trimStart ( )
822
+ . replace ( / + $ / , "" ) }
823
+ />
824
+ < CopyToClipboard text = { deployTargets [ deployTarget ] . command } >
825
+ < Button
826
+ type = "button"
827
+ css = { { flexShrink : 0 } }
828
+ color = "neutral"
829
+ prefix = { < CopyIcon /> }
830
+ >
831
+ Copy
832
+ </ Button >
833
+ </ CopyToClipboard >
834
+ </ Flex >
835
+ </ Grid >
836
+
837
+ < Grid columns = { 1 } gap = { 1 } >
838
+ < Text color = "subtle" >
839
+ Read the detailed documentation{ " " }
840
+ < Link
841
+ variant = "inherit"
842
+ color = "inherit"
843
+ href = "https://wstd.us/cli"
844
+ target = "_blank"
845
+ rel = "noreferrer"
846
+ >
847
+ here
848
+ </ Link >
849
+ </ Text >
850
+ </ Grid >
851
+ </ Grid >
852
+ ) }
847
853
</ Grid >
848
854
) ;
849
855
} ;
0 commit comments