Big workspaces refactor (codesandbox#304)

* Big workspaces refactor

* Fix linting

* Fix independent building

* Fix tests

* Fix CircleCI

* Fix tests

* Fix tests

* Babel-jest

* More fixes

* Fix all tests

* Fix Tooltip location

* Add build to steps

* Fix indentation

* Create special script for CircleCI

* Fix tooltips

* Run right script

* Add CircleCI workflows

* Build production during tests

* Fix typos

* Fix babel runtime location

* Add babel-runtime explicitly

* Add babel runtime dependency explicitly to sandbox

* Remove babel-runtime from app

* Fix babel runtime problem

* Change building behaviour on CircleCI

* Create image for integration tests

* Fix puppeteer docker image

* Add more cached node_modules

* Fix Puppeteer in Docker

* Add deploy step

* Update caches

* Save production builds as artifacts

* Use master branch as variable for deployment caches

* Add proper deployment steps

* Add double check

* Remove unnecessary ignore

Author: CompuIves

.circleci/config.yml

@@ -1,36 +1,144 @@
 version: 2
 
 jobs:
-  build:
-    working_directory: ~/codesandbox-client
+  build-dependencies:
     docker:
       - image: circleci/node:9.0
-    environment:
-      TZ: "/usr/share/zoneinfo/Europe/Amsterdam"
+    working_directory: ~/codesandbox-client
     steps:
       - checkout
       - restore_cache:
-          key: dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
+          key: v1-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
       - run:
-          name: Install Dependency
-          command: yarn install && yarn add puppeteer -W
+          name: Install Dependencies
+          command: yarn install
       - save_cache:
-          key: dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
+          key: v1-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
           paths:
             - ./node_modules
+            - ./packages/app/node_modules
+            - ./packages/codesandbox-api/node_modules
+            - ./packages/common/node_modules
+            - ./packages/homepage/node_modules
             - ~/.yarn-cache
       - run:
-          name: Workaround for https://github.com/GoogleChrome/puppeteer/issues/290
-          command: sh ./integration-tests/scripts/workaround-puppeteer-issue-290.sh
+          name: Build
+          command: yarn build:dependents
+      - save_cache:
+          key: v1-repo-{{ .Environment.CIRCLE_SHA1 }}
+          paths:
+            - ~/codesandbox-client
+
+  build-prod:
+    docker:
+      - image: circleci/node:9.0
+    working_directory: ~/codesandbox-client
+    steps:
+      - restore_cache:
+          key: v1-repo-{{ .Environment.CIRCLE_SHA1 }}
+      # We do this to compare sizes from these builds with master
+      - restore_cache:
+          key: v1-prod-build-cache-master
       - run:
-          name: Start Server
+          name: Build Application
+          command: yarn build:prod
+      - save_cache:
+          key: v1-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}
+          paths:
+            - ./packages/app/www
+      - store_artifacts:
+          path: ./www
+          destination: www
+
+  test-integrations:
+    docker:
+      - image: codesandbox/node-puppeteer
+    working_directory: ~/codesandbox-client
+    steps:
+      - restore_cache:
+          key: v1-repo-{{ .Environment.CIRCLE_SHA1 }}
+      - run:
+          name: Start Test Server
           command: yarn start:test
           background: true
       - run:
-          name: Test
+          name: Test Integrations
           command: |
-            sleep 2
-            yarn test:integrations -- --maxWorkers=2
+            sleep 6
+            yarn test:integrations
       - store_artifacts:
-          path: integration-tests/tests/__image_snapshots__/__diff_output__
+          path: packages/app/integration-tests/tests/__image_snapshots__/__diff_output__
           destination: image_snapshot_diff
+  
+  test-jest:
+    docker:
+      - image: circleci/node:9.0
+    working_directory: ~/codesandbox-client
+    steps:
+      - restore_cache:
+          key: v1-repo-{{ .Environment.CIRCLE_SHA1 }}
+      - run:
+          name: Test
+          command: yarn test
+
+  lint:
+    docker:
+      - image: circleci/node:9.0
+    working_directory: ~/codesandbox-client
+    steps:
+      - restore_cache:
+          key: v1-repo-{{ .Environment.CIRCLE_SHA1 }}
+      - run:
+          name: Lint
+          command: yarn lint
+
+  deploy:
+    docker:
+      - image: circleci/node:9.0
+    working_directory: ~/codesandbox-client
+    steps:
+      - restore_cache:
+          key: v1-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}
+      - add_ssh_keys:
+          fingerprints:
+            - "f7:f1:e6:60:96:24:d9:cd:1b:8b:c0:34:e7:ee:fa:82"
+      - run:
+          name: Deploy
+          command: sh ./deploy.sh
+        
+workflows:
+  version: 2
+  build-and-test:
+    jobs:
+      - build-dependencies
+      - test-integrations:
+          requires:
+            - build-dependencies
+      - test-jest:
+          requires:
+            - build-dependencies
+      - lint:
+          requires:
+            - build-dependencies
+      - build-prod:
+          requires:
+            - build-dependencies
+      - hold:
+          type: approval
+          filters:
+            branches:
+              only: master
+          requires:
+            - build-prod
+            - lint
+            - test-integrations
+            - test-jest
+      - deploy:
+          filters:
+            branches:
+              only: master
+          requires:
+            - hold
+
+
+

CONTRIBUTING.md

@@ -2,17 +2,16 @@
 
 ## Code Organization
 
-The CodeSandbox client is currently divided in to 5 parts.
+The CodeSandbox client is currently divided in to 5 parts. We use `lerna` to share dependencies between these parts.
 
-- `app`: The editor and profile page
-- `sandbox`: The preview pane of the editor
-- `embed`: The embedded version of CodeSandbox (which you can embed on medium)
-- `common`: The common parts between `sandbox`, `embed` and `app`
-- `homepage`: Homepage!
+- `app`: The editor, the search, profile page, the embed and the sandbox.
+- `homepage`: The Gatsby website of the homepage.
+- `codesandbox-api`: The npm package that's responsible for communication between the sandbox and the editor.
+- `common`: All common parts between these packages, reusable JS.
 
 This version of CodeSandbox is using the production server as source of truth, this is specified by the environment variable `LOCAL_SERVER`. It's not yet possible to sign in using this version, I haven't figured out how to handle this yet.
 
-**Working on your first Pull Request?** You can learn how from this *free* series [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github) 
+**Working on your first Pull Request?** You can learn how from this *free* series [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)
 
 ## Setting Up the project locally
 

Gulpfile.js

@@ -1,22 +1,11 @@
 const gulp = require('gulp');
-const runSequence = require('run-sequence');
 
-const config = require('./config/paths');
-
-gulp.task('homepage', function() {
-  return gulp
-    .src('src/homepage/public/**/*.*')
-    .pipe(gulp.dest(`${config.appBuild}/`));
+gulp.task('app', function() {
+  return gulp.src('packages/app/www/**/*').pipe(gulp.dest('www'));
 });
 
-gulp.task('static', function() {
-  return gulp
-    .src(`${config.staticPath}/**/*`)
-    .pipe(gulp.dest(`${config.appBuild}/`));
-});
-
-gulp.task('build', function(cb) {
-  return runSequence(['homepage', 'static'], cb);
+gulp.task('homepage', function() {
+  return gulp.src('packages/homepage/public/**/*').pipe(gulp.dest('www'));
 });
 
-gulp.task('default', ['build']);
+gulp.task('default', ['app', 'homepage']);

deploy.sh

@@ -1,12 +1,8 @@
 #!/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 && \
+cp -R www .deliver && \
 echo "Tarring build files" && \
 tar -C .deliver -zcvf .deliver/code_sandbox_client.tar.gz www && \
 echo "Cleaning remote tar" && \

Dockerfile docker/DockerfileDockerfile renamed to docker/Dockerfile

@@ -0,0 +1,9 @@
+FROM 'circleci/node:9.0'
+
+RUN sudo apt-get update && sudo apt-get install -yq gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 \
+  libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 \
+  libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 \
+  libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 \
+  ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
+
+RUN cd ~/ && yarn add puppeteer