From c0fd1b72fd1b001fcb31890bff625df17bfa78fd Mon Sep 17 00:00:00 2001 From: Zamil Majdy <z.majdy1996@gmail.com> Date: Thu, 2 Mar 2017 13:08:07 +0700 Subject: [PATCH] #140382397 Setup Django + React Webpack --- .gitignore | 3 ++- README.md | 26 +++++++++++--------------- assets/js/app.jsx | 17 ----------------- assets/js/index.js | 22 ++++++++++++++++------ core/templates/core/index.html | 7 ++++--- kape/settings.py | 17 +++++++++++++++-- kape/urls.py | 6 ++++++ kape/views/user.py | 15 +++++++++++++++ package.json | 6 ++++-- requirements.txt | 1 + webpack-stats.json | 1 - webpack.config.js | 1 + 12 files changed, 75 insertions(+), 47 deletions(-) delete mode 100644 assets/js/app.jsx create mode 100644 kape/views/user.py delete mode 100644 webpack-stats.json diff --git a/.gitignore b/.gitignore index 9badb78b..d3e8485e 100644 --- a/.gitignore +++ b/.gitignore @@ -3,4 +3,5 @@ node_modules .pyc venv assets/bundles/* -.idea \ No newline at end of file +.idea +webpack-stats.json diff --git a/README.md b/README.md index ef00f49a..ded51463 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,11 @@ # How To Build -##Requirements +## Requirements -* Node + Npm -* Python + Pip +* Node + Npm (https://nodejs.org/dist/v6.9.5/node-v6.9.5-x64.msi) +* Python + Pip (https://www.python.org/ftp/python/3.6.0/python-3.6.0-embed-amd64.zip and https://pip.pypa.io/en/stable/installing/) - -##Installation - -####In two commands - - -`git clone https://gitlab.com/PPL2017csui/PPLA1.git kape && cd kape && rm -drf .git && git init && npm install && pip install -r requirements.txt && npm run webpack` - -`python manage.py runserver` - -Detailed : +## Installation * `git clone https://gitlab.com/PPL2017csui/PPLA1.git kape` * `cd kape` @@ -26,10 +16,16 @@ Detailed : For Windows you need to run `npm run webpack` and `python manage.py runserver` in different terminal. -###Migrate the database +## Migrating the database `python manage.py migrate` Now go to localhost:8000 and you'll see the App running! +## Database + +Install postgreSQL +Run this quert `create user kape password 'kape' createdb` to create database and user. +Run `python manage.py migrate` + This project uses [Django Webpack Loader](https://github.com/owais/django-webpack-loader). diff --git a/assets/js/app.jsx b/assets/js/app.jsx deleted file mode 100644 index 2d8b4848..00000000 --- a/assets/js/app.jsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react' - -function Home() { - return ( - <div className="container"> - <div className="row"> - <div className="col-md-2"></div> - <div className="well col-md-8"> - <h1 className="center">Yuk develop KaPe :)</h1> - </div> - <div className="col-md-2"></div> - </div> - </div> - ) -} - -export default Home diff --git a/assets/js/index.js b/assets/js/index.js index b4e124d7..ea1d1398 100644 --- a/assets/js/index.js +++ b/assets/js/index.js @@ -1,13 +1,23 @@ import React from 'react'; -import Home from './app'; +import Dashboard from './dashboard'; import ReactDOM from 'react-dom'; +import {Router, Route, browserHistory} from 'react-router'; -import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; +import {Segment} from 'semantic-ui-react'; -const App = () => ( - <MuiThemeProvider> - <Home /> - </MuiThemeProvider> +export const Profile = () => ( + <Segment> + <img src='http://semantic-ui.com/images/wireframe/media-paragraph.png' /> + </Segment> +); + +export const App = () => ( + <Router history={browserHistory}> + <Route path="/" component={Dashboard}> + <Route path="profile" component={Profile} /> + <Route path="users" component={Profile} /> + </Route> + </Router> ); ReactDOM.render( <App />, document.getElementById('react-app')) diff --git a/core/templates/core/index.html b/core/templates/core/index.html index b4d89ec6..0edccb07 100644 --- a/core/templates/core/index.html +++ b/core/templates/core/index.html @@ -4,9 +4,10 @@ <html> <head> <meta charset="UTF-8"> - <title>Django React Awesome App</title> - <link rel="stylesheet" href="{% static 'css/custom.css' %}"> - <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"> + <title>Yuk Cari Tempat Kape :)</title> + <link rel="stylesheet" href="{% static 'css/custom.css' %}"> + <link rel="stylesheet" href="{% static 'css/semantic-ui/semantic.min.css' %}"> + <link rel="icon" type="image/png" href="{% static 'img/logo-sm.png'%}" sizes="32x32" /> </head> <body> diff --git a/kape/settings.py b/kape/settings.py index 25848ce2..490f77b8 100644 --- a/kape/settings.py +++ b/kape/settings.py @@ -33,6 +33,7 @@ INSTALLED_APPS = [ 'django.contrib.staticfiles', 'webpack_loader', 'core', + 'rest_framework' ] MIDDLEWARE = [ @@ -71,8 +72,12 @@ WSGI_APPLICATION = 'kape.wsgi.application' DATABASES = { 'default': { - 'ENGINE': 'django.db.backends.sqlite3', - 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), + 'ENGINE': 'django.db.backends.postgresql_psycopg2', + 'NAME': 'kape', + 'USER': 'postgres', + 'PASSWORD': 'hue', + 'HOST': 'localhost', + 'PORT': '', } } @@ -114,3 +119,11 @@ USE_TZ = True # https://docs.djangoproject.com/en/1.10/howto/static-files/ STATIC_URL = '/static/' + +REST_FRAMEWORK = { + # Use Django's standard `django.contrib.auth` permissions, + # or allow read-only access for unauthenticated users. + 'DEFAULT_PERMISSION_CLASSES': [ + 'rest_framework.permissions.DjangoModelPermissionsOrAnonReadOnly' + ] +} \ No newline at end of file diff --git a/kape/urls.py b/kape/urls.py index f84d5530..600d3a4d 100644 --- a/kape/urls.py +++ b/kape/urls.py @@ -15,9 +15,15 @@ Including another URLconf """ from django.conf.urls import url, include from django.contrib import admin +from rest_framework import routers +from kape.views.user import UserViewSet +router = routers.DefaultRouter() +router.register(r'users', UserViewSet) urlpatterns = [ + url(r"^api/", include(router.urls)), url(r'^admin/', admin.site.urls), url(r'', include('core.urls')), + url(r'^api/api-auth/', include('rest_framework.urls', namespace='rest_framework')) ] diff --git a/kape/views/user.py b/kape/views/user.py new file mode 100644 index 00000000..d8f82994 --- /dev/null +++ b/kape/views/user.py @@ -0,0 +1,15 @@ +from django.contrib.auth.models import User +from rest_framework import serializers, viewsets + + +# Serializers define the API representation. +class UserSerializer(serializers.HyperlinkedModelSerializer): + class Meta: + model = User + fields = ('url', 'username', 'email', 'is_staff') + + +# ViewSets define the view behavior. +class UserViewSet(viewsets.ModelViewSet): + queryset = User.objects.all() + serializer_class = UserSerializer diff --git a/package.json b/package.json index 5fcf06d5..48846c4c 100644 --- a/package.json +++ b/package.json @@ -26,8 +26,10 @@ "axios": "^0.14.0", "babel-core": "^6.17.0", "babel-preset-react": "^6.16.0", - "react-tap-event-plugin": "^2.0.1", "material-ui": "^0.16.0", - "react-dom": "^15.3.2" + "react-dom": "^15.3.2", + "react-router": "^3.0.2", + "react-tap-event-plugin": "^2.0.1", + "semantic-ui-react": "^0.65.0" } } diff --git a/requirements.txt b/requirements.txt index 549b7997..bc8cadb5 100644 --- a/requirements.txt +++ b/requirements.txt @@ -3,5 +3,6 @@ Django==1.10.5 django-webpack-loader==0.4.1 djangorestframework==3.5.4 packaging==16.8 +psycopg2==2.6.2 pyparsing==2.1.10 six==1.10.0 \ No newline at end of file diff --git a/webpack-stats.json b/webpack-stats.json deleted file mode 100644 index 1d540f09..00000000 --- a/webpack-stats.json +++ /dev/null @@ -1 +0,0 @@ -{"status":"done","chunks":{"main":[{"name":"main-9c374636943b76722727.js","path":"C:\\Users\\zmajd\\Documents\\code\\djangoreact\\assets\\bundles\\main-9c374636943b76722727.js"}]}} \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index bc867650..23701902 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -13,6 +13,7 @@ module.exports = { }, plugins: [ + new webpack.HotModuleReplacementPlugin(), new BundleTracker({filename: './webpack-stats.json'}), ], -- GitLab