Add support for netlify.toml

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Elements.js

@@ -53,7 +53,6 @@ export const Name = styled.span`
       : 'rgba(255, 255, 255, 0.8)'};
   font-size: 1rem;
   margin-top: 0;
-  margin-bottom: 0.5rem;
   vertical-align: middle;
 
   span {

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify.js

@@ -1,11 +1,15 @@
 import React, { Component } from 'react';
 import { inject, observer } from 'mobx-react';
+
 import LinkIcon from 'react-icons/lib/fa/external-link';
 import Cogs from 'react-icons/lib/fa/cogs';
+import LightningIcon from 'react-icons/lib/md/flash-on';
 import NetlifyLogo from 'app/components/NetlifyLogo';
 import DeploymentIntegration from 'app/components/DeploymentIntegration';
 import getTemplate from '@codesandbox/common/lib/templates';
 import { Button } from '@codesandbox/common/lib/components/Button';
+import { resolveDirectory } from '@codesandbox/common/lib/sandbox/modules';
+import getNetlifyConfig from 'app/utils/getNetlifyConfig';
 import { WorkspaceInputContainer, WorkspaceSubtitle } from '../../elements';
 import {
   Deploys,
@@ -17,6 +21,18 @@ import {
   ButtonContainer,
 } from './Elements';
 
+const getFunctionDir = sandbox => {
+  try {
+    return resolveDirectory(
+      getNetlifyConfig(sandbox).functions,
+      sandbox.modules,
+      sandbox.directories
+    );
+  } catch (e) {
+    return [];
+  }
+};
+
 class NetlifyDeployment extends Component {
   state = { show: false };
 
@@ -37,6 +53,11 @@ class NetlifyDeployment extends Component {
 
     const template = getTemplate(editor.currentSandbox.template);
     const { show } = this.state;
+    const functionDirectory = getFunctionDir(editor.currentSandbox);
+
+    const functions = editor.currentSandbox.modules.filter(
+      m => m.directoryShortid === functionDirectory.shortid
+    );
     return (
       template.netlify !== false && (
         <Wrapper loading={deployment.deploying}>
@@ -77,11 +98,59 @@ class NetlifyDeployment extends Component {
                   <Deploy key={deployment.netlifySite.uid}>
                     <Name light>{deployment.netlifySite.name}</Name>
                     {!deployment.building && <div>Building</div>}
+                    {functions.length ? (
+                      <>
+                        <WorkspaceSubtitle
+                          css={`
+                            padding-left: 0;
+                          `}
+                        >
+                          Functions
+                        </WorkspaceSubtitle>
+                        <section
+                          css={`
+                            display: flex;
+                            margin-bottom: 0.5rem;
+                          `}
+                        >
+                          {functions.map(file => (
+                            <Link
+                              disabled={deployment.building}
+                              href={`${
+                                deployment.netlifySite.url
+                              }/.netlify/functions/${
+                                file.title.split('.js')[0]
+                              }`}
+                              css={`
+                                margin-top: 0;
+                                margin-right: 0.5rem;
+                              `}
+                              target="_blank"
+                              rel="noreferrer noopener"
+                            >
+                              <LightningIcon />
+                              <span>{file.title.split('.js')[0]}</span>
+                            </Link>
+                          ))}
+                        </section>
+                      </>
+                    ) : null}
+
+                    <WorkspaceSubtitle
+                      css={`
+                        padding-left: 0;
+                      `}
+                    >
+                      Actions
+                    </WorkspaceSubtitle>
                     <ButtonContainer>
                       <Link
                         disabled={deployment.building}
                         href={deployment.netlifySite.url}
                         target="_blank"
+                        css={`
+                          margin-top: 0;
+                        `}
                         rel="noreferrer noopener"
                       >
                         {deployment.building ? (
@@ -100,6 +169,9 @@ class NetlifyDeployment extends Component {
                           disabled={deployment.building}
                           href={deployment.netlifyClaimUrl}
                           target="_blank"
+                          css={`
+                            margin-top: 0;
+                          `}
                           rel="noreferrer noopener"
                         >
                           <span>Claim Site</span>

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

@@ -1,5 +1,5 @@
 import { omit } from 'lodash-es';
-
+import getNetlifyConfig from 'app/utils/getNetlifyConfig';
 import getTemplate from '@codesandbox/common/lib/templates';
 import pollUntilDone from '../../utils/pollUntilDone';
 
@@ -61,6 +61,11 @@ export async function deployToNetlify({ http, props, state }) {
     return 'build';
   };
 
+  const buildConfig = getNetlifyConfig(sandbox);
+  // command needs to be passed without the package manager name
+  const buildCommandFromConfig = (buildConfig.command || '')
+    .replace('npm run', '')
+    .replace('yarn ', '');
   let id = '';
   try {
     const { result } = await http.request({
@@ -82,9 +87,9 @@ export async function deployToNetlify({ http, props, state }) {
 
   try {
     await http.request({
-      url: `${NetlifyBaseURL}/${sandboxId}/deploys?siteId=${id}&dist=${
-        template.distDir
-      }&buildCommand=${buildCommand(template.name)}`,
+      url: `${NetlifyBaseURL}/${sandboxId}/deploys?siteId=${id}&dist=${buildConfig.publish ||
+        template.distDir}&buildCommand=${buildCommandFromConfig ||
+        buildCommand(template.name)}`,
       method: 'POST',
       body: file,
       headers: {

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

@@ -9,6 +9,7 @@ const specialCasesMap = {
   'package.json': 'npm',
   'sandbox.config.json': 'codesandbox',
   'now.json': 'now',
+  'netlify.toml': 'settings',
   'readme.md': 'readme',
   'contributing.md': 'contributing',
   'tsconfig.json': 'typescript',

packages/app/src/app/utils/getNetlifyConfig.js

@@ -0,0 +1,12 @@
+import { mapKeys } from 'lodash-es';
+import toml from 'markty-toml';
+
+export default sandbox => {
+  const netlifyConfig = sandbox.modules
+    .filter(
+      module =>
+        module.title === 'netlify.toml' && module.directoryShortid == null
+    )
+    .map(m => toml(m.code))[0] || { build: {} };
+  return mapKeys(netlifyConfig.build, (v, k) => k.toLowerCase());
+};

packages/common/package.json

@@ -25,6 +25,7 @@
     "image-extensions": "^1.1.0",
     "jsonlint": "^1.6.3",
     "lodash": "^4.17.11",
+    "markty-toml": "^0.0.9",
     "memoize-one": "^3.1.1",
     "moment": "^2.18.1",
     "ot": "^0.0.15",

packages/common/src/templates/configuration/index.ts

@@ -1,9 +1,9 @@
-
 import packageJSON from './package-json';
 import prettierRC from './prettierRC';
 import sandboxConfig from './sandbox';
 import babelrc from './babelrc';
 import nowConfig from './now';
+import netlifyConfig from './netlify';
 import angularCli from './angular-cli';
 import angularJSON from './angular-json';
 import tsconfig from './tsconfig';
@@ -21,6 +21,7 @@ const configs = {
   tsconfig,
   customCodeSandbox,
   nowConfig,
+  netlifyConfig,
 };
 
 export default configs;

packages/common/src/templates/configuration/netlify/index.ts

@@ -0,0 +1,12 @@
+import { ConfigurationFile } from '../types';
+
+const config: ConfigurationFile = {
+  title: 'netlify.toml',
+  type: 'netlify',
+  description: 'Configuration for your deployments in netlify.',
+  moreInfoUrl: 'https://www.netlify.com/docs/netlify-toml-reference/',
+
+  getDefaultCode: () => '',
+};
+
+export default config;

packages/common/src/templates/configuration/parse.ts

@@ -1,6 +1,5 @@
-
 import { ConfigurationFile } from '../../templates/configuration/types';
-
+import toml from 'markty-toml';
 import { parse } from 'jsonlint';
 import { ParsedConfigurationFiles } from '../template';
 import { Sandbox, Module } from '../../types';
@@ -57,11 +56,25 @@ export default function parseConfigurations(
       path,
       ...getCode(template, module, sandbox, resolveModule, configurationFile),
     };
+
     const code = baseObject.code;
 
     if (code) {
       try {
-        const parsed = parse(code);
+        let parsed;
+        // it goes here three times and the third time it doesn't have a title but a path
+        // that took a while ffs
+        // if toml do it with toml parser
+        if (
+          module &&
+          ((module.title && module.title.includes('.toml')) ||
+            (module.path && module.path.includes('.toml')))
+        ) {
+          // never throws
+          parsed = toml(code);
+        } else {
+          parsed = parse(code);
+        }
 
         configurations[configurationFile.type] = {
           ...baseObject,

packages/common/src/templates/template.ts

@@ -35,6 +35,7 @@ const defaultConfigurations = {
   '/.prettierrc': configurations.prettierRC,
   '/sandbox.config.json': configurations.sandboxConfig,
   '/now.json': configurations.nowConfig,
+  '/netlify.toml': configurations.netlifyConfig,
 };
 
 export type ViewConfig = {

packages/common/src/types.ts

@@ -1,4 +1,3 @@
-
 import * as React from 'react';
 import { TemplateType } from './templates';
 
@@ -31,6 +30,7 @@ export type Module = {
   isNotSynced: boolean;
   sourceId: string;
   isBinary: boolean;
+  path?: string;
 };
 
 export type Directory = {

yarn.lock

@@ -16262,6 +16262,18 @@ marked@^0.3.12, marked@^0.3.17, marked@^0.3.5, marked@^0.3.9:
   version "0.3.19"
   resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.19.tgz#5d47f709c4c9fc3c216b6d46127280f40b39d790"
 
+markty-toml@^0.0.9:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/markty-toml/-/markty-toml-0.0.9.tgz#1ccc3d9336b98cbe2451569ae2648dbf26bf7ede"
+  integrity sha512-bMIzcRN4mmp5S6WFxor8THsi9xeCPupBfG+bjTCpN7g7ez33TAxqT7FhTfuBU94uIvrqgXT7af3P+eJW0XpGfg==
+  dependencies:
+    markty "0.0.4"
+
+[email protected]:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/markty/-/markty-0.0.4.tgz#060f943bdc2275b676b1628335bd8a39ea44a8ee"
+  integrity sha512-V2g+PRfySY9zKL0n4NHuE2rK2daHuVrcdRaJ8Gfhy4IYwEb2NywCSqCrxrn2LSJQ+dXf2Gubqw9+kU5m7fXUJw==
+
 match-sorter@^1.8.1:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-1.8.1.tgz#5b164e526c261dc8628db925430facbe0cd26614"
@@ -23306,7 +23318,7 @@ [email protected]:
     source-map "~0.6.1"
     source-map-support "~0.5.9"
 
-terser@^3.16.1, terser@^3.17.0, uglify-es@^3.3.4, uglify-es@^3.3.7, uglify-es@^3.3.9, "uglify-es@npm:terser":
+terser@^3.16.1, terser@^3.17.0, uglify-es@^3.3.4, uglify-es@^3.3.7, uglify-es@^3.3.9:
   name uglify-es
   version "3.17.0"
   resolved "https://registry.yarnpkg.com/terser/-/terser-3.17.0.tgz#f88ffbeda0deb5637f9d24b0da66f4e15ab10cb2"