Ready for deployments

.dockerignore

@@ -0,0 +1,5 @@
+node_modules
+.vscode
+deploy.sh
+Dockerfile
+Dockerfile.prod

.gitignore

@@ -0,0 +1,17 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+build
+www
+.deliver
+
+# misc
+.DS_Store
+npm-debug.log
+yarn-error.log

Dockerfile.prod

@@ -1,4 +1,4 @@
-FROM node:alpine
+FROM node:7.3.0
 MAINTAINER Ives van Hoorne
 
 RUN npm install -g yarn
@@ -7,10 +7,10 @@ ADD package.json /app/package.json
 ADD yarn.lock /app/yarn.lock
 
 WORKDIR /app
-RUN yarn
+RUN yarn install
+
+# After yarn install, so dev deps are also installed (for building)
+ENV NODE_ENV production
 
 ADD . /app
 RUN npm run build
-
-RUN rm -rf node_modules
-RUN rm -rf src

config/paths.js

@@ -26,7 +26,7 @@ const sandboxSrc = path.join(src, 'sandbox');
 
 // config after eject: we're in ./config/
 module.exports = {
-  appBuild: resolveApp('build'),
+  appBuild: resolveApp('www'),
   appHtml: path.join(appSrc, 'index.html'),
   sandboxHtml: path.join(sandboxSrc, 'index.html'),
   appPackageJson: resolveApp('package.json'),

deploy.sh

@@ -0,0 +1,25 @@
+#!/bin/bash
+
+docker build -t codesandbox/prod/client --file Dockerfile.prod .
+id=$(docker create codesandbox/prod/client)
+rm -rf .deliver
+mkdir .deliver
+mkdir .deliver/www
+docker cp $id:/app/www/ ./.deliver/
+docker rm -v $id
+
+
+echo "Tarring build files"
+tar -C .deliver -zcvf .deliver/code_sandbox_client.tar.gz www
+
+echo "Cleaning remote tar"
+ssh nginx@codesandbox.io "rm -f code_sandbox_client.tar.gz"
+
+echo "Moving tar to server"
+scp .deliver/code_sandbox_client.tar.gz nginx@codesandbox.io:./
+
+echo "Cleaning WWW"
+ssh nginx@codesandbox.io "rm -rf www"
+
+echo "Untarring www files"
+ssh nginx@codesandbox.io "tar -xzf ./code_sandbox_client.tar.gz"

scripts/run-docker.sh

@@ -1,3 +1,4 @@
 #!/bin/bash
 
+yarn
 npm start

src/app/components/Header.js

@@ -49,9 +49,9 @@ const Action = styled.div`
 
   &:hover {
     box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.2);
-    color: white;
-    border-right: 1px solid ${props => props.theme.secondary.darken(0.2)};
-    background-color: ${props => props.theme.secondary};
+    color: ${props => props.theme.primaryText};
+    border-right: 1px solid ${props => props.theme.primary.darken(0.2)};
+    background-color: ${props => props.theme.primary};
   }
 `;
 
@@ -65,13 +65,13 @@ const Username = styled.div`
 
 const Logo = styled.span`
   display: inline-block;
-  background-color: ${props => props.theme.primary};
+  background-color: ${props => props.theme.secondary};
   padding: 0 1rem;
   line-height: 3rem;
   vertical-align: middle;
   width: 14rem;
   font-weight: 400;
-  color: ${props => props.theme.primaryText};
+  color: white;
 `;
 
 export default ({ username }: { username: ?string }) => (

src/app/pages/SandboxView/Editor/Preview.js

@@ -42,7 +42,7 @@ export default class Preview extends React.PureComponent {
 
   componentDidUpdate(prevProps: Props) {
     if (prevProps.module.code !== this.props.module.code && this.state.frameInitialized) {
-      requestAnimationFrame(this.executeCode);
+      this.executeCode();
     }
   }
 
@@ -92,7 +92,7 @@ export default class Preview extends React.PureComponent {
       <Container>
         <StyledFrame
           sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"
-          src={`${location.protocol}//sandbox.${document.host}/frame.html`}
+          src={`${location.protocol}//sandbox.${location.host}`}
           id="sandbox"
         />
       </Container>