Support Custom Deployment with Now.json (codesandbox#1210)

* add support for now.json

* add support for package.json now

Author: SaraVieira

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/GetIconURL.js

@@ -4,6 +4,7 @@ import faviconSvg from 'common/components/icons/favicon.svg';
 import fileSvg from 'common/components/icons/file.svg';
 import imageSvg from 'common/components/icons/image.svg';
 import codesandboxSvg from 'common/components/icons/codesandbox.svg';
+import nowSvg from 'common/components/icons/now.svg';
 
 function imageExists(url) {
   return new Promise((resolve, reject) => {
@@ -20,6 +21,7 @@ const icons = {
   favicon: faviconSvg,
   image: imageSvg,
   codesandbox: codesandboxSvg,
+  now: nowSvg,
 };
 
 async function getIconURL(type) {

packages/app/src/app/store/modules/deployment/actions.js

@@ -1,4 +1,3 @@
-import getTemplate from 'common/templates';
 import { omit } from 'lodash-es';
 
 export function createZip({ utils, state }) {
@@ -17,13 +16,14 @@ export async function createApiData({ props, state }) {
   const { contents } = props;
   const sandboxId = state.get('editor.currentId');
   const sandbox = state.get(`editor.sandboxes.${sandboxId}`);
-  let apiData = {
+  const apiData = {
     files: [],
   };
-  const filePaths = Object.keys(contents.files);
 
   let packageJSON = {};
+  let nowJSON = {};
   const projectPackage = contents.files['package.json'];
+  const nowFile = contents.files['now.json'];
 
   if (projectPackage) {
     const data = await projectPackage.async('text'); // eslint-disable-line no-await-in-loop
@@ -32,21 +32,43 @@ export async function createApiData({ props, state }) {
     packageJSON = parsed;
   }
 
+  if (nowFile) {
+    const data = await nowFile.async('text'); // eslint-disable-line no-await-in-loop
+
+    const parsed = JSON.parse(data);
+    nowJSON = parsed;
+  } else if (packageJSON.now) {
+    // Also support package.json if imported like that
+    nowJSON = packageJSON.now;
+  }
+
+  const nowDefaults = {
+    name: `csb-${sandbox.id}`,
+    type: 'NPM',
+    public: true,
+  };
+
+  const filePaths = nowJSON.files || Object.keys(contents.files);
+
   // We'll omit the homepage-value from package.json as it creates wrong assumptions over the now deployment evironment.
   packageJSON = omit(packageJSON, 'homepage');
 
   // We force the sandbox id, so ZEIT will always group the deployments to a
   // single sandbox
-  packageJSON.name = `csb-${sandbox.id}`;
-
-  apiData.name = `csb-${sandbox.id}`;
-  apiData.deploymentType = 'NPM';
-  apiData.public = true;
-
-  apiData.files.push({
-    file: 'package.json',
-    data: JSON.stringify(packageJSON, null, 2),
-  });
+  packageJSON.name = nowJSON.name || nowDefaults.name;
+
+  apiData.name = nowJSON.name || nowDefaults.name;
+  apiData.deploymentType = nowJSON.type || nowDefaults.type;
+  apiData.public = nowJSON.public || nowDefaults.public;
+  apiData.config = omit(nowJSON, ['public', 'type', 'name', 'files']);
+  apiData.forceNew = true;
+
+  if (!nowJSON.files) {
+    apiData.files.push({
+      file: 'package.json',
+      data: JSON.stringify(packageJSON, null, 2),
+    });
+  }
 
   for (let i = 0; i < filePaths.length; i += 1) {
     const filePath = filePaths[i];
@@ -59,29 +81,45 @@ export async function createApiData({ props, state }) {
     }
   }
 
-  const template = getTemplate(sandbox.template);
+  return { apiData };
+}
 
-  if (template.alterDeploymentData) {
-    apiData = template.alterDeploymentData(apiData);
+// Will be used later to create alias but I wanna get this PR merged first
+export async function addAlias({ http, path, props, state }) {
+  const { apiData, deploymentId } = props;
+  const token = state.get('user.integrations.zeit.token');
+  try {
+    const alias = await http.request({
+      url: `https://api.zeit.co/v2/now/deployments/${deploymentId}/aliases`,
+      body: { alias: apiData.config.alias },
+      method: 'POST',
+      headers: { Authorization: `bearer ${token}` },
+    });
+    const url = `https://${alias.result.alias}`;
+    return path.success({ url });
+  } catch (error) {
+    console.error(error);
+    return path.error({ error });
   }
-
-  return { apiData };
 }
 
-export function postToZeit({ http, path, props, state }) {
+export async function postToZeit({ http, path, props, state }) {
   const { apiData } = props;
   const token = state.get('user.integrations.zeit.token');
 
-  return http
-    .request({
-      method: 'POST',
+  try {
+    const deployment = await http.request({
       url: 'https://api.zeit.co/v3/now/deployments',
       body: apiData,
+      method: 'POST',
       headers: { Authorization: `bearer ${token}` },
-    })
-    .then(response => {
-      const url = `https://${response.result.url}`;
-      return path.success({ url });
-    })
-    .catch(error => path.error({ error }));
+    });
+
+    const url = `https://${deployment.result.url}`;
+
+    return path.success({ url });
+  } catch (error) {
+    console.error(error);
+    return path.error({ error });
+  }
 }

packages/app/src/app/utils/get-type.js

@@ -8,6 +8,7 @@ const specialCasesMap = {
   'yarn.lock': 'yarn',
   'package.json': 'npm',
   'sandbox.config.json': 'codesandbox',
+  'now.json': 'now',
   'readme.md': 'readme',
   'contributing.md': 'contributing',
   'tsconfig.json': 'typescript',