diff --git a/Makefile.local b/Makefile.local index 8501fee3..5939f0b3 100644 --- a/Makefile.local +++ b/Makefile.local @@ -1,43 +1,43 @@ TEST_DIRS := ./swh/web/tests .PHONY: build-webpack-dev build-webpack-dev: - npm run build-dev + yarn build-dev .PHONY: build-webpack-dev-no-verbose build-webpack-dev-no-verbose: - npm run build-dev >/dev/null + yarn build-dev >/dev/null .PHONY: build-webpack-prod build-webpack-prod: - npm run build + yarn build .PHONY: run-migrations run-migrations: python3 swh/web/manage.py migrate 2>/dev/null python3 swh/web/manage.py createcachetable 2>/dev/null .PHONY: run-migrations-prod run-migrations-prod: django-admin migrate --settings=swh.web.settings.production 2>/dev/null django-admin createcachetable --settings=swh.web.settings.production 2>/dev/null run-django-webpack-devserver: run-migrations - bash -c "trap 'trap - SIGINT SIGTERM ERR; kill %1' SIGINT SIGTERM ERR; npm run start-dev & cd swh/web && python3 manage.py runserver --nostatic" + bash -c "trap 'trap - SIGINT SIGTERM ERR; kill %1' SIGINT SIGTERM ERR; yarn start-dev & cd swh/web && python3 manage.py runserver --nostatic" run-django-webpack-dev: build-webpack-dev run-migrations python3 swh/web/manage.py runserver --nostatic run-django-webpack-prod: build-webpack-prod run-migrations-prod python3 swh/web/manage.py runserver --nostatic --settings=swh.web.settings.production run-django-server-dev: run-migrations python3 swh/web/manage.py runserver --nostatic run-django-server-prod: run-migrations-prod python3 swh/web/manage.py runserver --nostatic --settings=swh.web.settings.production run-gunicorn-server: run-migrations gunicorn3 -b 127.0.0.1:5004 swh.web.wsgi diff --git a/README.md b/README.md index 42acbe3a..caee3e1c 100644 --- a/README.md +++ b/README.md @@ -1,106 +1,94 @@ # swh-web This repository holds the development of Software Heritage web applications: * swh-web API (https://archive.softwareheritage.org/api): enables to query the content of the archive through HTTP requests and get responses in JSON or YAML. * swh-web browse (https://archive.softwareheritage.org/browse): graphical interface that eases the navigation in the archive. Documentation about how to use these components but also the details of their URI schemes can be found in the docs folder. The produced HTML documentation can be read and browsed at https://docs.softwareheritage.org/devel/swh-web/index.html. ## Technical details Those applications are powered by: * [Django Web Framework](https://www.djangoproject.com/) on the backend side with the following extensions enabled: * [django-rest-framework](http://www.django-rest-framework.org/) * [django-webpack-loader](https://github.com/owais/django-webpack-loader) * [django-js-reverse](http://django-js-reverse.readthedocs.io/en/latest/) * [webpack](https://webpack.js.org/) on the frontend side for better static assets management, including: - * assets dependencies management and retrieval through [npm](https://www.npmjs.com/) + * assets dependencies management and retrieval through [yarn](https://yarnpkg.com/en/) * linting of custom javascript code (through [eslint](https://eslint.org/)) and stylesheets (through [stylelint](https://stylelint.io/)) * use of [es6](http://es6-features.org) syntax and advanced javascript feature like [async/await](https://javascript.info/async-await) or [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) thanks to [babel](https://babeljs.io/) (es6 to es5 transpiler and polyfills provider) * assets minification (using [UglifyJS](https://github.com/mishoo/UglifyJS2) and [cssnano](http://cssnano.co/)) but also dead code elimination for production use ## How to build and run ### Requirements First you will need [Python 3](https://www.python.org) and a complete [swh development environment](https://forge.softwareheritage.org/source/swh-environment/) installed. To run the backend, you need to have the following Python 3 modules installed: * beautifulsoup4 * django >= 1.10.7 * djangorestframework >= 3.4.0 * django_webpack_loader * django_js_reverse * docutils * file_magic >= 0.3.0 * htmlmin * lxml * pygments * pypandoc * python-dateutil * pyyaml * requests -To compile the frontend assets, you need to have [nodejs](https://nodejs.org/en/) >= 8.x (preferably version 8.x LTS) and [npm](https://www.npmjs.com/) (or [yarn](https://yarnpkg.com/en/)) installed. If you are on Debian stretch, you can easily install an up to date nodejs/npm from the stretch-backports repository or by following the instructions located at https://github.com/nodesource/distributions. +To compile the frontend assets, you need to have [nodejs](https://nodejs.org/en/) >= 8.x and [yarn](https://yarnpkg.com/en/) installed. If you are on Debian stretch, you can easily install an up to date nodejs from the stretch-backports repository while packages for yarn can be installed by following [these instructions](https://yarnpkg.com/en/docs/install#debian-stable). Once you have installed nodejs, issue the following command in the root directory of swh-web in order to retrieve all the frontend dependencies: -``` -$ npm install -``` - -or if you prefer to use yarn (faster than npm): - ``` $ yarn install ``` Please note that the static assets bundles generated by webpack are not stored in the git repository. Follow the instructions below in order to generate them in order to be able to run the frontend part of the web applications. ### Make targets Below is the list of available make targets that can be executed from the root directory of swh-web in order to build and/or execute the web applications under various configurations: * **run-django-webpack-devserver**: Compile and serve not optimized (without mignification and dead code elimination) frontend static assets using [webpack-dev-server](https://github.com/webpack/webpack-dev-server) and run django server with development settings. This is the recommended target to use when developing swh-web as it enables automatic reloading of backend and frontend part of the applications when modifying source files (*.py, *.js, *.css, *.html). * **run-django-webpack-dev**: Compile not optimized (no minification, no dead code elimination) frontend static assets using webpack and run django server with development settings. This is the recommended target when one only wants to develop the backend side of the application. * **run-django-webpack-prod**: Compile optimized (with minification and dead code elimination) frontend static assets using webpack and run django server with production settings. This is useful to test the applications in production mode (with the difference that static assets are served by django). Production settings notably enable advanced django caching and you will need to have [memcached](https://memcached.org/) installed for that feature to work. * **run-django-server-dev**: Run the django server with development settings but without compiling frontend static assets through webpack. * **run-django-server-prod**: Run the django server with production settings but without compiling frontend static assets through webpack. * **run-gunicorn-server**: Run the web applications with production settings in a [gunicorn](http://gunicorn.org/) worker as they will be in real production environment. Once one of these targets executed, the web applications can be executed by pointing your browser to http://localhost:5004. ### Npm/Yarn targets -Below is a list of available npm/yarn targets in order to only execute the frontend static assets compilation (no web server will be executed): +Below is a list of available yarn targets in order to only execute the frontend static assets compilation (no web server will be executed): * **build-dev**: compile not optimized (without mignification and dead code elimination) frontend static assets and store the results in the `swh/web/static` folder. * **build**: compile optimized (with mignification and dead code elimination) frontend static assets and store the results in the `swh/web/static` folder. **The build target must be executed prior performing the Debian packaging of swh-web** in order for the package to contain the optimized assets dedicated to production environment. To execute these targets, issue the following commmand: -``` -$ npm run -``` - -or if you prefer using yarn: - ``` $ yarn ``` diff --git a/package.json b/package.json index 270201f8..802cee72 100644 --- a/package.json +++ b/package.json @@ -1,97 +1,97 @@ { "name": "swh-web", "version": "0.0.181", "description": "Static assets management for swh-web", "scripts": { - "build-dev": "NODE_ENV=development webpack --config ./swh/web/assets/config/webpack.config.development.js --display-modules --progress --colors", + "build-dev": "NODE_ENV=development webpack --config ./swh/web/assets/config/webpack.config.development.js --display-modules --progress --colors", "start-dev": "NODE_ENV=development nodemon --watch swh/web/api --watch swh/web/browse --watch swh/web/templates --watch swh/web/common --watch swh/web/settings --watch swh/web/assets/config --ext py,html,js --exec \"webpack-dev-server --config ./swh/web/assets/config/webpack.config.development.js --progress --colors\"", - "build": "NODE_ENV=production webpack --config ./swh/web/assets/config/webpack.config.production.js --display-modules --progress --colors" + "build": "NODE_ENV=production webpack --config ./swh/web/assets/config/webpack.config.production.js --display-modules --progress --colors" }, "repository": { "type": "git", "url": "https://forge.softwareheritage.org/source/swh-web" }, "author": "The Software Heritage developers", "license": "AGPL-3.0-or-later", "devDependencies": { "@babel/core": "^7.3.3", "@babel/plugin-syntax-dynamic-import": "^7.2.0", "@babel/plugin-transform-runtime": "^7.2.0", "@babel/polyfill": "^7.2.5", "@babel/preset-env": "^7.3.1", "@babel/runtime-corejs2": "^7.3.1", "admin-lte": "^3.0.0-alpha", "autoprefixer": "^9.4.9", "babel-eslint": "^10.0.1", "babel-loader": "^8.0.5", "bootstrap": "^4.3.1", "bootstrap-loader": "^3.0.2", "bootstrap-year-calendar-bs4": "^1.0.0", "cache-loader": "^2.0.1", "clean-webpack-plugin": "^1.0.1", "clipboard": "^2.0.4", "copy-webpack-plugin": "^5.0.0", "css-loader": "^2.1.0", "d3": "^5.8.2", "datatables.net-bs4": "^1.10.19", "eslint": "^5.14.1", "eslint-loader": "^2.1.2", "eslint-plugin-import": "^2.16.0", "eslint-plugin-node": "^8.0.1", "eslint-plugin-promise": "^4.0.1", "eslint-plugin-standard": "^4.0.0", "exports-loader": "^0.7.0", "expose-loader": "^0.7.5", "file-loader": "^3.0.1", "font-awesome": "^4.7.0", "highlight.js": "^9.15.2", "highlightjs-line-numbers.js": "^2.6.0", "iframe-resizer": "^3.6.5", "imports-loader": "^0.8.0", "jquery": "^3.3.1", "js-cookie": "^2.2.0", "less": "^3.9.0", "less-loader": "^4.1.0", "mini-css-extract-plugin": "^0.5.0", "node-sass": "^4.11.0", "nodemon": "^1.18.9", "object-fit-images": "^3.2.4", "octicons": "^8.4.2", "open-iconic": "^1.1.1", "optimize-css-assets-webpack-plugin": "^5.0.1", "org": "^0.2.0", "pdfjs-dist": "^2.0.943", "popper.js": "^1.14.7", "postcss-loader": "^3.0.0", "postcss-normalize": "^7.0.1", "resolve-url-loader": "^3.0.1", "robotstxt-webpack-plugin": "^5.0.0", "sass-loader": "^7.1.0", "showdown": "^1.9.0", "style-loader": "^0.23.1", "stylelint": "^9.10.1", "stylelint-config-standard": "^18.2.0", "terser-webpack-plugin": "^1.2.3", "typeface-alegreya": "0.0.69", "typeface-alegreya-sans": "0.0.54", "url-loader": "^1.1.2", "url-search-params-polyfill": "^5.0.0", "validate.js": "^0.12.0", "waypoints": "^4.0.1", "webpack": "^4.29.5", "webpack-bundle-tracker": "^0.4.2-beta", "webpack-cli": "^3.2.3", "webpack-dev-server": "^3.2.1", "whatwg-fetch": "^3.0.0" }, "browserslist": [ "cover 99.5%", "not dead" ], "postcss": { "plugins": { "autoprefixer": {}, "postcss-normalize": {} } } }