diff --git a/Dockerfile.develop b/Dockerfile.develop new file mode 100644 index 00000000000..65458aac8f2 --- /dev/null +++ b/Dockerfile.develop @@ -0,0 +1,46 @@ +FROM node:10-alpine + +# Support custom branches of the react-sdk and js-sdk. This also helps us build +# images of riot-web develop. +ARG USE_CUSTOM_SDKS=false +ARG REACT_SDK_REPO="https://github.com/matrix-org/matrix-react-sdk.git" +ARG REACT_SDK_BRANCH="master" +ARG JS_SDK_REPO="https://github.com/matrix-org/matrix-js-sdk.git" +ARG JS_SDK_BRANCH="master" + +# CRLF -> LF conversion +RUN apk add --no-cache git dos2unix + +WORKDIR /riot + +# Install deps-only into separate Docker layer and run Riot when the container +# starts, mount source as a volume and keep dev environment consistent +COPY scripts /riot/scripts +RUN dos2unix /riot/scripts/docker-link-repos.sh \ + && sh /riot/scripts/docker-link-repos.sh + +# Cache package.json +COPY src/header /riot/src/ +COPY package.json yarn.lock /riot/ + +# Remove 'prepare' script because there is NO config in yarn and npm for +# disabling it and is not necessary for development build +RUN yarn --network-timeout=100000 install + +# Overlay src files with the original ones in case something was left out +# from explicit copying above and doesn't work with mounting properly such as: +# +# "ERROR in Entry module not found: Error: Can't resolve './src' in '/riot'" +# "ERROR in multi (webpack)-dev-server/client?http://0.0.0.0 ./src" +COPY . /riot + +# Assemble entrypoint that copies the config at container start +# and runs webpack server. Mount volume to /src/src for developing. +RUN echo 'mkdir /riot/webapp' >> /entry.sh \ + && echo 'cp /riot/config.sample.json /riot/webapp/config.json' >> /entry.sh \ + && echo 'sh /riot/scripts/docker-link-repos.sh' >> /entry.sh \ + && echo 'yarn start' >> /entry.sh \ + && chmod +x /entry.sh + +# run webpack server to change the code on-the-go +ENTRYPOINT /entry.sh diff --git a/README.md b/README.md index 4db8702bb19..33147859776 100644 --- a/README.md +++ b/README.md @@ -304,6 +304,72 @@ If any of these steps error with, `file table overflow`, you are probably on a m which has a very low limit on max open files. Run `ulimit -Sn 1024` and try again. You'll need to do this in each new terminal you open before building Riot. +Using Docker image for development +---------------------------------- + +Avoids installation of Node, NPM and the rest of the environment by providing +the same environment that's used in serving Riot via Dockerfile officially +and at the same time allows to plug in the folder with source files so that +you can edit outside of Docker container and let it compile inside where +it is safely separated from your machine or any custom configuration. + +Note that hot-reloading via an open websocket might not work out of the box +on Windows, check [WebPack ``watchOptions.poll``](https://webpack.js.org/configuration/watch/) +as a workaround. + +Using this approach provides a reproducible environment between you and +the maintainers if you share your changes in a pull request. + +Run it with: + +```bash +# build image +docker build --tag vectorim/riot-web:develop --file Dockerfile.develop . + +# remove old container or do nothing +docker rm -f riot || true + +# run a new container with src folder mounted from git repository +# located on the host machine. You can mount additional folders +# such as res with additional --volume $PWD/res:/src/res +docker run --interactive --tty \ + --publish :8080 \ + --volume $PWD/src:/riot/src \ + --name riot \ + vectorim/riot-web:develop +``` + +And access ``yarn`` and other commands from inside of the container: + +```bash +# run shell process from container +docker exec -it riot sh + +# run yarn process from container +docker exec -it riot yarn +``` + +In case you want to use own clones of +[matrix-react-sdk](https://github.com/matrix-org/matrix-react-sdk) +or +[matrix-js-sdk](https://github.com/matrix-org/matrix-js-sdk) +set additional environment variable ``USE_CUSTOM_SDKS`` in ``docker build`` +if it's a one-time operation. In case you want to use own clone and edit +it at the same time as you edit ``riot-web``, set the environement +variable in ``docker run`` command. + +```bash +docker run --interactive --tty \ + --publish :8080 \ + --volume $PWD/src:/riot/src \ + --volume :/riot/js-sdk \ + --volume :/riot/react-sdk \ + --env USE_CUSTOM_SDKS=true \ + --env NO_CLONE=true \ + --name riot \ + vectorim/riot-web:develop +``` + Running the tests ----------------- diff --git a/scripts/docker-link-repos.sh b/scripts/docker-link-repos.sh index 9f17188ed63..f0d0d6b7ec8 100644 --- a/scripts/docker-link-repos.sh +++ b/scripts/docker-link-repos.sh @@ -9,17 +9,27 @@ then fi echo "Linking js-sdk" -git clone $JS_SDK_REPO js-sdk +if [ -z ${NO_CLONE+x} ] +then + git clone $JS_SDK_REPO js-sdk + cd js-sdk + git checkout $JS_SDK_BRANCH + cd .. +fi cd js-sdk -git checkout $JS_SDK_BRANCH yarn link yarn --network-timeout=100000 install cd ../ echo "Linking react-sdk" -git clone $REACT_SDK_REPO react-sdk +if [ -z ${NO_CLONE+x} ] +then + git clone $REACT_SDK_REPO react-sdk + cd react-sdk + git checkout $REACT_SDK_BRANCH + cd .. +fi cd react-sdk -git checkout $REACT_SDK_BRANCH yarn link yarn link matrix-js-sdk yarn --network-timeout=100000 install