🐳 Add dockerfile for development and instructions to use it (#6041)

* 📦 Update dependencies and adjust to new APIs * 🎨 Only execute git commands when needed * 🚸 Do not throw errors for users without 404 page * 🐳 Add dockerfile for development and instructions to use it * 🚨 Fix linter warnings. * 🎨 Fix formatting errors * 💡 Fix spelling mistake Co-authored-by: Sebastian Benz <sebastian.benz@gmail.com> * 🚚 Move commands into well-named gulp tasks Co-authored-by: Sebastian Benz <sebastian.benz@gmail.com>
ampproject · Jul 13, 2021 · fbd3d11 · fbd3d11
1 parent 8c43dac
commit fbd3d11
Show file tree

Hide file tree

Showing 12 changed files with 14,097 additions and 24,324 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -15,17 +15,10 @@ CONTRIBUTING.md
 packager/
 thumbor/
 
-# The complete frontend and pages folders aren't needed on App Engine
-/frontend/
-/pages
-# The transformed pages from dist/pages are used instead
-platform/pages*
-
 # Infrastructure
 contributing
 jest.config.js
 smoke-tests
 renovate.json
-gulpfile.js
 scripts
 tests
diff --git a/.husky/_/husky.sh b/.husky/_/husky.sh
@@ -23,8 +23,7 @@ if [ -z "$husky_skip_init" ]; then
 
   if [ $exitCode != 0 ]; then
     echo "husky - $hook_name hook exited with code $exitCode (error)"
-    exit $exitCode
   fi
 
-  exit 0
+  exit $exitCode
 fi
diff --git a/Dockerfile.development b/Dockerfile.development
@@ -0,0 +1,27 @@
+FROM python:3.7.9-slim-buster
+ENV PYTHONUNBUFFERED 1
+
+RUN \
+  apt-get update --yes --quiet && apt-get install --yes --quiet --no-install-recommends \
+  build-essential \
+  git \
+  libyaml-dev \  
+  curl && \
+  pip install -U pip && pip install grow && \
+  rm -rf /var/lib/apt/lists/*
+
+RUN \
+  curl -sL https://deb.nodesource.com/setup_14.x | bash - && \
+  apt-get install -y nodejs && \
+  npm i -g npm && \
+  npm install -g gulp
+
+RUN mkdir /amp-dev
+COPY . /amp-dev/
+WORKDIR /amp-dev/
+
+RUN npm install
+
+EXPOSE 8080 8080
+WORKDIR /amp-dev/platform
+CMD ["gulp", "develop"]
diff --git a/README.md b/README.md
@@ -19,6 +19,8 @@ We welcome contributions to amp.dev.
 
 ## Setup
 
+**Note:** Setting up amp.dev requires a working Python 3 environment on your machine which might not be easy to get going. You can skip this by using the [Docker-based setup](#setup-with-docker).
+
 ### Requirements
 
 **Note:** For those intending to conduct development on this repository beyond fixing typos, Linux and macOS are the only currently supported operating systems. Windows is not supported at this time.
@@ -70,20 +72,21 @@ We welcome contributions to amp.dev.
 
 1. Install [Grow](http://grow.io), the static site generator used to build amp.dev. Do so by using `pip` instead of its installer. Using `pip` will enable importing from the `grow` package in Python later on.
 
-   **Note**: Be sure to use the `pip` command associated with Python 3 as Grow 1 depends on Python 3.
+**Note**: Be sure to use the `pip` command associated with Python 3 as Grow 1 depends on Python 3.
 
+**Mac**
 
-  **Mac**
-  ```sh
-    LDFLAGS="-L$(brew --prefix)/lib" CFLAGS="-I$(brew --prefix)/include" pip3 install --global-option="--with-libyaml" --force pyyaml
-    pip3 install --user grow
-    ```
+```sh
+  LDFLAGS="-L$(brew --prefix)/lib" CFLAGS="-I$(brew --prefix)/include" pip3 install --global-option="--with-libyaml" --force pyyaml
+  pip3 install --user grow
+```
 
-  **Linux**
-   ```sh
-   $ pip3 install --global-option="--with-libyaml" --force pyyaml
-   $ pip3 install --user grow
-   ```
+**Linux**
+
+```sh
+ $ pip3 install --global-option="--with-libyaml" --force pyyaml
+ $ pip3 install --user grow
+```
 
 ### Fork & clone the repository
 
@@ -100,7 +103,7 @@ $ cd amp.dev
 $ npm install
 ```
 
-### Develop
+## Develop
 
 If it's your first time working on amp.dev, it is recommended to bootstrap your local environment. To do so, make sure you have set up a valid [GitHub access token](https://github.com/settings/tokens) in an environment variable named `AMP_DOC_TOKEN` like so:
 
@@ -126,9 +129,25 @@ This command prints a lot to the shell and will most likely end on `Server ready
 
 You can contribute your changes back to the main repository by [creating a pull request](https://help.github.com/en/articles/about-pull-requests).
 
-### Maintenance
+## Setup with Docker
+
+We provide a Dockerfile for development based on one of the official Python-images. When using this you can skip setting up Python and a local installation of Grow on your machine. Though make sure you completed all other installation steps, like cloning the repository, installing all Node.js dependencies and exporting a valid GitHub token as outlined in [Fork & clone the repository](#fork--clone-the-repository) and [Develop](#develop). When those steps are completed instead of running the project with `npm run develop` you can build a development Docker image with the followiung command, run from the project root directory:
+
+```sh
+$ npx gulp developImageBuild
+```
+
+After the image has been successfully built start a container with the following command:
+
+```sh
+$ npx gulp developContainer
+```
+
+This command also mounts the pages directory, meaning all changes you are doing to any of the markdown files in `pages/content` are reflected to the container and can be reviewed without rebuilding the image.
+
+## Maintenance
 
-#### Documents
+### Documents
 
 Made changes to a lot of Grow documents at once and not quite sure if all references are still valid? You can run `npm run lint:grow` to pick up broken ones.
 

diff --git a/frontend21/webpack.config.js b/frontend21/webpack.config.js
@@ -2,7 +2,7 @@ const path = require('path');
 
 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const WebpackBuildNotifierPlugin = require('webpack-build-notifier');
 const FileManagerPlugin = require('filemanager-webpack-plugin');
@@ -22,7 +22,7 @@ module.exports = (env, argv) => {
       path: path.join(process.cwd(), 'dist'),
     },
     optimization: {
-      minimizer: isDevelopment ? [] : [new OptimizeCSSAssetsPlugin({})],
+      minimizer: isDevelopment ? [] : [new CssMinimizerWebpackPlugin({})],
       splitChunks: {
         cacheGroups: {
           main: {

diff --git a/gulpfile.js/build.js b/gulpfile.js/build.js
@@ -34,7 +34,7 @@ const git = require('@lib/utils/git');
 const ComponentReferenceImporter = require('@lib/pipeline/componentReferenceImporter');
 const SpecImporter = require('@lib/pipeline/specImporter');
 const RecentGuides = require('@lib/pipeline/recentGuides');
-const gulpSass = require('@mr-hope/gulp-sass');
+const gulpSass = require('gulp-sass')(require('sass'));
 const importRoadmap = require('./import/importRoadmap.js');
 const importWorkingGroups = require('./import/importWorkingGroups.js');
 const importAdVendorList = require('./import/importAdVendorList.js');
@@ -102,7 +102,7 @@ function sass() {
 
   return gulp
     .src(`${project.paths.SCSS}/**/[^_]*.scss`)
-    .pipe(gulpSass.sassSync(options))
+    .pipe(gulpSass.sync(options))
     .on('error', function (e) {
       console.error(e);
       // eslint-disable-next-line no-invalid-this
@@ -531,8 +531,8 @@ function persistBuildInfo(done) {
     'by': process.env.GITHUB_ACTOR || git.user(),
     'environment': config.environment,
     'commit': {
-      'sha': process.env.GITHUB_SHA || git.version,
-      'message': git.message,
+      'sha': process.env.GITHUB_SHA || git.version(),
+      'message': git.message(),
     },
   };
 

diff --git a/gulpfile.js/develop.js b/gulpfile.js/develop.js
@@ -23,6 +23,8 @@ const config = require('@lib/config');
 const signale = require('signale');
 const build = require('./build.js');
 const {samplesBuilder} = require('@lib/build/samplesBuilder');
+const {sh} = require('@lib/utils/sh.js');
+const {PAGES_SRC} = require('@lib/utils/project').paths;
 
 function bootstrap(done) {
   gulp.parallel(
@@ -69,6 +71,18 @@ async function run() {
   new Platform().start();
 }
 
+function developImageBuild() {
+  return sh(`docker build . -t amp.dev -f Dockerfile.development`);
+}
+
+function developContainer() {
+  return sh(
+    `docker run -v ${PAGES_SRC}:/amp-dev/pages/content/amp-dev --publish 8080:8080 -t amp.dev`
+  );
+}
+
 exports.bootstrap = bootstrap;
+exports.developImageBuild = developImageBuild;
 exports.develop = develop;
+exports.developContainer = developContainer;
 exports.extract = extract;