[docs] Add a guide on how to deploy on railway (#3381)

Signed-off-by: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com>
Co-authored-by: Bharat Kashyap <bharatkashyap@outlook.com>

docs/data/toolpad/studio/how-to-guides/gcp-deploy.md

@@ -14,45 +14,45 @@ GCP offers an ecosystem of products to help you build, manage, and scale any web
 
 1. Login in to Google Cloud console and from the header bar choose the project where you want to setup the web service.
 
-{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/deploy-gcp/choose-project.png", "alt": "Choose project", "caption": "Choosing the project to setup the web service", "indent": 1 }}
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/how-to-guides/deploy-gcp/choose-project.png", "alt": "Choose project", "caption": "Choosing the project to setup the web service", "indent": 1 }}
 
 2. From the navigation menu icon, click on **Cloud Run**.
 
-{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/deploy-gcp/navigate-to-cloud-run.png", "alt": "Navigate to cloud run", "caption": "Navigate to cloud run", "indent": 1}}
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/how-to-guides/deploy-gcp/navigate-to-cloud-run.png", "alt": "Navigate to cloud run", "caption": "Navigate to cloud run", "indent": 1}}
 
 3. Click on **Create Service** to set up your web app.
 
-{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/deploy-gcp/create-service.png", "alt": "Create Cloud Run service", "caption": "Create Cloud Run service", "indent": 1}}
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/how-to-guides/deploy-gcp/create-service.png", "alt": "Create Cloud Run service", "caption": "Create Cloud Run service", "indent": 1}}
 
 4. In the Create service UI, choose **Continuously deploy from a repository** and give a name to your service from the **Service name** input. Further click on **Setup with cloud build** button.
 
-{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/deploy-gcp/setup-run-service.png", "alt": "Configuring Cloud Run service", "caption": "Configuring Cloud Run service", "indent": 1 }}
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/how-to-guides/deploy-gcp/setup-run-service.png", "alt": "Configuring Cloud Run service", "caption": "Configuring Cloud Run service", "indent": 1 }}
 
 5. This opens a drawer menu. From the drop-down, choose the repository that contains your Toolpad Studio app and click Next.
 
-{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/deploy-gcp/choose-repository.png", "alt": "Choose repository", "caption": "Choose respository", "indent": 1 }}
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/how-to-guides/deploy-gcp/choose-repository.png", "alt": "Choose repository", "caption": "Choose respository", "indent": 1 }}
 
 6. The branch input shows `main` by default and it can remain unchanged. From the radio buttons, choose the second option as it is a Node.js app. The other configurations can be kept unchanged. Click **Save**.
 
-{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/deploy-gcp/build-type.png", "alt": "Choosing branch and build type", "caption": "Choosing branch and build type", "indent": 1 }}
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/how-to-guides/deploy-gcp/build-type.png", "alt": "Choosing branch and build type", "caption": "Choosing branch and build type", "indent": 1 }}
 
 7. With the drawer closed, on the Cloud Run setup UI, choose **Allow unauntheticated invocations** to create a public app that needs no authentication and scroll down.
 
-{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/deploy-gcp/back-to-cloud-run.png", "alt": "Select allow unauntheticated invocations", "caption": "Select allow unauntheticated invocations", "indent": 1}}
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/how-to-guides/deploy-gcp/back-to-cloud-run.png", "alt": "Select allow unauntheticated invocations", "caption": "Select allow unauntheticated invocations", "indent": 1}}
 
 8. The last step is to expand the 'Container(s), Volumes, Networking, Security' caret. The first input **Container port** needs to be updated to 3000. Click the **Create** button to start the service.
 
-{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/deploy-gcp/set-container-port.png", "alt": "Set contianer port", "caption": "Set contianer port", "indent": 1}}
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/how-to-guides/deploy-gcp/set-container-port.png", "alt": "Set contianer port", "caption": "Set contianer port", "indent": 1}}
 
 9. The next screen shows that the deployment is in progress and the build is being prepared, which can take 3-5 minutes. You can click on the **logs** link (pending state) to see the live build logs in Cloud Build UI.
 
-{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/deploy-gcp/deployment.png", "alt": "Deployment in progress", "caption": "Deployment in progress", "indent": 1}}
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/how-to-guides/deploy-gcp/deployment.png", "alt": "Deployment in progress", "caption": "Deployment in progress", "indent": 1}}
 
-{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/deploy-gcp/build-logs.png", "alt": "Build logs", "caption": "Build logs", "indent": 1}}
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/how-to-guides/deploy-gcp/build-logs.png", "alt": "Build logs", "caption": "Build logs", "indent": 1}}
 
 10. Once this is successfully complete, go back to the Cloud Run page and access your Toolpad Studio app from the created URL .
 
-{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/deploy-gcp/build-complete.png", "alt": "GCP deployment complete", "caption": "Deployed successfully", "indent": 1 }}
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/how-to-guides/deploy-gcp/build-complete.png", "alt": "GCP deployment complete", "caption": "Deployed successfully", "indent": 1 }}
 
 That's it! The app is up and running in a few minutes. Make changes, push to GitHub, and your app automatically redeploys each time.
 
@@ -62,7 +62,7 @@ That's it! The app is up and running in a few minutes. Make changes, push to Git
 
 2. You might have to enable account permissions and APIs within the Google Cloud console. These are the security measures that GCP puts in place. For instance, this deployment required enabling a few GCP services from the Cloud Build Settings UI.
 
-{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/deploy-gcp/pitfall.png", "alt": "Enable GCP service", "caption": "Enable GCP service", "indent": 1 }}
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/how-to-guides/deploy-gcp/pitfall.png", "alt": "Enable GCP service", "caption": "Enable GCP service", "indent": 1 }}
 
 3. You may have to update your root directory in the Build context directory input in step 6.
 

docs/data/toolpad/studio/how-to-guides/railway-deploy.md

@@ -0,0 +1,58 @@
+# Deploy to Railway
+
+<p class="description">You can host and share your Toolpad Studio apps on Railway in a few minutes, for free.</p>
+
+This guide walks you through the deployment of a Toolpad Studio app from a GitHub repository.
+
+## Prerequisites
+
+- A [Railway](https://railway.app/) account
+- A [GitHub](https://github.com) account
+- A GitHub repository containing your Toolpad Studio app. Check out [pushing your Toolpad Studio app to GitHub](/toolpad/studio/how-to-guides/render-deploy/#pushing-your-toolpad-studio-app-to-github) for this step.
+
+## Creating a new app on Railway
+
+1. From your Railway dashboard, click on **New Project** from the top-right corner and choose **Deploy from GitHub repo** from the drop-down.
+
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/how-to-guides/deploy-railway/railway-create-new-project.png", "alt": "Railway new project", "caption": "Creating a new Railway project", "indent": 1 }}
+
+2. Depending on whether the visibility of the repository is set to private or public, you may need to connect your GitHub account to Railway using **Configure GitHub App**. Once done, you'll see a list of repositories to choose from.
+
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/how-to-guides/deploy-railway/choose-repository.png", "alt": "Choosing the repository", "caption": "Choosing the repository", "indent": 1 }}
+
+3. Select the repository and click on **Add Variables**. Any environment variables that your app needs can be set up now.
+
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/how-to-guides/deploy-railway/add-variable.png", "alt": "Adding variable", "caption": "Adding a variable","indent": 1 }}
+
+4. Toolpad Studio apps run on port 3000, so add a `PORT` variable and set its value to 3000.
+
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/how-to-guides/deploy-railway/add-port-as-a-variable.png", "alt": "Adding port as a variable", "caption": "Adding PORT as a variable", "indent": 1 }}
+
+5. On the same UI, go to the Settings tab, scroll down and and click on **Generate Domain** to create a public URL. You can also create a custom URL.
+
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/how-to-guides/deploy-railway/generate-domain.png", "alt": "Generating a public URL", "caption": "Generating a public URL", "indent": 1 }}
+
+6. If you scroll below, you'll see that the build and start commands are set to
+
+ ```bash
+ $ npm run build
+ $ npm run start
+ ```
+
+ by default. You can leave this unchanged.
+
+7. A floating **Deploy** button appears on the canvas.. Click it and the build starts.
+
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/how-to-guides/deploy-railway/deploy.png", "alt": "Deploy app", "caption": "Deploy app", "indent": 1 }}
+
+8. Once this is successfully complete, you can access your Toolpad Studio app from the public URL available on the card.
+
+That's it! The app is up and running. Make changes, push to GitHub, and your app automatically redeploys each time. You may deploy to any other hosting provider of your choice as well.
+
+Check out the Railway documentation for more advanced settings, like adding [variables](https://docs.railway.app/guides/variables) to your app.
+
+### Common Pitfalls
+
+1. Sometimes the build may fail as your app could be in a different directory. To configure the right path, navigate to the **Settings** tab and update the root directory.
+
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/how-to-guides/deploy-railway/setting-root-directory.png", "alt": "Updating the root directory", "caption": "Updating the root directory", "indent": 1 }}

docs/data/toolpad/studio/how-to-guides/render-deploy.md

@@ -43,19 +43,19 @@
 
 {{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/how-to-guides/deploy-render/render-start.png", "alt": "Render new web service ", "caption": "Creating a new Render Web Service", "indent": 1 }}
 
-2. Depending on whether the visibility of the GitHub repository is set to private or public, you will need to either connect your GitHub account to Render, or paste in the URL of the repository you created above:
+2. Depending on whether the visibility of the GitHub repository is set to private or public, you need to either connect your GitHub account to Render, or paste in the URL of the repository you created above:
 
 {{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/how-to-guides/deploy-render/render-connect-github.png", "alt": "GitHub new repo ", "caption": "Connecting GitHub to Render", "indent": 1, "aspectRatio": 2 }}
 
 3. If using a private repository, you need to search for and select the repository you intend to deploy once connected to GitHub:
 
 {{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/how-to-guides/deploy-render/render-search.png", "alt": "GitHub repo on Render ", "caption": "Connecting your GitHub repository", "indent": 1, "aspectRatio": 1.5}}
 
-4. With the repository selected, you can advance to deployment configuration. Render can guess that you are deploying a Node app. Set the name which will appear in the URL of your deployed app, like `<APP-NAME>.onrender.com`:
+4. With the repository selected, you can advance to deployment configuration. Render can guess that you are deploying a Node app. Set the name which should appear in the URL of your deployed app, like `<APP-NAME>.onrender.com`:
 
 {{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/how-to-guides/deploy-render/render-config-start.png", "alt": "Render deployment config ", "caption": "Setting the deployment configuration", "indent": 1 }}
 
-5. The build and start commands will be set to
+5. The build and start commands are set to
 
  ```bash
  $ yarn; yarn build
@@ -68,7 +68,7 @@
 
 {{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/how-to-guides/deploy-render/render-config-commands.png", "alt": "Render deployment commands and plan ", "caption": "Setting deployment commands and choosing an instance type", "indent": 1 }}
 
-7. Select **Create Web Service** to trigger the deployment. You will be redirected to the streaming logs of the in-progress deployment.
+7. Select **Create Web Service** to trigger the deployment and it redirects you to the streaming logs of the in-progress deployment.
 
 8. Render.com uses `14.7.0` as the default Node version. Toolpad Studio requires version `18.17.1` as the minimum Node version. You can change the default by setting a `NODE_VERSION` environment variable for your deployment:
 
@@ -90,6 +90,6 @@ See the [Render documentation](https://docs.render.com/node-version) on Node ver
 
 That's it! We're up and running in a few minutes.
 
-Make changes, push to GitHub, and your app will automatically redeploy each time.
+Make changes, push to GitHub, and your app automatically redeploys each time. You may deploy to any other hosting provider of your choice as well.
 
 Check out the Render documentation for more advanced settings, like adding [environment variables](https://docs.render.com/configure-environment-variables) to your app.

docs/data/toolpad/studio/pages.ts

@@ -135,6 +135,10 @@ const pages: MuiPage[] = [
  pathname: '/toolpad/studio/how-to-guides/render-deploy',
  title: 'Deploy to Render',
  },
+ {
+ pathname: '/toolpad/studio/how-to-guides/railway-deploy',
+ title: 'Deploy to Railway',
+ },
  {
  pathname: '/toolpad/studio/how-to-guides/gcp-deploy',
  title: 'Deploy to Google Cloud',

docs/pages/toolpad/studio/how-to-guides/railway-deploy.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import * as pageProps from '../../../../data/toolpad/studio/how-to-guides/railway-deploy.md?muiMarkdown';
+
+export default function Page() {
+ return <MarkdownDocs disableAd {...pageProps} />;
+}