Fakultas Ilmu Komputer UI

Commit c0fd1b72 authored by Zamil Majdy's avatar Zamil Majdy
Browse files

#140382397 Setup Django + React Webpack

parent d66f17a3
...@@ -3,4 +3,5 @@ node_modules ...@@ -3,4 +3,5 @@ node_modules
.pyc .pyc
venv venv
assets/bundles/* assets/bundles/*
.idea .idea
\ No newline at end of file webpack-stats.json
# How To Build # How To Build
##Requirements ## Requirements
* Node + Npm * Node + Npm (https://nodejs.org/dist/v6.9.5/node-v6.9.5-x64.msi)
* Python + Pip * 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
##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 :
* `git clone https://gitlab.com/PPL2017csui/PPLA1.git kape` * `git clone https://gitlab.com/PPL2017csui/PPLA1.git kape`
* `cd kape` * `cd kape`
...@@ -26,10 +16,16 @@ Detailed : ...@@ -26,10 +16,16 @@ Detailed :
For Windows you need to run `npm run webpack` and `python manage.py runserver` in different terminal. 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` `python manage.py migrate`
Now go to localhost:8000 and you'll see the App running! 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). This project uses [Django Webpack Loader](https://github.com/owais/django-webpack-loader).
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
import React from 'react'; import React from 'react';
import Home from './app'; import Dashboard from './dashboard';
import ReactDOM from 'react-dom'; 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 = () => ( export const Profile = () => (
<MuiThemeProvider> <Segment>
<Home /> <img src='http://semantic-ui.com/images/wireframe/media-paragraph.png' />
</MuiThemeProvider> </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')) ReactDOM.render( <App />, document.getElementById('react-app'))
...@@ -4,9 +4,10 @@ ...@@ -4,9 +4,10 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Django React Awesome App</title> <title>Yuk Cari Tempat Kape :)</title>
<link rel="stylesheet" href="{% static 'css/custom.css' %}"> <link rel="stylesheet" href="{% static 'css/custom.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.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> </head>
<body> <body>
......
...@@ -33,6 +33,7 @@ INSTALLED_APPS = [ ...@@ -33,6 +33,7 @@ INSTALLED_APPS = [
'django.contrib.staticfiles', 'django.contrib.staticfiles',
'webpack_loader', 'webpack_loader',
'core', 'core',
'rest_framework'
] ]
MIDDLEWARE = [ MIDDLEWARE = [
...@@ -71,8 +72,12 @@ WSGI_APPLICATION = 'kape.wsgi.application' ...@@ -71,8 +72,12 @@ WSGI_APPLICATION = 'kape.wsgi.application'
DATABASES = { DATABASES = {
'default': { 'default': {
'ENGINE': 'django.db.backends.sqlite3', 'ENGINE': 'django.db.backends.postgresql_psycopg2',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), 'NAME': 'kape',
'USER': 'postgres',
'PASSWORD': 'hue',
'HOST': 'localhost',
'PORT': '',
} }
} }
...@@ -114,3 +119,11 @@ USE_TZ = True ...@@ -114,3 +119,11 @@ USE_TZ = True
# https://docs.djangoproject.com/en/1.10/howto/static-files/ # https://docs.djangoproject.com/en/1.10/howto/static-files/
STATIC_URL = '/static/' 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
...@@ -15,9 +15,15 @@ Including another URLconf ...@@ -15,9 +15,15 @@ Including another URLconf
""" """
from django.conf.urls import url, include from django.conf.urls import url, include
from django.contrib import admin 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 = [ urlpatterns = [
url(r"^api/", include(router.urls)),
url(r'^admin/', admin.site.urls), url(r'^admin/', admin.site.urls),
url(r'', include('core.urls')), url(r'', include('core.urls')),
url(r'^api/api-auth/', include('rest_framework.urls', namespace='rest_framework'))
] ]
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
...@@ -3,5 +3,6 @@ Django==1.10.5 ...@@ -3,5 +3,6 @@ Django==1.10.5
django-webpack-loader==0.4.1 django-webpack-loader==0.4.1
djangorestframework==3.5.4 djangorestframework==3.5.4
packaging==16.8 packaging==16.8
psycopg2==2.6.2
pyparsing==2.1.10 pyparsing==2.1.10
six==1.10.0 six==1.10.0
\ No newline at end of file
{"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
...@@ -13,6 +13,7 @@ module.exports = { ...@@ -13,6 +13,7 @@ module.exports = {
}, },
plugins: [ plugins: [
new webpack.HotModuleReplacementPlugin(),
new BundleTracker({filename: './webpack-stats.json'}), new BundleTracker({filename: './webpack-stats.json'}),
], ],
......
Supports Markdown
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