Skip to content

C
course-discovery
Commit fdd5bf23 by Clinton Blackburn
Options

Installed Webpack 

ECOM-5776
parent e251012e
Showing with 176 additions and 66 deletions
.gitignore
......@@ -89,3 +89,5 @@ course_discovery/media/
course_discovery/static/bower_components/
docs/_build/
node_modules/
course_discovery/static/bundles/
webpack-stats.json
Makefile
.DEFAULT_GOAL := test
NODE_BIN=./node_modules/.bin
NODE_BIN=$(CURDIR)/node_modules/.bin
.PHONY: accept clean clean_static compile_translations detect_changed_source_translations dummy_translations extract_translations \
fake_translations help html_coverage migrate open-devstack production-requirements pull_translations quality requirements.js \
requirements start-devstack static stop-devstack test validate validate_translations docs
requirements start-devstack static stop-devstack test validate validate_translations docs static.dev static.watch
include .travis/docker.mk
......@@ -13,11 +13,18 @@ help: ## Display this help message
@perl -nle'print $& if m{^[\.a-zA-Z_-]+:.*?## .*$$}' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m %-25s\033[0m %s\n", $$1, $$2}'
static: ## Gather all static assets for production
$(NODE_BIN)/webpack --config webpack.config.js --display-error-details --progress --optimize-minimize
python manage.py collectstatic --noinput
python manage.py compress -v3 --force
static.dev:
$(NODE_BIN)/webpack --config webpack.config.js --display-error-details --progress
static.watch:
$(NODE_BIN)/webpack --config webpack.config.js --display-error-details --progress --watch
clean_static: ## Remove all generated static files
rm -rf course_discovery/assets/ course_discovery/static/build/
rm -rf course_discovery/assets/ course_discovery/static/bundles/
clean: ## Delete generated byte code and coverage reports
find . -name '*.pyc' -delete
......
course_discovery/settings/base.py
......@@ -5,8 +5,8 @@ from os.path import abspath, dirname, join
from sys import path
here = lambda *x: join(abspath(dirname(__file__)), *x)
PROJECT_ROOT = here("..")
root = lambda *x: join(abspath(PROJECT_ROOT), *x)
PROJECT_ROOT = here('..')
root = lambda *x: abspath(join(abspath(PROJECT_ROOT), *x))
path.append(root('apps'))
......@@ -52,6 +52,7 @@ THIRD_PARTY_APPS = [
'taggit_autosuggest',
'taggit_serializer',
'solo',
'webpack_loader',
]
PROJECT_APPS = [
......@@ -151,14 +152,12 @@ STATICFILES_FINDERS = (
'compressor.finders.CompressorFinder',
)
COMPRESS_PRECOMPILERS = (
('text/x-scss', 'django_libsass.SassCompiler'),
)
# Minify CSS
COMPRESS_CSS_FILTERS = [
'compressor.filters.css_default.CssAbsoluteFilter',
]
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': 'bundles/',
'STATS_FILE': root('..', 'webpack-stats.json'),
}
}
# TEMPLATE CONFIGURATION
# See: https://docs.djangoproject.com/en/1.8/ref/settings/#templates
......
course_discovery/static/js/catalog-preview.js → course_discovery/static/js/query-preview.js
require('bootstrap-sass');
require('datatables.net-bs')();
var $alertNoResults, $alertQueryInvalid, $query, $table;
function processApiResponse(response) {
......@@ -23,7 +26,7 @@ function getApiResponse(url) {
* Form submission handler. Sends the query to the server and displays the list of courses.\
*/
function onSubmit(e) {
var url = '/api/v1/course_runs/?q=' + encodeURIComponent($query.val());
var url = '/api/v1/course_runs/?limit=100&q=' + encodeURIComponent($query.val());
e.preventDefault();
......@@ -83,6 +86,7 @@ $(document).ready(function () {
$table = $('#courses').DataTable({
info: true,
paging: true,
autoWidth: true,
columns: [
{
title: 'Course Run Key',
......
course_discovery/static/sass/_build.scss
......@@ -15,13 +15,13 @@
// ------------------------------
// #LIB
// ------------------------------
@import "lib";
@import '../bower_components/edx-pattern-library/pattern-library/sass/edx-pattern-library';
@import 'lib';
@import '~edx-pattern-library/pattern-library/sass/edx-pattern-library';
// ------------------------------
// #EXTENSIONS
// ------------------------------
@import "base";
@import 'base';
@import 'publisher/color-palette';
@import "publisher/lib";
@import 'publisher/layout';
......
course_discovery/static/sass/_config.scss
......@@ -6,4 +6,4 @@
// ------------------------------
// #VARIABLES
// ------------------------------
$pattern-library-path: '../bower_components/edx-pattern-library/pattern-library' !default;
$pattern-library-path: '~edx-pattern-library/pattern-library' !default;
course_discovery/static/sass/_lib.scss
......@@ -2,4 +2,4 @@
// edX Course Discovery: Third Party Libraries
// About: third party libraries and dependencies import
@import '../bower_components/breakpoint-sass/stylesheets/breakpoint';
@import '~breakpoint-sass/stylesheets/breakpoint';
course_discovery/static/sass/_ltr.scss
......@@ -16,4 +16,4 @@ $layout-direction: ltr;
// ----------------------------
// #LIB
// ----------------------------
@import '../bower_components/bi-app-sass/bi-app/bi-app-ltr';
@import '~bi-app-sass/bi-app/bi-app-ltr';
course_discovery/static/sass/_rtl.scss
......@@ -16,4 +16,4 @@ $layout-direction: rtl;
// ----------------------------
// #LIB
// ----------------------------
@import '../bower_components/bi-app-sass/bi-app/bi-app-rtl';
@import '~bi-app-sass/bi-app/bi-app-rtl';
course_discovery/static/sass/main-ltr.scss
......@@ -3,7 +3,7 @@
// About: Main left-to-right Sass compile for the edX Course Discovery styling.
@import '../bower_components/bourbon/app/assets/stylesheets/bourbon';
@import '~bourbon/app/assets/stylesheets/bourbon';
// ------------------------------
// #CONFIG - layout direction
// ------------------------------
......
course_discovery/static/sass/main-rtl.scss
......@@ -3,7 +3,7 @@
// About: Main left-to-right Sass compile for the edX Course Discovery styling.
@import '../bower_components/bourbon/app/assets/stylesheets/bourbon';
@import '~bourbon/app/assets/stylesheets/bourbon';
// ------------------------------
// #CONFIG - layout direction
// ------------------------------
......
course_discovery/static/css/catalog-preview.css → course_discovery/static/sass/query-preview.scss
$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';
@import '~datatables.net-bs/css/dataTables.bootstrap.css';
#queryForm {
margin: 25px 0;
}
......
course_discovery/templates/base.html
{# Base template for edX-specific pages. #}
{% load compress %}
{% load static %}
{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html>
......@@ -10,15 +9,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{% endblock title %} | {{ platform_name }}</title>
{% compress css %}
{% block stylesheets %}
{% block css %}
{% if language_bidi %}
<link rel="stylesheet" href="{% static 'sass/main-rtl.scss' %}" type="text/x-scss">
{% render_bundle 'base.style-rtl' 'css' %}
{% else %}
<link rel="stylesheet" href="{% static 'sass/main-ltr.scss' %}" type="text/x-scss">
{% render_bundle 'base.style' 'css' %}
{% endif %}
{% endblock %}
{% endcompress %}
</head>
<body>
......
course_discovery/templates/demo/query_preview.html
{% load static %}
{% extends 'base.html' %}
{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% block title %}
Query Preview
{% endblock title %}
<title>Query Preview | Course Discovery</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"
integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw=="
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.10/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{% static 'css/catalog-preview.css' %}">
</head>
<body>
<div class="container">
{% block css %}
{# NOTE: We are NOT loading base.scss to avoid loading the edX Pattern Library. #}
{% render_bundle 'query-preview.style' 'css' %}
{% endblock %}
{% block js %}
{{ block.super }}
{% render_bundle 'query-preview' 'js' %}
{% endblock %}
{% block content %}
<div class="container">
<h1 class="page-header">Query Preview</h1>
<div class="intro">
......@@ -88,14 +90,16 @@
</form>
<div class="alert alert-warning alert-dismissible hidden" role="alert" id="alertNoResults">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
aria-hidden="true">&times;</span></button>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
The query returned no results.
</div>
<div class="alert alert-danger alert-dismissible hidden" role="alert" id="alertQueryInvalid">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
aria-hidden="true">&times;</span></button>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
The query is invalid.
</div>
......@@ -104,24 +108,12 @@
<table id="courses" class="table table-striped table-bordered" cellspacing="0">
<thead>
<tr>
<th>Course Run Key</th>
<th style="width: 35%">Course Run Key</th>
<th>Name</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A=="
crossorigin="anonymous"></script>
<script type="text/javascript" language="javascript"
src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript"
src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js"></script>
<script src="{% static 'js/catalog-preview.js' %}"></script>
</body>
</html>
</div>
{% endblock %}
package.json
......@@ -6,7 +6,22 @@
"url": "git://github.com/edx/course-discovery"
},
"dependencies": {
"bower": "^1.8.0"
"bootstrap-sass": "^3.3.7",
"bower": "^1.8.0",
"css-loader": "^0.28.4",
"datatables.net": "^1.10.15",
"datatables.net-bs": "^1.10.15",
"edx-pattern-library": "^0.18.1",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"imports-loader": "^0.7.1",
"jquery": "^3.2.1",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"webpack": "^3.3.0",
"webpack-bundle-tracker": "0.2.0"
},
"devDependencies": {
"gulp": "^3.9.1",
......
requirements/base.txt
......@@ -11,7 +11,6 @@ django-filter==1.0.4
django-fsm==2.6.0
django-guardian==1.4.8
django-haystack==2.5.0
django-libsass==0.7
django-simple-history==1.8.1
django-solo==1.1.2
django-sortedm2m==1.4.0
......@@ -21,6 +20,7 @@ django-taggit==0.22.1
django-taggit-autosuggest==0.3.0
django-taggit-serializer==0.1.5
django-waffle==0.11.1
django-webpack-loader==0.5.0
djangorestframework==3.6.3
djangorestframework-csv==1.4.1
djangorestframework-jwt==1.8.0
......
webpack.config.js 0 → 100644
var BundleTracker = require('webpack-bundle-tracker'),
ExtractTextPlugin = require('extract-text-webpack-plugin'),
path = require('path'),
webpack = require('webpack'),
loaders = [
{
loader: 'css-loader',
options: {
minimize: true
}
},
{
loader: 'sass-loader',
options: {
includePaths: [path.resolve('./sass/')]
}
}
],
context = path.join(__dirname, 'course_discovery/static');
module.exports = {
context: context,
entry: {
'base.style': './sass/main-ltr.scss',
'base.style-rtl': './sass/main-rtl.scss',
'query-preview': './js/query-preview.js',
'query-preview.style': './sass/query-preview.scss'
},
output: {
path: path.join(context, './bundles/'),
filename: '[name]-[hash].js'
},
plugins: [
new BundleTracker({filename: './webpack-stats.json'}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
new ExtractTextPlugin('[name]-[hash].css')
],
module: {
rules: [
{
test: /\.s?css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: loaders
})
},
{
test: /\.woff2?$/,
// Inline small woff files and output them below font
use: [{
loader: 'url-loader',
options: {
name: 'font/[name]-[hash].[ext]',
limit: 5000,
mimetype: 'application/font-woff'
}
}]
},
{
test: /\.(ttf|eot|svg)$/,
use: [{
loader: 'file-loader',
options: {
name: 'font/[name]-[hash].[ext]'
}
}]
},
{
test: require.resolve('datatables.net'),
use: 'imports-loader?define=>false'
},
{
test: require.resolve('datatables.net-bs'),
use: 'imports-loader?define=>false'
}
]
},
resolve: {
modules: ['node_modules'],
extensions: ['.css', '.js', '.scss']
}
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment