webstudio 0.105.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +661 -0
- package/README.md +145 -0
- package/bin.js +5 -0
- package/lib/cli.js +875 -0
- package/package.json +54 -0
- package/templates/defaults/app/constants.mjs +13 -0
- package/templates/defaults/app/root.tsx +1 -0
- package/templates/defaults/package.json +34 -0
- package/templates/defaults/public/favicon.ico +0 -0
- package/templates/defaults/remix.config.js +18 -0
- package/templates/defaults/remix.env.d.ts +2 -0
- package/templates/defaults/tsconfig.json +26 -0
- package/templates/netlify-edge-functions/app/entry.server.tsx +21 -0
- package/templates/netlify-edge-functions/netlify.toml +7 -0
- package/templates/netlify-edge-functions/package.json +11 -0
- package/templates/netlify-edge-functions/remix.config.js +27 -0
- package/templates/netlify-edge-functions/server.js +19 -0
- package/templates/netlify-functions/_app_redirects +7 -0
- package/templates/netlify-functions/app/entry.server.tsx +21 -0
- package/templates/netlify-functions/netlify.toml +14 -0
- package/templates/netlify-functions/package.json +10 -0
- package/templates/netlify-functions/remix.config.js +29 -0
- package/templates/netlify-functions/server.js +7 -0
- package/templates/route-template.tsx +178 -0
- package/templates/vercel/.vercelignore +8 -0
- package/templates/vercel/app/constants.mjs +25 -0
- package/templates/vercel/package.json +5 -0
- package/templates/vercel/vercel.json +11 -0
package/README.md
ADDED
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
<a href="https://wstd.us/cli-vid">
|
|
2
|
+
<img src="https://img.youtube.com/vi/eoyB9DfWdT8/0.jpg" style="width:100%;">
|
|
3
|
+
</a>
|
|
4
|
+
|
|
5
|
+
## Webstudio CLI
|
|
6
|
+
|
|
7
|
+
The Webstudio CLI helps you to link, sync and build projects from Webstudio Cloud. This README will guide you through the process of setting up a Webstudio project on your local machine and continually sync it with the cloud.
|
|
8
|
+
|
|
9
|
+
## Prerequisites: Installing Node.js
|
|
10
|
+
|
|
11
|
+
You need Node.js to use the Webstudio CLI. If Node.js is already installed in your system, you can skip ahead to the section on installing the Webstudio CLI.
|
|
12
|
+
|
|
13
|
+
To install Node.js using NVM, first install NVM by running:
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Once NVM is installed, you can install Node.js version 18 by running:
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
nvm install 18
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
Verify your Node.js installation by checking its version:
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
node --version
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Installing the Webstudio CLI
|
|
32
|
+
|
|
33
|
+
To get started with the Webstudio CLI:
|
|
34
|
+
|
|
35
|
+
1. Download and install the CLI using the following command:
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
npm install -g webstudio
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
1. Confirm the installation by checking the CLI version:
|
|
42
|
+
|
|
43
|
+
```bash
|
|
44
|
+
webstudio --version
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
1. To keep your CLI updated, use the same command used for installation whenever a new release is available.
|
|
48
|
+
|
|
49
|
+
## Initiating a Webstudio Project
|
|
50
|
+
|
|
51
|
+
Now, you can run a Webstudio project on your local machine using this command:
|
|
52
|
+
|
|
53
|
+
```bash
|
|
54
|
+
webstudio
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
This will initiate the flow to connect your Webstudio Cloud project and build it in your local computer. The default flow will guide you through the steps. You can also perform all the operations individually using independent commands.
|
|
58
|
+
|
|
59
|
+
## Commands
|
|
60
|
+
|
|
61
|
+
Here is the list of independent commands:
|
|
62
|
+
|
|
63
|
+
- version
|
|
64
|
+
- help
|
|
65
|
+
- link
|
|
66
|
+
- sync
|
|
67
|
+
- build
|
|
68
|
+
|
|
69
|
+
### link
|
|
70
|
+
|
|
71
|
+
The **`link`** command syncs your local Webstudio project with the project from the cloud. This means that any changes made in the cloud can be synced to the local project, once they are published.
|
|
72
|
+
|
|
73
|
+
You can link a project from Webstudio Cloud with the following command:
|
|
74
|
+
|
|
75
|
+
```bash
|
|
76
|
+
webstudio link
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
This command will prompt you to paste a link which you can create using the _Share_ option in your project.
|
|
80
|
+
|
|
81
|
+
Make sure to provide _Build_ access when generating the link in Webstudio Cloud.
|
|
82
|
+
|
|
83
|
+
### sync
|
|
84
|
+
|
|
85
|
+
Once the project is linked, use the **`sync`** command to sync it with the cloud:
|
|
86
|
+
|
|
87
|
+
```bash
|
|
88
|
+
webstudio sync
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
Make sure to publish the project in Webstudio Cloud before running the **`sync`** command in your local Webstudio project.
|
|
92
|
+
|
|
93
|
+
### build
|
|
94
|
+
|
|
95
|
+
Now, you can build your project with the **`build`** command:
|
|
96
|
+
|
|
97
|
+
```bash
|
|
98
|
+
webstudio build
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
During this phase, the CLI establishes the necessary routes and pages, scaffolding the entire application using the default Remix template. Additionally, all assets, such as images and fonts are downloaded to the **`assets`** folder inside the **`public`** directory.
|
|
102
|
+
|
|
103
|
+
Once the project is scaffolded, you can run `npm install` and then `npm run dev` to run your app in development mode.
|
|
104
|
+
|
|
105
|
+
If you want to build a production version of the app, you can run `npm run build`.
|
|
106
|
+
|
|
107
|
+
## Deployment
|
|
108
|
+
|
|
109
|
+
### Vercel
|
|
110
|
+
|
|
111
|
+
Once you've built the project locally, you can use the [Vercel CLI](https://vercel.com/docs/cli) to deploy your site directly to [Vercel](https://vercel.com):
|
|
112
|
+
|
|
113
|
+
```bash
|
|
114
|
+
vercel deploy
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
Follow the instructions [here](https://vercel.com/docs/cli) to install the `vercel` CLI. We plan to add more deployment targets in future.
|
|
118
|
+
|
|
119
|
+
### Netlify
|
|
120
|
+
|
|
121
|
+
If you want to deploy to netlify, you can use [Netlify CLI](https://docs.netlify.com/cli/get-started/) to deploy your site directly to [Netlify](https://netlify.com/):
|
|
122
|
+
|
|
123
|
+
```bash
|
|
124
|
+
netlify deploy
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
You can configure the project to support netlify serverless/edge-functions respectively, as deployment target at the time of initially setting up your project. Please check the [initiating-a-webstudio-project](#initiating-a-webstudio-project) section.
|
|
128
|
+
|
|
129
|
+
You can manually change it using the `build` command. For serverless functions:
|
|
130
|
+
|
|
131
|
+
```bash
|
|
132
|
+
webstudio build --template netlify-functions
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
and for edge functions:
|
|
136
|
+
|
|
137
|
+
```bash
|
|
138
|
+
webstudio build --template netlify-edge-functions
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
## Important Notes
|
|
142
|
+
|
|
143
|
+
If you use `vercel build` before `vercel deploy`, make sure to clean your `app` folder in the project afterward.
|
|
144
|
+
|
|
145
|
+
Vercel injects a few [files](https://github.com/vercel/vercel/blob/a8ad176262ef822860ce338927e6f959961d2d32/packages/remix/src/build.ts#L63) to support and deploy Remix using their CLI, but these files are not necessary for your project when you use it locally.
|