mirror of
https://github.com/cookiecutter/cookiecutter-django.git
synced 2025-08-08 05:54:53 +03:00
Add Create React App as a possible front-end choice
This commit is contained in:
Michael A. Gonzalez
parent
a40121afd6
commit
29fa9d2eaf
|
|
@ -19,7 +19,7 @@
|
||||||
"use_elasticbeanstalk_experimental": "n",
|
"use_elasticbeanstalk_experimental": "n",
|
||||||
"use_compressor": "n",
|
"use_compressor": "n",
|
||||||
"postgresql_version": ["10", "9.6", "9.5", "9.4", "9.3", "9.2"],
|
"postgresql_version": ["10", "9.6", "9.5", "9.4", "9.3", "9.2"],
|
||||||
"js_task_runner": ["Gulp", "Grunt", "None"],
|
"js_task_runner": ["Gulp", "Grunt", "CreateReactApp", "None"],
|
||||||
"custom_bootstrap_compilation": "n",
|
"custom_bootstrap_compilation": "n",
|
||||||
"open_source_license": ["MIT", "BSD", "GPLv3", "Apache Software License 2.0", "Not open source"]
|
"open_source_license": ["MIT", "BSD", "GPLv3", "Apache Software License 2.0", "Not open source"]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -158,6 +158,62 @@ def remove_gulp_files():
|
||||||
PROJECT_DIRECTORY, filename
|
PROJECT_DIRECTORY, filename
|
||||||
))
|
))
|
||||||
|
|
||||||
|
|
||||||
|
def remove_react_files():
|
||||||
|
"""
|
||||||
|
Removes files needed for create-react-app if it isn't going to be used
|
||||||
|
"""
|
||||||
|
cra_dir_location = os.path.join(PROJECT_DIRECTORY, 'frontend/')
|
||||||
|
if os.path.exists(cra_dir_location):
|
||||||
|
shutil.rmtree(cra_dir_location)
|
||||||
|
|
||||||
|
bundles_dir_location = os.path.join(
|
||||||
|
PROJECT_DIRECTORY,
|
||||||
|
'{{ cookiecutter.project_slug }}',
|
||||||
|
'bundles/'
|
||||||
|
)
|
||||||
|
if os.path.exists(bundles_dir_location):
|
||||||
|
shutil.rmtree(bundles_dir_location)
|
||||||
|
|
||||||
|
for filename in ["index.html", "react-base.html"]:
|
||||||
|
file_path = os.path.join(
|
||||||
|
PROJECT_DIRECTORY,
|
||||||
|
'{{ cookiecutter.project_slug }}',
|
||||||
|
'templates',
|
||||||
|
filename,
|
||||||
|
)
|
||||||
|
os.remove(file_path)
|
||||||
|
|
||||||
|
|
||||||
|
def remove_static_dirs():
|
||||||
|
"""
|
||||||
|
Removes static files not needed for create-react-app
|
||||||
|
"""
|
||||||
|
static_dir_location = os.path.join(
|
||||||
|
PROJECT_DIRECTORY,
|
||||||
|
'{{ cookiecutter.project_slug }}',
|
||||||
|
'static',
|
||||||
|
)
|
||||||
|
for static_asset in ['css', 'fonts', 'images', 'js', 'sass']:
|
||||||
|
static_asset_dir = os.path.join(static_dir_location, static_asset)
|
||||||
|
if os.path.exists(static_asset_dir):
|
||||||
|
shutil.rmtree(static_asset_dir)
|
||||||
|
|
||||||
|
template_dir_location = os.path.join(
|
||||||
|
PROJECT_DIRECTORY,
|
||||||
|
'{{ cookiecutter.project_slug }}',
|
||||||
|
'templates',
|
||||||
|
)
|
||||||
|
for template_sub_dir in ['account', 'bootstrap4', 'pages', 'users']:
|
||||||
|
template_dir = os.path.join(template_dir_location, template_sub_dir)
|
||||||
|
if os.path.exists(template_dir):
|
||||||
|
shutil.rmtree(template_dir)
|
||||||
|
|
||||||
|
for filename in ["403_csrf.html", "404.html", "500.html", "base.html"]:
|
||||||
|
file_path = os.path.join(template_dir_location, filename)
|
||||||
|
os.remove(file_path)
|
||||||
|
|
||||||
|
|
||||||
def remove_packageJSON_file():
|
def remove_packageJSON_file():
|
||||||
"""
|
"""
|
||||||
Removes files needed for grunt if it isn't going to be used
|
Removes files needed for grunt if it isn't going to be used
|
||||||
|
|
@ -243,16 +299,24 @@ if '{{ cookiecutter.use_docker }}'.lower() != 'y':
|
||||||
# Removes all JS task manager files if it isn't going to be used
|
# Removes all JS task manager files if it isn't going to be used
|
||||||
if '{{ cookiecutter.js_task_runner}}'.lower() == 'gulp':
|
if '{{ cookiecutter.js_task_runner}}'.lower() == 'gulp':
|
||||||
remove_grunt_files()
|
remove_grunt_files()
|
||||||
|
remove_react_files()
|
||||||
elif '{{ cookiecutter.js_task_runner}}'.lower() == 'grunt':
|
elif '{{ cookiecutter.js_task_runner}}'.lower() == 'grunt':
|
||||||
remove_gulp_files()
|
remove_gulp_files()
|
||||||
|
remove_react_files()
|
||||||
|
elif '{{ cookiecutter.js_task_runner}}'.lower() == 'createreactapp':
|
||||||
|
remove_gulp_files()
|
||||||
|
remove_grunt_files()
|
||||||
|
remove_static_dirs()
|
||||||
|
remove_packageJSON_file()
|
||||||
else:
|
else:
|
||||||
remove_gulp_files()
|
remove_gulp_files()
|
||||||
remove_grunt_files()
|
remove_grunt_files()
|
||||||
|
remove_react_files()
|
||||||
remove_packageJSON_file()
|
remove_packageJSON_file()
|
||||||
|
|
||||||
# Display a warning if use_docker and use_grunt are selected. Grunt isn't
|
# Display a warning if use_docker and use_grunt are selected. Grunt isn't
|
||||||
# supported by our docker config atm.
|
# supported by our docker config atm.
|
||||||
if '{{ cookiecutter.js_task_runner }}'.lower() in ['grunt', 'gulp'] and '{{ cookiecutter.use_docker }}'.lower() == 'y':
|
if '{{ cookiecutter.js_task_runner }}'.lower() in ['grunt', 'gulp', 'createreactapp'] and '{{ cookiecutter.use_docker }}'.lower() == 'y':
|
||||||
print(
|
print(
|
||||||
"You selected to use docker and a JS task runner. This is NOT supported out of the box for now. You "
|
"You selected to use docker and a JS task runner. This is NOT supported out of the box for now. You "
|
||||||
"can continue to use the project like you normally would, but you will need to add a "
|
"can continue to use the project like you normally would, but you will need to add a "
|
||||||
|
|
|
||||||
|
|
@ -7,10 +7,15 @@ https://docs.djangoproject.com/en/dev/topics/settings/
|
||||||
For the full list of settings and their values, see
|
For the full list of settings and their values, see
|
||||||
https://docs.djangoproject.com/en/dev/ref/settings/
|
https://docs.djangoproject.com/en/dev/ref/settings/
|
||||||
"""
|
"""
|
||||||
import environ
|
import environ{% if cookiecutter.js_task_runner == 'CreateReactApp' %}
|
||||||
|
import datetime
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
ROOT_DIR = environ.Path(__file__) - 3 # ({{ cookiecutter.project_slug }}/config/settings/base.py - 3 = {{ cookiecutter.project_slug }}/)
|
ROOT_DIR = environ.Path(__file__) - 3 # ({{ cookiecutter.project_slug }}/config/settings/base.py - 3 = {{ cookiecutter.project_slug }}/)
|
||||||
APPS_DIR = ROOT_DIR.path('{{ cookiecutter.project_slug }}')
|
APPS_DIR = ROOT_DIR.path('{{ cookiecutter.project_slug }}')
|
||||||
|
{% if cookiecutter.js_task_runner == 'CreateReactApp' %}
|
||||||
|
REACT_DIR = ROOT_DIR.path('frontend')
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
# Load operating system environment variables and then prepare to use them
|
# Load operating system environment variables and then prepare to use them
|
||||||
env = environ.Env()
|
env = environ.Env()
|
||||||
|
|
@ -45,10 +50,31 @@ DJANGO_APPS = [
|
||||||
'django.contrib.admin',
|
'django.contrib.admin',
|
||||||
]
|
]
|
||||||
THIRD_PARTY_APPS = [
|
THIRD_PARTY_APPS = [
|
||||||
|
{% if cookiecutter.js_task_runner != 'CreateReactApp' %}
|
||||||
'crispy_forms', # Form layouts
|
'crispy_forms', # Form layouts
|
||||||
'allauth', # registration
|
'allauth', # registration
|
||||||
'allauth.account', # registration
|
'allauth.account', # registration
|
||||||
'allauth.socialaccount', # registration
|
'allauth.socialaccount', # registration
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if cookiecutter.js_task_runner == 'CreateReactApp' %}
|
||||||
|
# Django REST framework: http://www.django-rest-framework.org/#installation
|
||||||
|
'rest_framework',
|
||||||
|
'rest_framework.authtoken',
|
||||||
|
|
||||||
|
# Django REST Auth: https://github.com/Tivix/django-rest-auth
|
||||||
|
'rest_auth',
|
||||||
|
'rest_auth.registration',
|
||||||
|
|
||||||
|
# OAUTH2: https://github.com/evonove/django-oauth-toolkit/tree/master/oauth2_provider
|
||||||
|
'oauth2_provider',
|
||||||
|
|
||||||
|
# Django filters: https://github.com/carltongibson/django-filter
|
||||||
|
'django_filters',
|
||||||
|
|
||||||
|
# Integrate webpack with Django: https://github.com/ezhome/django-webpack-loader
|
||||||
|
'webpack_loader'
|
||||||
|
{% endif %}
|
||||||
]
|
]
|
||||||
|
|
||||||
# Apps specific for this project go here.
|
# Apps specific for this project go here.
|
||||||
|
|
@ -249,6 +275,7 @@ AUTHENTICATION_BACKENDS = [
|
||||||
'allauth.account.auth_backends.AuthenticationBackend',
|
'allauth.account.auth_backends.AuthenticationBackend',
|
||||||
]
|
]
|
||||||
|
|
||||||
|
{% if cookiecutter.js_task_runner != 'CreateReactApp' %}
|
||||||
# Some really nice defaults
|
# Some really nice defaults
|
||||||
ACCOUNT_AUTHENTICATION_METHOD = 'username'
|
ACCOUNT_AUTHENTICATION_METHOD = 'username'
|
||||||
ACCOUNT_EMAIL_REQUIRED = True
|
ACCOUNT_EMAIL_REQUIRED = True
|
||||||
|
|
@ -257,12 +284,15 @@ ACCOUNT_EMAIL_VERIFICATION = 'mandatory'
|
||||||
ACCOUNT_ALLOW_REGISTRATION = env.bool('DJANGO_ACCOUNT_ALLOW_REGISTRATION', True)
|
ACCOUNT_ALLOW_REGISTRATION = env.bool('DJANGO_ACCOUNT_ALLOW_REGISTRATION', True)
|
||||||
ACCOUNT_ADAPTER = '{{cookiecutter.project_slug}}.users.adapters.AccountAdapter'
|
ACCOUNT_ADAPTER = '{{cookiecutter.project_slug}}.users.adapters.AccountAdapter'
|
||||||
SOCIALACCOUNT_ADAPTER = '{{cookiecutter.project_slug}}.users.adapters.SocialAccountAdapter'
|
SOCIALACCOUNT_ADAPTER = '{{cookiecutter.project_slug}}.users.adapters.SocialAccountAdapter'
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
# Custom user app defaults
|
# Custom user app defaults
|
||||||
# Select the correct user model
|
# Select the correct user model
|
||||||
AUTH_USER_MODEL = 'users.User'
|
AUTH_USER_MODEL = 'users.User'
|
||||||
|
{% if cookiecutter.js_task_runner != 'CreateReactApp' %}
|
||||||
LOGIN_REDIRECT_URL = 'users:redirect'
|
LOGIN_REDIRECT_URL = 'users:redirect'
|
||||||
LOGIN_URL = 'account_login'
|
LOGIN_URL = 'account_login'
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
# SLUGLIFIER
|
# SLUGLIFIER
|
||||||
AUTOSLUG_SLUGIFY_FUNCTION = 'slugify.slugify'
|
AUTOSLUG_SLUGIFY_FUNCTION = 'slugify.slugify'
|
||||||
|
|
@ -287,5 +317,70 @@ STATICFILES_FINDERS += ['compressor.finders.CompressorFinder']
|
||||||
# Location of root django.contrib.admin URL, use {% raw %}{% url 'admin:index' %}{% endraw %}
|
# Location of root django.contrib.admin URL, use {% raw %}{% url 'admin:index' %}{% endraw %}
|
||||||
ADMIN_URL = r'^admin/'
|
ADMIN_URL = r'^admin/'
|
||||||
|
|
||||||
|
{% if cookiecutter.js_task_runner == 'CreateReactApp' %}
|
||||||
|
# DJANGO REST FRAMEWORK
|
||||||
|
# ------------------------------------------------------------------------------
|
||||||
|
# http://www.django-rest-framework.org/
|
||||||
|
|
||||||
|
REST_FRAMEWORK = {
|
||||||
|
'DEFAULT_PERMISSION_CLASSES': (
|
||||||
|
'rest_framework.permissions.IsAuthenticated',
|
||||||
|
),
|
||||||
|
'DEFAULT_AUTHENTICATION_CLASSES': (
|
||||||
|
'rest_framework.authentication.SessionAuthentication',
|
||||||
|
'rest_framework.authentication.BasicAuthentication',
|
||||||
|
# 'rest_framework.authentication.TokenAuthentication',
|
||||||
|
|
||||||
|
# For Django-oauth. See: https://django-oauth-toolkit.readthedocs.io/en/latest/rest-framework/getting_started.html#step-1-minimal-setup # NOQA
|
||||||
|
'oauth2_provider.ext.rest_framework.OAuth2Authentication',
|
||||||
|
|
||||||
|
# For REST-JWT. See: http://getblimp.github.io/django-rest-framework-jwt/#usage
|
||||||
|
'rest_framework_jwt.authentication.JSONWebTokenAuthentication',
|
||||||
|
),
|
||||||
|
'DEFAULT_RENDERER_CLASSES': (
|
||||||
|
'rest_framework.renderers.JSONRenderer',
|
||||||
|
'rest_framework.renderers.BrowsableAPIRenderer',
|
||||||
|
'rest_framework.renderers.AdminRenderer',
|
||||||
|
),
|
||||||
|
'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.LimitOffsetPagination',
|
||||||
|
'PAGE_SIZE': 100,
|
||||||
|
'COERCE_DECIMAL_TO_STRING': False,
|
||||||
|
'DEFAULT_VERSIONING_CLASS': 'rest_framework.versioning.URLPathVersioning',
|
||||||
|
}
|
||||||
|
|
||||||
|
# DJANGO REST-AUTH
|
||||||
|
# ------------------------------------------------------------------------------
|
||||||
|
# https://github.com/Tivix/django-rest-auth/
|
||||||
|
|
||||||
|
REST_USE_JWT = True
|
||||||
|
|
||||||
|
OLD_PASSWORD_FIELD_ENABLED = True
|
||||||
|
|
||||||
|
LOGOUT_ON_PASSWORD_CHANGE = True
|
||||||
|
|
||||||
|
# DJANGO REST FRAMEWORK JSON WEB TOKEN
|
||||||
|
# ------------------------------------------------------------------------------
|
||||||
|
# https://github.com/GetBlimp/django-rest-framework-jwt
|
||||||
|
|
||||||
|
JWT_AUTH = {
|
||||||
|
'JWT_EXPIRATION_DELTA': datetime.timedelta(days=1),
|
||||||
|
'JWT_ALLOW_REFRESH': True,
|
||||||
|
'JWT_AUTH_COOKIE': 'jwt',
|
||||||
|
}
|
||||||
|
|
||||||
|
# OAUTH2 CONFIGURATION
|
||||||
|
# ------------------------------------------------------------------------------
|
||||||
|
# https://django-oauth-toolkit.readthedocs.io/en/latest/rest-framework/getting_started.html
|
||||||
|
|
||||||
|
OAUTH2_PROVIDER = {
|
||||||
|
# this is the list of available scopes
|
||||||
|
'SCOPES': {
|
||||||
|
'read': 'Read scope',
|
||||||
|
'write': 'Write scope',
|
||||||
|
},
|
||||||
|
'ACCESS_TOKEN_EXPIRE_SECONDS': 31536000, # Sets OAUTH access tokens good for a year
|
||||||
|
}
|
||||||
|
{%- endif %}
|
||||||
|
|
||||||
# Your common stuff: Below this line define 3rd party library settings
|
# Your common stuff: Below this line define 3rd party library settings
|
||||||
# ------------------------------------------------------------------------------
|
# ------------------------------------------------------------------------------
|
||||||
|
|
|
||||||
|
|
@ -84,5 +84,17 @@ TEST_RUNNER = 'django.test.runner.DiscoverRunner'
|
||||||
CELERY_ALWAYS_EAGER = True
|
CELERY_ALWAYS_EAGER = True
|
||||||
########## END CELERY
|
########## END CELERY
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
|
{% if cookiecutter.js_task_runner == 'CreateReactApp' %}
|
||||||
|
# Integrate React with Django
|
||||||
|
WEBPACK_LOADER = {
|
||||||
|
'DEFAULT': {
|
||||||
|
'BUNDLE_DIR_NAME': 'bundles/',
|
||||||
|
'STATS_FILE': str(REACT_DIR.path('webpack-stats.dev.json')),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
|
||||||
# Your local stuff: Below this line define 3rd party library settings
|
# Your local stuff: Below this line define 3rd party library settings
|
||||||
# ------------------------------------------------------------------------------
|
# ------------------------------------------------------------------------------
|
||||||
|
|
|
||||||
|
|
@ -323,5 +323,15 @@ LOGGING = {
|
||||||
# Custom Admin URL, use {% raw %}{% url 'admin:index' %}{% endraw %}
|
# Custom Admin URL, use {% raw %}{% url 'admin:index' %}{% endraw %}
|
||||||
ADMIN_URL = env('DJANGO_ADMIN_URL')
|
ADMIN_URL = env('DJANGO_ADMIN_URL')
|
||||||
|
|
||||||
|
{% if cookiecutter.js_task_runner == 'CreateReactApp' %}
|
||||||
|
# Integrate React with Django
|
||||||
|
WEBPACK_LOADER = {
|
||||||
|
'DEFAULT': {
|
||||||
|
'BUNDLE_DIR_NAME': 'bundles/',
|
||||||
|
'STATS_FILE': str(REACT_DIR.path('webpack-stats.prod.json')),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
# Your production stuff: Below this line define 3rd party library settings
|
# Your production stuff: Below this line define 3rd party library settings
|
||||||
# ------------------------------------------------------------------------------
|
# ------------------------------------------------------------------------------
|
||||||
|
|
|
||||||
|
|
@ -4,8 +4,13 @@ from django.conf.urls.static import static
|
||||||
from django.contrib import admin
|
from django.contrib import admin
|
||||||
from django.views.generic import TemplateView
|
from django.views.generic import TemplateView
|
||||||
from django.views import defaults as default_views
|
from django.views import defaults as default_views
|
||||||
|
{% if cookiecutter.js_task_runner == 'CreateReactApp' %}
|
||||||
|
from rest_framework.documentation import include_docs_urls
|
||||||
|
from rest_framework_jwt import views as jwt_views
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
urlpatterns = [
|
urlpatterns = [
|
||||||
|
{% if cookiecutter.js_task_runner != 'CreateReactApp' %}
|
||||||
url(r'^$', TemplateView.as_view(template_name='pages/home.html'), name='home'),
|
url(r'^$', TemplateView.as_view(template_name='pages/home.html'), name='home'),
|
||||||
url(r'^about/$', TemplateView.as_view(template_name='pages/about.html'), name='about'),
|
url(r'^about/$', TemplateView.as_view(template_name='pages/about.html'), name='about'),
|
||||||
|
|
||||||
|
|
@ -16,6 +21,25 @@ urlpatterns = [
|
||||||
url(r'^users/', include('{{ cookiecutter.project_slug }}.users.urls', namespace='users')),
|
url(r'^users/', include('{{ cookiecutter.project_slug }}.users.urls', namespace='users')),
|
||||||
url(r'^accounts/', include('allauth.urls')),
|
url(r'^accounts/', include('allauth.urls')),
|
||||||
|
|
||||||
|
{% endif %}{% if cookiecutter.js_task_runner == 'CreateReactApp' %}
|
||||||
|
url(r'^app/', TemplateView.as_view(template_name="index.html")),
|
||||||
|
|
||||||
|
# REST framework
|
||||||
|
url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework')),
|
||||||
|
|
||||||
|
# OAUTH2: https://github.com/evonove/django-oauth-toolkit
|
||||||
|
url(r'^oauth/', include('oauth2_provider.urls', namespace='oauth2_provider')),
|
||||||
|
|
||||||
|
# REST AUTH
|
||||||
|
url(r'^rest-auth/', include('rest_auth.urls')),
|
||||||
|
url(r'^api-token-auth/', jwt_views.obtain_jwt_token),
|
||||||
|
url(r'^api-token-refresh/', jwt_views.refresh_jwt_token),
|
||||||
|
url(r'^api-token-verify/', jwt_views.verify_jwt_token),
|
||||||
|
|
||||||
|
# API documentation
|
||||||
|
url(r'^docs/', include_docs_urls(title='{{ cookiecutter.project_name }} API')),
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
# Your stuff: custom urls includes go here
|
# Your stuff: custom urls includes go here
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
21
{{cookiecutter.project_slug}}/frontend/.gitignore
vendored
Normal file
21
{{cookiecutter.project_slug}}/frontend/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
# See https://help.github.com/ignore-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
2229
{{cookiecutter.project_slug}}/frontend/README.md
Normal file
2229
{{cookiecutter.project_slug}}/frontend/README.md
Normal file
File diff suppressed because it is too large
Load Diff
90
{{cookiecutter.project_slug}}/frontend/config/env.js
Normal file
90
{{cookiecutter.project_slug}}/frontend/config/env.js
Normal file
|
|
@ -0,0 +1,90 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const fs = require('fs');
|
||||||
|
const path = require('path');
|
||||||
|
const paths = require('./paths');
|
||||||
|
|
||||||
|
// Make sure that including paths.js after env.js will read .env variables.
|
||||||
|
delete require.cache[require.resolve('./paths')];
|
||||||
|
|
||||||
|
const NODE_ENV = process.env.NODE_ENV;
|
||||||
|
if (!NODE_ENV) {
|
||||||
|
throw new Error(
|
||||||
|
'The NODE_ENV environment variable is required but was not specified.'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
|
||||||
|
var dotenvFiles = [
|
||||||
|
`${paths.dotenv}.${NODE_ENV}.local`,
|
||||||
|
`${paths.dotenv}.${NODE_ENV}`,
|
||||||
|
// Don't include `.env.local` for `test` environment
|
||||||
|
// since normally you expect tests to produce the same
|
||||||
|
// results for everyone
|
||||||
|
NODE_ENV !== 'test' && `${paths.dotenv}.local`,
|
||||||
|
paths.dotenv,
|
||||||
|
].filter(Boolean);
|
||||||
|
|
||||||
|
// Load environment variables from .env* files. Suppress warnings using silent
|
||||||
|
// if this file is missing. dotenv will never modify any environment variables
|
||||||
|
// that have already been set.
|
||||||
|
// https://github.com/motdotla/dotenv
|
||||||
|
dotenvFiles.forEach(dotenvFile => {
|
||||||
|
if (fs.existsSync(dotenvFile)) {
|
||||||
|
require('dotenv').config({
|
||||||
|
path: dotenvFile,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// We support resolving modules according to `NODE_PATH`.
|
||||||
|
// This lets you use absolute paths in imports inside large monorepos:
|
||||||
|
// https://github.com/facebookincubator/create-react-app/issues/253.
|
||||||
|
// It works similar to `NODE_PATH` in Node itself:
|
||||||
|
// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
|
||||||
|
// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
|
||||||
|
// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
|
||||||
|
// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
|
||||||
|
// We also resolve them to make sure all tools using them work consistently.
|
||||||
|
const appDirectory = fs.realpathSync(process.cwd());
|
||||||
|
process.env.NODE_PATH = (process.env.NODE_PATH || '')
|
||||||
|
.split(path.delimiter)
|
||||||
|
.filter(folder => folder && !path.isAbsolute(folder))
|
||||||
|
.map(folder => path.resolve(appDirectory, folder))
|
||||||
|
.join(path.delimiter);
|
||||||
|
|
||||||
|
// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
|
||||||
|
// injected into the application via DefinePlugin in Webpack configuration.
|
||||||
|
const REACT_APP = /^REACT_APP_/i;
|
||||||
|
|
||||||
|
function getClientEnvironment(publicUrl) {
|
||||||
|
const raw = Object.keys(process.env)
|
||||||
|
.filter(key => REACT_APP.test(key))
|
||||||
|
.reduce(
|
||||||
|
(env, key) => {
|
||||||
|
env[key] = process.env[key];
|
||||||
|
return env;
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// Useful for determining whether we’re running in production mode.
|
||||||
|
// Most importantly, it switches React into the correct mode.
|
||||||
|
NODE_ENV: process.env.NODE_ENV || 'development',
|
||||||
|
// Useful for resolving the correct path to static assets in `public`.
|
||||||
|
// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
|
||||||
|
// This should only be used as an escape hatch. Normally you would put
|
||||||
|
// images into the `src` and `import` them in code to get their paths.
|
||||||
|
PUBLIC_URL: publicUrl,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
// Stringify all values so we can feed into Webpack DefinePlugin
|
||||||
|
const stringified = {
|
||||||
|
'process.env': Object.keys(raw).reduce((env, key) => {
|
||||||
|
env[key] = JSON.stringify(raw[key]);
|
||||||
|
return env;
|
||||||
|
}, {}),
|
||||||
|
};
|
||||||
|
|
||||||
|
return { raw, stringified };
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = getClientEnvironment;
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// This is a custom Jest transformer turning style imports into empty objects.
|
||||||
|
// http://facebook.github.io/jest/docs/tutorial-webpack.html
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
process() {
|
||||||
|
return 'module.exports = {};';
|
||||||
|
},
|
||||||
|
getCacheKey() {
|
||||||
|
// The output is always the same.
|
||||||
|
return 'cssTransform';
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
// This is a custom Jest transformer turning file imports into filenames.
|
||||||
|
// http://facebook.github.io/jest/docs/tutorial-webpack.html
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
process(src, filename) {
|
||||||
|
return `module.exports = ${JSON.stringify(path.basename(filename))};`;
|
||||||
|
},
|
||||||
|
};
|
||||||
56
{{cookiecutter.project_slug}}/frontend/config/paths.js
Normal file
56
{{cookiecutter.project_slug}}/frontend/config/paths.js
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const path = require('path');
|
||||||
|
const fs = require('fs');
|
||||||
|
const url = require('url');
|
||||||
|
|
||||||
|
// Make sure any symlinks in the project folder are resolved:
|
||||||
|
// https://github.com/facebookincubator/create-react-app/issues/637
|
||||||
|
const appDirectory = fs.realpathSync(process.cwd());
|
||||||
|
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
|
||||||
|
|
||||||
|
const envPublicUrl = process.env.PUBLIC_URL;
|
||||||
|
|
||||||
|
function ensureSlash(path, needsSlash) {
|
||||||
|
const hasSlash = path.endsWith('/');
|
||||||
|
if (hasSlash && !needsSlash) {
|
||||||
|
return path.substr(path, path.length - 1);
|
||||||
|
} else if (!hasSlash && needsSlash) {
|
||||||
|
return `${path}/`;
|
||||||
|
} else {
|
||||||
|
return path;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getPublicUrl = appPackageJson =>
|
||||||
|
envPublicUrl || require(appPackageJson).homepage;
|
||||||
|
|
||||||
|
// We use `PUBLIC_URL` environment variable or "homepage" field to infer
|
||||||
|
// "public path" at which the app is served.
|
||||||
|
// Webpack needs to know it to put the right <script> hrefs into HTML even in
|
||||||
|
// single-page apps that may serve index.html for nested URLs like /todos/42.
|
||||||
|
// We can't use a relative path in HTML because we don't want to load something
|
||||||
|
// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
|
||||||
|
function getServedPath(appPackageJson) {
|
||||||
|
const publicUrl = getPublicUrl(appPackageJson);
|
||||||
|
const servedUrl =
|
||||||
|
envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
|
||||||
|
return ensureSlash(servedUrl, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
// config after eject: we're in ./config/
|
||||||
|
module.exports = {
|
||||||
|
dotenv: resolveApp('.env'),
|
||||||
|
appBuild: resolveApp('../{{ cookiecutter.project_slug }}/static/bundles/'),
|
||||||
|
appPublic: resolveApp('public'),
|
||||||
|
appHtml: resolveApp('public/index.html'),
|
||||||
|
appIndexJs: resolveApp('src/index.js'),
|
||||||
|
appPackageJson: resolveApp('package.json'),
|
||||||
|
appSrc: resolveApp('src'),
|
||||||
|
yarnLockFile: resolveApp('yarn.lock'),
|
||||||
|
testsSetup: resolveApp('src/setupTests.js'),
|
||||||
|
appNodeModules: resolveApp('node_modules'),
|
||||||
|
publicUrl: getPublicUrl(resolveApp('package.json')),
|
||||||
|
servedPath: getServedPath(resolveApp('package.json')),
|
||||||
|
statsRoot: resolveApp('./'),
|
||||||
|
};
|
||||||
22
{{cookiecutter.project_slug}}/frontend/config/polyfills.js
Normal file
22
{{cookiecutter.project_slug}}/frontend/config/polyfills.js
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
if (typeof Promise === 'undefined') {
|
||||||
|
// Rejection tracking prevents a common issue where React gets into an
|
||||||
|
// inconsistent state due to an error, but it gets swallowed by a Promise,
|
||||||
|
// and the user has no idea what causes React's erratic future behavior.
|
||||||
|
require('promise/lib/rejection-tracking').enable();
|
||||||
|
window.Promise = require('promise/lib/es6-extensions.js');
|
||||||
|
}
|
||||||
|
|
||||||
|
// fetch() polyfill for making API calls.
|
||||||
|
require('whatwg-fetch');
|
||||||
|
|
||||||
|
// Object.assign() is commonly used with React.
|
||||||
|
// It will use the native implementation if it's present and isn't buggy.
|
||||||
|
Object.assign = require('object-assign');
|
||||||
|
|
||||||
|
// In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet.
|
||||||
|
// We don't polyfill it in the browser--this is user's responsibility.
|
||||||
|
if (process.env.NODE_ENV === 'test') {
|
||||||
|
require('raf').polyfill(global);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,270 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const autoprefixer = require('autoprefixer');
|
||||||
|
const path = require('path');
|
||||||
|
const webpack = require('webpack');
|
||||||
|
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||||
|
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
|
||||||
|
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
|
||||||
|
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
|
||||||
|
const eslintFormatter = require('react-dev-utils/eslintFormatter');
|
||||||
|
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
|
||||||
|
const BundleTracker = require('webpack-bundle-tracker');
|
||||||
|
const getClientEnvironment = require('./env');
|
||||||
|
const paths = require('./paths');
|
||||||
|
|
||||||
|
// Webpack uses `publicPath` to determine where the app is being served from.
|
||||||
|
// In development, we always serve from the root. This makes config easier.
|
||||||
|
const publicPath = 'http://localhost:3000/';
|
||||||
|
// `publicUrl` is just like `publicPath`, but we will provide it to our app
|
||||||
|
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
|
||||||
|
// Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
|
||||||
|
const publicUrl = 'http://localhost:3000/';
|
||||||
|
// Get environment variables to inject into our app.
|
||||||
|
const env = getClientEnvironment(publicUrl);
|
||||||
|
|
||||||
|
// This is the development configuration.
|
||||||
|
// It is focused on developer experience and fast rebuilds.
|
||||||
|
// The production configuration is different and lives in a separate file.
|
||||||
|
module.exports = {
|
||||||
|
// You may want 'eval' instead if you prefer to see the compiled output in DevTools.
|
||||||
|
// See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
|
||||||
|
devtool: 'cheap-module-source-map',
|
||||||
|
// These are the "entry points" to our application.
|
||||||
|
// This means they will be the "root" imports that are included in JS bundle.
|
||||||
|
// The first two entry points enable "hot" CSS and auto-refreshes for JS.
|
||||||
|
entry: [
|
||||||
|
// Adding Hot Reloading. See: http://joshbroton.com/add-react-hot-reloading-create-react-app/
|
||||||
|
'react-hot-loader/patch',
|
||||||
|
// We ship a few polyfills by default:
|
||||||
|
require.resolve('./polyfills'),
|
||||||
|
// Include an alternative client for WebpackDevServer. A client's job is to
|
||||||
|
// connect to WebpackDevServer by a socket and get notified about changes.
|
||||||
|
// When you save a file, the client will either apply hot updates (in case
|
||||||
|
// of CSS changes), or refresh the page (in case of JS changes). When you
|
||||||
|
// make a syntax error, this client will display a syntax error overlay.
|
||||||
|
// Note: instead of the default WebpackDevServer client, we use a custom one
|
||||||
|
// to bring better experience for Create React App users. You can replace
|
||||||
|
// the line below with these two lines if you prefer the stock client:
|
||||||
|
// require.resolve('webpack-dev-server/client') + '?/',
|
||||||
|
// require.resolve('webpack/hot/dev-server'),
|
||||||
|
//require.resolve('react-dev-utils/webpackHotDevClient'),
|
||||||
|
//Include webpacek dev client and bundle tracker
|
||||||
|
require.resolve('webpack-dev-server/client') + '?http://localhost:3000',
|
||||||
|
require.resolve('webpack/hot/dev-server'),
|
||||||
|
// Finally, this is your app's code:
|
||||||
|
paths.appIndexJs,
|
||||||
|
// We include the app code last so that if there is a runtime error during
|
||||||
|
// initialization, it doesn't blow up the WebpackDevServer client, and
|
||||||
|
// changing JS code would still trigger a refresh.
|
||||||
|
],
|
||||||
|
output: {
|
||||||
|
// Add /* filename */ comments to generated require()s in the output.
|
||||||
|
pathinfo: true,
|
||||||
|
// This does not produce a real file. It's just the virtual path that is
|
||||||
|
// served by WebpackDevServer in development. This is the JS bundle
|
||||||
|
// containing code from all our entry points, and the Webpack runtime.
|
||||||
|
filename: 'static/js/bundle.js',
|
||||||
|
// There are also additional JS chunk files if you use code splitting.
|
||||||
|
chunkFilename: 'static/js/[name].chunk.js',
|
||||||
|
// This is the URL that app is served from. We use "/" in development.
|
||||||
|
publicPath: publicPath,
|
||||||
|
// Point sourcemap entries to original disk location (format as URL on Windows)
|
||||||
|
devtoolModuleFilenameTemplate: info =>
|
||||||
|
path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
// This allows you to set a fallback for where Webpack should look for modules.
|
||||||
|
// We placed these paths second because we want `node_modules` to "win"
|
||||||
|
// if there are any conflicts. This matches Node resolution mechanism.
|
||||||
|
// https://github.com/facebookincubator/create-react-app/issues/253
|
||||||
|
modules: ['node_modules', paths.appNodeModules].concat(
|
||||||
|
// It is guaranteed to exist because we tweak it in `env.js`
|
||||||
|
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
|
||||||
|
),
|
||||||
|
// These are the reasonable defaults supported by the Node ecosystem.
|
||||||
|
// We also include JSX as a common component filename extension to support
|
||||||
|
// some tools, although we do not recommend using it, see:
|
||||||
|
// https://github.com/facebookincubator/create-react-app/issues/290
|
||||||
|
// `web` extension prefixes have been added for better support
|
||||||
|
// for React Native Web.
|
||||||
|
extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
|
||||||
|
alias: {
|
||||||
|
|
||||||
|
// Support React Native Web
|
||||||
|
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
|
||||||
|
'react-native': 'react-native-web',
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
// Prevents users from importing files from outside of src/ (or node_modules/).
|
||||||
|
// This often causes confusion because we only process files within src/ with babel.
|
||||||
|
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
|
||||||
|
// please link the files into your node_modules/ and let module-resolution kick in.
|
||||||
|
// Make sure your source files are compiled, as they will not be processed in any way.
|
||||||
|
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
strictExportPresence: true,
|
||||||
|
rules: [
|
||||||
|
// TODO: Disable require.ensure as it's not a standard language feature.
|
||||||
|
// We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
|
||||||
|
// { parser: { requireEnsure: false } },
|
||||||
|
|
||||||
|
// First, run the linter.
|
||||||
|
// It's important to do this before Babel processes the JS.
|
||||||
|
{
|
||||||
|
test: /\.(js|jsx|mjs)$/,
|
||||||
|
enforce: 'pre',
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
formatter: eslintFormatter,
|
||||||
|
eslintPath: require.resolve('eslint'),
|
||||||
|
|
||||||
|
},
|
||||||
|
loader: require.resolve('eslint-loader'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
include: paths.appSrc,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// "oneOf" will traverse all following loaders until one will
|
||||||
|
// match the requirements. When no loader matches it will fall
|
||||||
|
// back to the "file" loader at the end of the loader list.
|
||||||
|
oneOf: [
|
||||||
|
// "url" loader works like "file" loader except that it embeds assets
|
||||||
|
// smaller than specified limit in bytes as data URLs to avoid requests.
|
||||||
|
// A missing `test` is equivalent to a match.
|
||||||
|
{
|
||||||
|
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
|
||||||
|
loader: require.resolve('url-loader'),
|
||||||
|
options: {
|
||||||
|
limit: 10000,
|
||||||
|
name: 'static/media/[name].[hash:8].[ext]',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// Process JS with Babel.
|
||||||
|
{
|
||||||
|
test: /\.(js|jsx|mjs)$/,
|
||||||
|
include: paths.appSrc,
|
||||||
|
loader: require.resolve('babel-loader'),
|
||||||
|
options: {
|
||||||
|
|
||||||
|
// This is a feature of `babel-loader` for webpack (not Babel itself).
|
||||||
|
// It enables caching results in ./node_modules/.cache/babel-loader/
|
||||||
|
// directory for faster rebuilds.
|
||||||
|
cacheDirectory: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// "postcss" loader applies autoprefixer to our CSS.
|
||||||
|
// "css" loader resolves paths in CSS and adds assets as dependencies.
|
||||||
|
// "style" loader turns CSS into JS modules that inject <style> tags.
|
||||||
|
// In production, we use a plugin to extract that CSS to a file, but
|
||||||
|
// in development "style" loader enables hot editing of CSS.
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
use: [
|
||||||
|
require.resolve('style-loader'),
|
||||||
|
{
|
||||||
|
loader: require.resolve('css-loader'),
|
||||||
|
options: {
|
||||||
|
importLoaders: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loader: require.resolve('postcss-loader'),
|
||||||
|
options: {
|
||||||
|
// Necessary for external CSS imports to work
|
||||||
|
// https://github.com/facebookincubator/create-react-app/issues/2677
|
||||||
|
ident: 'postcss',
|
||||||
|
plugins: () => [
|
||||||
|
require('postcss-flexbugs-fixes'),
|
||||||
|
autoprefixer({
|
||||||
|
browsers: [
|
||||||
|
'>1%',
|
||||||
|
'last 4 versions',
|
||||||
|
'Firefox ESR',
|
||||||
|
'not ie < 9', // React doesn't support IE8 anyway
|
||||||
|
],
|
||||||
|
flexbox: 'no-2009',
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
// "file" loader makes sure those assets get served by WebpackDevServer.
|
||||||
|
// When you `import` an asset, you get its (virtual) filename.
|
||||||
|
// In production, they would get copied to the `build` folder.
|
||||||
|
// This loader doesn't use a "test" so it will catch all modules
|
||||||
|
// that fall through the other loaders.
|
||||||
|
{
|
||||||
|
// Exclude `js` files to keep "css" loader working as it injects
|
||||||
|
// it's runtime that would otherwise processed through "file" loader.
|
||||||
|
// Also exclude `html` and `json` extensions so they get processed
|
||||||
|
// by webpacks internal loaders.
|
||||||
|
exclude: [/\.js$/, /\.html$/, /\.json$/],
|
||||||
|
loader: require.resolve('file-loader'),
|
||||||
|
options: {
|
||||||
|
name: 'static/media/[name].[hash:8].[ext]',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
// ** STOP ** Are you adding a new loader?
|
||||||
|
// Make sure to add the new loader(s) before the "file" loader.
|
||||||
|
],
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
// Makes some environment variables available in index.html.
|
||||||
|
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
|
||||||
|
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||||
|
// In development, this will be an empty string.
|
||||||
|
new InterpolateHtmlPlugin(env.raw),
|
||||||
|
// Generates an `index.html` file with the <script> injected.
|
||||||
|
new HtmlWebpackPlugin({
|
||||||
|
inject: true,
|
||||||
|
template: paths.appHtml,
|
||||||
|
}),
|
||||||
|
// Add module names to factory functions so they appear in browser profiler.
|
||||||
|
new webpack.NamedModulesPlugin(),
|
||||||
|
// Makes some environment variables available to the JS code, for example:
|
||||||
|
// if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
|
||||||
|
new webpack.DefinePlugin(env.stringified),
|
||||||
|
// This is necessary to emit hot updates (currently CSS only):
|
||||||
|
new webpack.HotModuleReplacementPlugin(),
|
||||||
|
// Watcher doesn't work well if you mistype casing in a path so we use
|
||||||
|
// a plugin that prints an error when you attempt to do this.
|
||||||
|
// See https://github.com/facebookincubator/create-react-app/issues/240
|
||||||
|
new CaseSensitivePathsPlugin(),
|
||||||
|
// If you require a missing module and then `npm install` it, you still have
|
||||||
|
// to restart the development server for Webpack to discover it. This plugin
|
||||||
|
// makes the discovery automatic so you don't have to restart.
|
||||||
|
// See https://github.com/facebookincubator/create-react-app/issues/186
|
||||||
|
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
|
||||||
|
// Moment.js is an extremely popular library that bundles large locale files
|
||||||
|
// by default due to how Webpack interprets its code. This is a practical
|
||||||
|
// solution that requires the user to opt into importing specific locales.
|
||||||
|
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
|
||||||
|
// You can remove this if you don't use Moment.js:
|
||||||
|
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
|
||||||
|
// BundleTracker
|
||||||
|
new BundleTracker({path: paths.statsRoot, filename: 'webpack-stats.dev.json'}),
|
||||||
|
],
|
||||||
|
// Some libraries import Node modules but don't use them in the browser.
|
||||||
|
// Tell Webpack to provide empty mocks for them so importing them works.
|
||||||
|
node: {
|
||||||
|
dgram: 'empty',
|
||||||
|
fs: 'empty',
|
||||||
|
net: 'empty',
|
||||||
|
tls: 'empty',
|
||||||
|
child_process: 'empty',
|
||||||
|
},
|
||||||
|
// Turn off performance hints during development because we don't do any
|
||||||
|
// splitting or minification in interest of speed. These warnings become
|
||||||
|
// cumbersome.
|
||||||
|
performance: {
|
||||||
|
hints: false,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,345 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const autoprefixer = require('autoprefixer');
|
||||||
|
const path = require('path');
|
||||||
|
const webpack = require('webpack');
|
||||||
|
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||||
|
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||||
|
const ManifestPlugin = require('webpack-manifest-plugin');
|
||||||
|
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
|
||||||
|
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
|
||||||
|
const eslintFormatter = require('react-dev-utils/eslintFormatter');
|
||||||
|
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
|
||||||
|
const BundleTracker = require('webpack-bundle-tracker');
|
||||||
|
const paths = require('./paths');
|
||||||
|
const getClientEnvironment = require('./env');
|
||||||
|
|
||||||
|
// Webpack uses `publicPath` to determine where the app is being served from.
|
||||||
|
// It requires a trailing slash, or the file assets will get an incorrect path.
|
||||||
|
const publicPath = "/static/bundles/";
|
||||||
|
// Some apps do not use client-side routing with pushState.
|
||||||
|
// For these, "homepage" can be set to "." to enable relative asset paths.
|
||||||
|
const shouldUseRelativeAssetPaths = publicPath === './';
|
||||||
|
// Source maps are resource heavy and can cause out of memory issue for large source files.
|
||||||
|
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
|
||||||
|
// `publicUrl` is just like `publicPath`, but we will provide it to our app
|
||||||
|
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
|
||||||
|
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
|
||||||
|
const publicUrl = publicPath.slice(0, -1);
|
||||||
|
// Get environment variables to inject into our app.
|
||||||
|
const env = getClientEnvironment(publicUrl);
|
||||||
|
|
||||||
|
// Assert this just to be safe.
|
||||||
|
// Development builds of React are slow and not intended for production.
|
||||||
|
if (env.stringified['process.env'].NODE_ENV !== '"production"') {
|
||||||
|
throw new Error('Production builds must have NODE_ENV=production.');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Note: defined here because it will be used more than once.
|
||||||
|
const cssFilename = 'css/[name].[contenthash:8].css';
|
||||||
|
|
||||||
|
// ExtractTextPlugin expects the build output to be flat.
|
||||||
|
// (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
|
||||||
|
// However, our output is structured with css, js and media folders.
|
||||||
|
// To have this structure working with relative paths, we have to use custom options.
|
||||||
|
const extractTextPluginOptions = shouldUseRelativeAssetPaths
|
||||||
|
? // Making sure that the publicPath goes back to to build folder.
|
||||||
|
{ publicPath: Array(cssFilename.split('/').length).join('../') }
|
||||||
|
: {};
|
||||||
|
|
||||||
|
// This is the production configuration.
|
||||||
|
// It compiles slowly and is focused on producing a fast and minimal bundle.
|
||||||
|
// The development configuration is different and lives in a separate file.
|
||||||
|
module.exports = {
|
||||||
|
// Don't attempt to continue if there are any errors.
|
||||||
|
bail: true,
|
||||||
|
// We generate sourcemaps in production. This is slow but gives good results.
|
||||||
|
// You can exclude the *.map files from the build during deployment.
|
||||||
|
devtool: shouldUseSourceMap ? 'source-map' : false,
|
||||||
|
// In production, we only want to load the polyfills and the app code.
|
||||||
|
entry: [require.resolve('./polyfills'), paths.appIndexJs],
|
||||||
|
output: {
|
||||||
|
// The build folder.
|
||||||
|
path: paths.appBuild,
|
||||||
|
// Generated JS file names (with nested folders).
|
||||||
|
// There will be one main bundle, and one file per asynchronous chunk.
|
||||||
|
// We don't currently advertise code splitting but Webpack supports it.
|
||||||
|
filename: 'js/[name].[chunkhash:8].js',
|
||||||
|
chunkFilename: 'js/[name].[chunkhash:8].chunk.js',
|
||||||
|
// We inferred the "public path" (such as / or /my-project) from homepage.
|
||||||
|
publicPath: publicPath,
|
||||||
|
// Point sourcemap entries to original disk location (format as URL on Windows)
|
||||||
|
devtoolModuleFilenameTemplate: info =>
|
||||||
|
path
|
||||||
|
.relative(paths.appSrc, info.absoluteResourcePath)
|
||||||
|
.replace(/\\/g, '/'),
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
// This allows you to set a fallback for where Webpack should look for modules.
|
||||||
|
// We placed these paths second because we want `node_modules` to "win"
|
||||||
|
// if there are any conflicts. This matches Node resolution mechanism.
|
||||||
|
// https://github.com/facebookincubator/create-react-app/issues/253
|
||||||
|
modules: ['node_modules', paths.appNodeModules].concat(
|
||||||
|
// It is guaranteed to exist because we tweak it in `env.js`
|
||||||
|
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
|
||||||
|
),
|
||||||
|
// These are the reasonable defaults supported by the Node ecosystem.
|
||||||
|
// We also include JSX as a common component filename extension to support
|
||||||
|
// some tools, although we do not recommend using it, see:
|
||||||
|
// https://github.com/facebookincubator/create-react-app/issues/290
|
||||||
|
// `web` extension prefixes have been added for better support
|
||||||
|
// for React Native Web.
|
||||||
|
extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
|
||||||
|
alias: {
|
||||||
|
|
||||||
|
// Support React Native Web
|
||||||
|
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
|
||||||
|
'react-native': 'react-native-web',
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
// Prevents users from importing files from outside of src/ (or node_modules/).
|
||||||
|
// This often causes confusion because we only process files within src/ with babel.
|
||||||
|
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
|
||||||
|
// please link the files into your node_modules/ and let module-resolution kick in.
|
||||||
|
// Make sure your source files are compiled, as they will not be processed in any way.
|
||||||
|
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
strictExportPresence: true,
|
||||||
|
rules: [
|
||||||
|
// TODO: Disable require.ensure as it's not a standard language feature.
|
||||||
|
// We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
|
||||||
|
// { parser: { requireEnsure: false } },
|
||||||
|
|
||||||
|
// First, run the linter.
|
||||||
|
// It's important to do this before Babel processes the JS.
|
||||||
|
{
|
||||||
|
test: /\.(js|jsx|mjs)$/,
|
||||||
|
enforce: 'pre',
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
formatter: eslintFormatter,
|
||||||
|
eslintPath: require.resolve('eslint'),
|
||||||
|
|
||||||
|
},
|
||||||
|
loader: require.resolve('eslint-loader'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
include: paths.appSrc,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// "oneOf" will traverse all following loaders until one will
|
||||||
|
// match the requirements. When no loader matches it will fall
|
||||||
|
// back to the "file" loader at the end of the loader list.
|
||||||
|
oneOf: [
|
||||||
|
// "url" loader works just like "file" loader but it also embeds
|
||||||
|
// assets smaller than specified size as data URLs to avoid requests.
|
||||||
|
{
|
||||||
|
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
|
||||||
|
loader: require.resolve('url-loader'),
|
||||||
|
options: {
|
||||||
|
limit: 10000,
|
||||||
|
name: 'media/[name].[hash:8].[ext]',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// Process JS with Babel.
|
||||||
|
{
|
||||||
|
test: /\.(js|jsx|mjs)$/,
|
||||||
|
include: paths.appSrc,
|
||||||
|
loader: require.resolve('babel-loader'),
|
||||||
|
options: {
|
||||||
|
|
||||||
|
compact: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// The notation here is somewhat confusing.
|
||||||
|
// "postcss" loader applies autoprefixer to our CSS.
|
||||||
|
// "css" loader resolves paths in CSS and adds assets as dependencies.
|
||||||
|
// "style" loader normally turns CSS into JS modules injecting <style>,
|
||||||
|
// but unlike in development configuration, we do something different.
|
||||||
|
// `ExtractTextPlugin` first applies the "postcss" and "css" loaders
|
||||||
|
// (second argument), then grabs the result CSS and puts it into a
|
||||||
|
// separate file in our build process. This way we actually ship
|
||||||
|
// a single CSS file in production instead of JS code injecting <style>
|
||||||
|
// tags. If you use code splitting, however, any async bundles will still
|
||||||
|
// use the "style" loader inside the async code so CSS from them won't be
|
||||||
|
// in the main CSS file.
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
loader: ExtractTextPlugin.extract(
|
||||||
|
Object.assign(
|
||||||
|
{
|
||||||
|
fallback: {
|
||||||
|
loader: require.resolve('style-loader'),
|
||||||
|
options: {
|
||||||
|
hmr: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
loader: require.resolve('css-loader'),
|
||||||
|
options: {
|
||||||
|
importLoaders: 1,
|
||||||
|
minimize: true,
|
||||||
|
sourceMap: shouldUseSourceMap,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loader: require.resolve('postcss-loader'),
|
||||||
|
options: {
|
||||||
|
// Necessary for external CSS imports to work
|
||||||
|
// https://github.com/facebookincubator/create-react-app/issues/2677
|
||||||
|
ident: 'postcss',
|
||||||
|
plugins: () => [
|
||||||
|
require('postcss-flexbugs-fixes'),
|
||||||
|
autoprefixer({
|
||||||
|
browsers: [
|
||||||
|
'>1%',
|
||||||
|
'last 4 versions',
|
||||||
|
'Firefox ESR',
|
||||||
|
'not ie < 9', // React doesn't support IE8 anyway
|
||||||
|
],
|
||||||
|
flexbox: 'no-2009',
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
extractTextPluginOptions
|
||||||
|
)
|
||||||
|
),
|
||||||
|
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
|
||||||
|
},
|
||||||
|
// "file" loader makes sure assets end up in the `build` folder.
|
||||||
|
// When you `import` an asset, you get its filename.
|
||||||
|
// This loader doesn't use a "test" so it will catch all modules
|
||||||
|
// that fall through the other loaders.
|
||||||
|
{
|
||||||
|
loader: require.resolve('file-loader'),
|
||||||
|
// Exclude `js` files to keep "css" loader working as it injects
|
||||||
|
// it's runtime that would otherwise processed through "file" loader.
|
||||||
|
// Also exclude `html` and `json` extensions so they get processed
|
||||||
|
// by webpacks internal loaders.
|
||||||
|
exclude: [/\.js$/, /\.html$/, /\.json$/],
|
||||||
|
options: {
|
||||||
|
name: 'media/[name].[hash:8].[ext]',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// ** STOP ** Are you adding a new loader?
|
||||||
|
// Make sure to add the new loader(s) before the "file" loader.
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
// Makes some environment variables available in index.html.
|
||||||
|
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
|
||||||
|
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||||
|
// In production, it will be an empty string unless you specify "homepage"
|
||||||
|
// in `package.json`, in which case it will be the pathname of that URL.
|
||||||
|
new InterpolateHtmlPlugin(env.raw),
|
||||||
|
// Generates an `index.html` file with the <script> injected.
|
||||||
|
new HtmlWebpackPlugin({
|
||||||
|
inject: true,
|
||||||
|
template: paths.appHtml,
|
||||||
|
minify: {
|
||||||
|
removeComments: true,
|
||||||
|
collapseWhitespace: true,
|
||||||
|
removeRedundantAttributes: true,
|
||||||
|
useShortDoctype: true,
|
||||||
|
removeEmptyAttributes: true,
|
||||||
|
removeStyleLinkTypeAttributes: true,
|
||||||
|
keepClosingSlash: true,
|
||||||
|
minifyJS: true,
|
||||||
|
minifyCSS: true,
|
||||||
|
minifyURLs: true,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
// Makes some environment variables available to the JS code, for example:
|
||||||
|
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
|
||||||
|
// It is absolutely essential that NODE_ENV was set to production here.
|
||||||
|
// Otherwise React will be compiled in the very slow development mode.
|
||||||
|
new webpack.DefinePlugin(env.stringified),
|
||||||
|
// Minify the code.
|
||||||
|
new webpack.optimize.UglifyJsPlugin({
|
||||||
|
compress: {
|
||||||
|
warnings: false,
|
||||||
|
// Disabled because of an issue with Uglify breaking seemingly valid code:
|
||||||
|
// https://github.com/facebookincubator/create-react-app/issues/2376
|
||||||
|
// Pending further investigation:
|
||||||
|
// https://github.com/mishoo/UglifyJS2/issues/2011
|
||||||
|
comparisons: false,
|
||||||
|
},
|
||||||
|
mangle: {
|
||||||
|
safari10: true,
|
||||||
|
},
|
||||||
|
output: {
|
||||||
|
comments: false,
|
||||||
|
// Turned on because emoji and regex is not minified properly using default
|
||||||
|
// https://github.com/facebookincubator/create-react-app/issues/2488
|
||||||
|
ascii_only: true,
|
||||||
|
},
|
||||||
|
sourceMap: shouldUseSourceMap,
|
||||||
|
}),
|
||||||
|
// Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
|
||||||
|
new ExtractTextPlugin({
|
||||||
|
filename: cssFilename,
|
||||||
|
}),
|
||||||
|
// Generate a manifest file which contains a mapping of all asset filenames
|
||||||
|
// to their corresponding output file so that tools can pick it up without
|
||||||
|
// having to parse `index.html`.
|
||||||
|
new ManifestPlugin({
|
||||||
|
fileName: 'asset-manifest.json',
|
||||||
|
}),
|
||||||
|
// Generate a service worker script that will precache, and keep up to date,
|
||||||
|
// the HTML & assets that are part of the Webpack build.
|
||||||
|
new SWPrecacheWebpackPlugin({
|
||||||
|
// By default, a cache-busting query parameter is appended to requests
|
||||||
|
// used to populate the caches, to ensure the responses are fresh.
|
||||||
|
// If a URL is already hashed by Webpack, then there is no concern
|
||||||
|
// about it being stale, and the cache-busting can be skipped.
|
||||||
|
dontCacheBustUrlsMatching: /\.\w{8}\./,
|
||||||
|
filename: 'service-worker.js',
|
||||||
|
logger(message) {
|
||||||
|
if (message.indexOf('Total precache size is') === 0) {
|
||||||
|
// This message occurs for every build and is a bit too noisy.
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (message.indexOf('Skipping static resource') === 0) {
|
||||||
|
// This message obscures real errors so we ignore it.
|
||||||
|
// https://github.com/facebookincubator/create-react-app/issues/2612
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
console.log(message);
|
||||||
|
},
|
||||||
|
minify: true,
|
||||||
|
// For unknown URLs, fallback to the index page
|
||||||
|
navigateFallback: publicUrl + '/index.html',
|
||||||
|
// Ignores URLs starting from /__ (useful for Firebase):
|
||||||
|
// https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
|
||||||
|
navigateFallbackWhitelist: [/^(?!\/__).*/],
|
||||||
|
// Don't precache sourcemaps (they're large) and build asset manifest:
|
||||||
|
staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
|
||||||
|
}),
|
||||||
|
// Moment.js is an extremely popular library that bundles large locale files
|
||||||
|
// by default due to how Webpack interprets its code. This is a practical
|
||||||
|
// solution that requires the user to opt into importing specific locales.
|
||||||
|
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
|
||||||
|
// You can remove this if you don't use Moment.js:
|
||||||
|
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
|
||||||
|
// BundleTracker
|
||||||
|
new BundleTracker({path: paths.statsRoot, filename: 'webpack-stats.prod.json'}),
|
||||||
|
],
|
||||||
|
// Some libraries import Node modules but don't use them in the browser.
|
||||||
|
// Tell Webpack to provide empty mocks for them so importing them works.
|
||||||
|
node: {
|
||||||
|
dgram: 'empty',
|
||||||
|
fs: 'empty',
|
||||||
|
net: 'empty',
|
||||||
|
tls: 'empty',
|
||||||
|
child_process: 'empty',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,104 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
|
||||||
|
const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
|
||||||
|
const path = require('path');
|
||||||
|
const config = require('./webpack.config.dev');
|
||||||
|
const paths = require('./paths');
|
||||||
|
|
||||||
|
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
|
||||||
|
const host = process.env.HOST || '0.0.0.0';
|
||||||
|
|
||||||
|
module.exports = function(proxy, allowedHost) {
|
||||||
|
return {
|
||||||
|
// WebpackDevServer 2.4.3 introduced a security fix that prevents remote
|
||||||
|
// websites from potentially accessing local content through DNS rebinding:
|
||||||
|
// https://github.com/webpack/webpack-dev-server/issues/887
|
||||||
|
// https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
|
||||||
|
// However, it made several existing use cases such as development in cloud
|
||||||
|
// environment or subdomains in development significantly more complicated:
|
||||||
|
// https://github.com/facebookincubator/create-react-app/issues/2271
|
||||||
|
// https://github.com/facebookincubator/create-react-app/issues/2233
|
||||||
|
// While we're investigating better solutions, for now we will take a
|
||||||
|
// compromise. Since our WDS configuration only serves files in the `public`
|
||||||
|
// folder we won't consider accessing them a vulnerability. However, if you
|
||||||
|
// use the `proxy` feature, it gets more dangerous because it can expose
|
||||||
|
// remote code execution vulnerabilities in backends like Django and Rails.
|
||||||
|
// So we will disable the host check normally, but enable it if you have
|
||||||
|
// specified the `proxy` setting. Finally, we let you override it if you
|
||||||
|
// really know what you're doing with a special environment variable.
|
||||||
|
disableHostCheck:
|
||||||
|
!proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
|
||||||
|
// Enable gzip compression of generated files.
|
||||||
|
compress: true,
|
||||||
|
// Silence WebpackDevServer's own logs since they're generally not useful.
|
||||||
|
// It will still show compile warnings and errors with this setting.
|
||||||
|
clientLogLevel: 'none',
|
||||||
|
// By default WebpackDevServer serves physical files from current directory
|
||||||
|
// in addition to all the virtual build products that it serves from memory.
|
||||||
|
// This is confusing because those files won’t automatically be available in
|
||||||
|
// production build folder unless we copy them. However, copying the whole
|
||||||
|
// project directory is dangerous because we may expose sensitive files.
|
||||||
|
// Instead, we establish a convention that only files in `public` directory
|
||||||
|
// get served. Our build script will copy `public` into the `build` folder.
|
||||||
|
// In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
|
||||||
|
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||||
|
// In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
|
||||||
|
// Note that we only recommend to use `public` folder as an escape hatch
|
||||||
|
// for files like `favicon.ico`, `manifest.json`, and libraries that are
|
||||||
|
// for some reason broken when imported through Webpack. If you just want to
|
||||||
|
// use an image, put it in `src` and `import` it from JavaScript instead.
|
||||||
|
contentBase: paths.appPublic,
|
||||||
|
// By default files from `contentBase` will not trigger a page reload.
|
||||||
|
watchContentBase: true,
|
||||||
|
// Enable hot reloading server. It will provide /sockjs-node/ endpoint
|
||||||
|
// for the WebpackDevServer client so it can learn when the files were
|
||||||
|
// updated. The WebpackDevServer client is included as an entry point
|
||||||
|
// in the Webpack development configuration. Note that only changes
|
||||||
|
// to CSS are currently hot reloaded. JS changes will refresh the browser.
|
||||||
|
hot: true,
|
||||||
|
// It is important to tell WebpackDevServer to use the same "root" path
|
||||||
|
// as we specified in the config. In development, we always serve from /.
|
||||||
|
publicPath: config.output.publicPath,
|
||||||
|
// WebpackDevServer is noisy by default so we emit custom message instead
|
||||||
|
// by listening to the compiler events with `compiler.plugin` calls above.
|
||||||
|
quiet: true,
|
||||||
|
// Reportedly, this avoids CPU overload on some systems.
|
||||||
|
// https://github.com/facebookincubator/create-react-app/issues/293
|
||||||
|
// src/node_modules is not ignored to support absolute imports
|
||||||
|
// https://github.com/facebookincubator/create-react-app/issues/1065
|
||||||
|
watchOptions: {
|
||||||
|
ignored: new RegExp(
|
||||||
|
`^(?!${path
|
||||||
|
.normalize(paths.appSrc + '/')
|
||||||
|
.replace(/[\\]+/g, '\\\\')}).+[\\\\/]node_modules[\\\\/]`,
|
||||||
|
'g'
|
||||||
|
),
|
||||||
|
},
|
||||||
|
// Enable HTTPS if the HTTPS environment variable is set to 'true'
|
||||||
|
https: protocol === 'https',
|
||||||
|
host: host,
|
||||||
|
// Since we are using WebpackDevServer, we need to allow cross origin requests
|
||||||
|
headers: {
|
||||||
|
'Access-Control-Allow-Origin': '*'
|
||||||
|
},
|
||||||
|
overlay: false,
|
||||||
|
historyApiFallback: {
|
||||||
|
// Paths with dots should still use the history fallback.
|
||||||
|
// See https://github.com/facebookincubator/create-react-app/issues/387.
|
||||||
|
disableDotRule: true,
|
||||||
|
},
|
||||||
|
public: allowedHost,
|
||||||
|
proxy,
|
||||||
|
before(app) {
|
||||||
|
// This lets us open files from the runtime error overlay.
|
||||||
|
app.use(errorOverlayMiddleware());
|
||||||
|
// This service worker file is effectively a 'no-op' that will reset any
|
||||||
|
// previous service worker registered for the same host:port combination.
|
||||||
|
// We do this in development to avoid hitting the production cache if
|
||||||
|
// it used the same host and port.
|
||||||
|
// https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
|
||||||
|
app.use(noopServiceWorkerMiddleware());
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
150
{{cookiecutter.project_slug}}/frontend/node_scripts/build.js
Normal file
150
{{cookiecutter.project_slug}}/frontend/node_scripts/build.js
Normal file
|
|
@ -0,0 +1,150 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// Do this as the first thing so that any code reading it knows the right env.
|
||||||
|
process.env.BABEL_ENV = 'production';
|
||||||
|
process.env.NODE_ENV = 'production';
|
||||||
|
|
||||||
|
// Makes the script crash on unhandled rejections instead of silently
|
||||||
|
// ignoring them. In the future, promise rejections that are not handled will
|
||||||
|
// terminate the Node.js process with a non-zero exit code.
|
||||||
|
process.on('unhandledRejection', err => {
|
||||||
|
throw err;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Ensure environment variables are read.
|
||||||
|
require('../config/env');
|
||||||
|
|
||||||
|
const path = require('path');
|
||||||
|
const chalk = require('chalk');
|
||||||
|
const fs = require('fs-extra');
|
||||||
|
const webpack = require('webpack');
|
||||||
|
const config = require('../config/webpack.config.prod');
|
||||||
|
const paths = require('../config/paths');
|
||||||
|
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
|
||||||
|
const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
|
||||||
|
const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
|
||||||
|
const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
|
||||||
|
const printBuildError = require('react-dev-utils/printBuildError');
|
||||||
|
|
||||||
|
const measureFileSizesBeforeBuild =
|
||||||
|
FileSizeReporter.measureFileSizesBeforeBuild;
|
||||||
|
const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
|
||||||
|
const useYarn = fs.existsSync(paths.yarnLockFile);
|
||||||
|
|
||||||
|
// These sizes are pretty large. We'll warn for bundles exceeding them.
|
||||||
|
const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
|
||||||
|
const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
|
||||||
|
|
||||||
|
// Warn and crash if required files are missing
|
||||||
|
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
// First, read the current file sizes in build directory.
|
||||||
|
// This lets us display how much they changed later.
|
||||||
|
measureFileSizesBeforeBuild(paths.appBuild)
|
||||||
|
.then(previousFileSizes => {
|
||||||
|
// Remove all content but keep the directory so that
|
||||||
|
// if you're in it, you don't end up in Trash
|
||||||
|
fs.emptyDirSync(paths.appBuild);
|
||||||
|
// Merge with the public folder
|
||||||
|
copyPublicFolder();
|
||||||
|
// Start the webpack build
|
||||||
|
return build(previousFileSizes);
|
||||||
|
})
|
||||||
|
.then(
|
||||||
|
({ stats, previousFileSizes, warnings }) => {
|
||||||
|
if (warnings.length) {
|
||||||
|
console.log(chalk.yellow('Compiled with warnings.\n'));
|
||||||
|
console.log(warnings.join('\n\n'));
|
||||||
|
console.log(
|
||||||
|
'\nSearch for the ' +
|
||||||
|
chalk.underline(chalk.yellow('keywords')) +
|
||||||
|
' to learn more about each warning.'
|
||||||
|
);
|
||||||
|
console.log(
|
||||||
|
'To ignore, add ' +
|
||||||
|
chalk.cyan('// eslint-disable-next-line') +
|
||||||
|
' to the line before.\n'
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
console.log(chalk.green('Compiled successfully.\n'));
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('File sizes after gzip:\n');
|
||||||
|
printFileSizesAfterBuild(
|
||||||
|
stats,
|
||||||
|
previousFileSizes,
|
||||||
|
paths.appBuild,
|
||||||
|
WARN_AFTER_BUNDLE_GZIP_SIZE,
|
||||||
|
WARN_AFTER_CHUNK_GZIP_SIZE
|
||||||
|
);
|
||||||
|
console.log();
|
||||||
|
|
||||||
|
const appPackage = require(paths.appPackageJson);
|
||||||
|
const publicUrl = paths.publicUrl;
|
||||||
|
const publicPath = config.output.publicPath;
|
||||||
|
const buildFolder = path.relative(process.cwd(), paths.appBuild);
|
||||||
|
printHostingInstructions(
|
||||||
|
appPackage,
|
||||||
|
publicUrl,
|
||||||
|
publicPath,
|
||||||
|
buildFolder,
|
||||||
|
useYarn
|
||||||
|
);
|
||||||
|
},
|
||||||
|
err => {
|
||||||
|
console.log(chalk.red('Failed to compile.\n'));
|
||||||
|
printBuildError(err);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Create the production build and print the deployment instructions.
|
||||||
|
function build(previousFileSizes) {
|
||||||
|
console.log('Creating an optimized production build...');
|
||||||
|
|
||||||
|
let compiler = webpack(config);
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
compiler.run((err, stats) => {
|
||||||
|
if (err) {
|
||||||
|
return reject(err);
|
||||||
|
}
|
||||||
|
const messages = formatWebpackMessages(stats.toJson({}, true));
|
||||||
|
if (messages.errors.length) {
|
||||||
|
// Only keep the first error. Others are often indicative
|
||||||
|
// of the same problem, but confuse the reader with noise.
|
||||||
|
if (messages.errors.length > 1) {
|
||||||
|
messages.errors.length = 1;
|
||||||
|
}
|
||||||
|
return reject(new Error(messages.errors.join('\n\n')));
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
process.env.CI &&
|
||||||
|
(typeof process.env.CI !== 'string' ||
|
||||||
|
process.env.CI.toLowerCase() !== 'false') &&
|
||||||
|
messages.warnings.length
|
||||||
|
) {
|
||||||
|
console.log(
|
||||||
|
chalk.yellow(
|
||||||
|
'\nTreating warnings as errors because process.env.CI = true.\n' +
|
||||||
|
'Most CI servers set it automatically.\n'
|
||||||
|
)
|
||||||
|
);
|
||||||
|
return reject(new Error(messages.warnings.join('\n\n')));
|
||||||
|
}
|
||||||
|
return resolve({
|
||||||
|
stats,
|
||||||
|
previousFileSizes,
|
||||||
|
warnings: messages.warnings,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function copyPublicFolder() {
|
||||||
|
fs.copySync(paths.appPublic, paths.appBuild, {
|
||||||
|
dereference: true,
|
||||||
|
filter: file => file !== paths.appHtml,
|
||||||
|
});
|
||||||
|
}
|
||||||
92
{{cookiecutter.project_slug}}/frontend/node_scripts/start.js
Normal file
92
{{cookiecutter.project_slug}}/frontend/node_scripts/start.js
Normal file
|
|
@ -0,0 +1,92 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// Do this as the first thing so that any code reading it knows the right env.
|
||||||
|
process.env.BABEL_ENV = 'development';
|
||||||
|
process.env.NODE_ENV = 'development';
|
||||||
|
|
||||||
|
// Makes the script crash on unhandled rejections instead of silently
|
||||||
|
// ignoring them. In the future, promise rejections that are not handled will
|
||||||
|
// terminate the Node.js process with a non-zero exit code.
|
||||||
|
process.on('unhandledRejection', err => {
|
||||||
|
throw err;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Ensure environment variables are read.
|
||||||
|
require('../config/env');
|
||||||
|
|
||||||
|
const fs = require('fs');
|
||||||
|
const chalk = require('chalk');
|
||||||
|
const webpack = require('webpack');
|
||||||
|
const WebpackDevServer = require('webpack-dev-server');
|
||||||
|
const clearConsole = require('react-dev-utils/clearConsole');
|
||||||
|
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
|
||||||
|
const {
|
||||||
|
choosePort,
|
||||||
|
createCompiler,
|
||||||
|
prepareProxy,
|
||||||
|
prepareUrls,
|
||||||
|
} = require('react-dev-utils/WebpackDevServerUtils');
|
||||||
|
const openBrowser = require('react-dev-utils/openBrowser');
|
||||||
|
const paths = require('../config/paths');
|
||||||
|
const config = require('../config/webpack.config.dev');
|
||||||
|
const createDevServerConfig = require('../config/webpackDevServer.config');
|
||||||
|
|
||||||
|
const useYarn = fs.existsSync(paths.yarnLockFile);
|
||||||
|
const isInteractive = process.stdout.isTTY;
|
||||||
|
|
||||||
|
// Warn and crash if required files are missing
|
||||||
|
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tools like Cloud9 rely on this.
|
||||||
|
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
|
||||||
|
const HOST = process.env.HOST || '0.0.0.0';
|
||||||
|
|
||||||
|
// We attempt to use the default port but if it is busy, we offer the user to
|
||||||
|
// run on a different port. `detect()` Promise resolves to the next free port.
|
||||||
|
choosePort(HOST, DEFAULT_PORT)
|
||||||
|
.then(port => {
|
||||||
|
if (port == null) {
|
||||||
|
// We have not found a port.
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
|
||||||
|
const appName = require(paths.appPackageJson).name;
|
||||||
|
const urls = prepareUrls(protocol, HOST, port);
|
||||||
|
// Create a webpack compiler that is configured with custom messages.
|
||||||
|
const compiler = createCompiler(webpack, config, appName, urls, useYarn);
|
||||||
|
// Load proxy config
|
||||||
|
const proxySetting = require(paths.appPackageJson).proxy;
|
||||||
|
const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
|
||||||
|
// Serve webpack assets generated by the compiler over a web sever.
|
||||||
|
const serverConfig = createDevServerConfig(
|
||||||
|
proxyConfig,
|
||||||
|
urls.lanUrlForConfig
|
||||||
|
);
|
||||||
|
const devServer = new WebpackDevServer(compiler, serverConfig);
|
||||||
|
// Launch WebpackDevServer.
|
||||||
|
devServer.listen(port, HOST, err => {
|
||||||
|
if (err) {
|
||||||
|
return console.log(err);
|
||||||
|
}
|
||||||
|
if (isInteractive) {
|
||||||
|
clearConsole();
|
||||||
|
}
|
||||||
|
console.log(chalk.cyan('Starting the development server...\n'));
|
||||||
|
openBrowser(urls.localUrlForBrowser);
|
||||||
|
});
|
||||||
|
|
||||||
|
['SIGINT', 'SIGTERM'].forEach(function(sig) {
|
||||||
|
process.on(sig, function() {
|
||||||
|
devServer.close();
|
||||||
|
process.exit();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
if (err && err.message) {
|
||||||
|
console.log(err.message);
|
||||||
|
}
|
||||||
|
process.exit(1);
|
||||||
|
});
|
||||||
27
{{cookiecutter.project_slug}}/frontend/node_scripts/test.js
Normal file
27
{{cookiecutter.project_slug}}/frontend/node_scripts/test.js
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// Do this as the first thing so that any code reading it knows the right env.
|
||||||
|
process.env.BABEL_ENV = 'test';
|
||||||
|
process.env.NODE_ENV = 'test';
|
||||||
|
process.env.PUBLIC_URL = '';
|
||||||
|
|
||||||
|
// Makes the script crash on unhandled rejections instead of silently
|
||||||
|
// ignoring them. In the future, promise rejections that are not handled will
|
||||||
|
// terminate the Node.js process with a non-zero exit code.
|
||||||
|
process.on('unhandledRejection', err => {
|
||||||
|
throw err;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Ensure environment variables are read.
|
||||||
|
require('../config/env');
|
||||||
|
|
||||||
|
const jest = require('jest');
|
||||||
|
const argv = process.argv.slice(2);
|
||||||
|
|
||||||
|
// Watch unless on CI or in coverage mode
|
||||||
|
if (!process.env.CI && argv.indexOf('--coverage') < 0) {
|
||||||
|
argv.push('--watch');
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
jest.run(argv);
|
||||||
99
{{cookiecutter.project_slug}}/frontend/package.json
Normal file
99
{{cookiecutter.project_slug}}/frontend/package.json
Normal file
|
|
@ -0,0 +1,99 @@
|
||||||
|
{
|
||||||
|
"name": "{{cookiecutter.project_slug}}",
|
||||||
|
"version": "{{ cookiecutter.version }}",
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"react": "16.2.0",
|
||||||
|
"react-dom": "16.2.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"autoprefixer": "7.1.6",
|
||||||
|
"babel-core": "6.26.0",
|
||||||
|
"babel-eslint": "7.2.3",
|
||||||
|
"babel-jest": "20.0.3",
|
||||||
|
"babel-loader": "7.1.2",
|
||||||
|
"babel-preset-react-app": "^3.1.0",
|
||||||
|
"babel-runtime": "6.26.0",
|
||||||
|
"case-sensitive-paths-webpack-plugin": "2.1.1",
|
||||||
|
"chalk": "1.1.3",
|
||||||
|
"css-loader": "0.28.7",
|
||||||
|
"dotenv": "4.0.0",
|
||||||
|
"eslint": "4.10.0",
|
||||||
|
"eslint-config-react-app": "^2.0.1",
|
||||||
|
"eslint-loader": "1.9.0",
|
||||||
|
"eslint-plugin-flowtype": "2.39.1",
|
||||||
|
"eslint-plugin-import": "2.8.0",
|
||||||
|
"eslint-plugin-jsx-a11y": "5.1.1",
|
||||||
|
"eslint-plugin-react": "7.4.0",
|
||||||
|
"extract-text-webpack-plugin": "3.0.2",
|
||||||
|
"file-loader": "1.1.5",
|
||||||
|
"fs-extra": "3.0.1",
|
||||||
|
"html-webpack-plugin": "2.29.0",
|
||||||
|
"jest": "20.0.4",
|
||||||
|
"object-assign": "4.1.1",
|
||||||
|
"postcss-flexbugs-fixes": "3.2.0",
|
||||||
|
"postcss-loader": "2.0.8",
|
||||||
|
"promise": "8.0.1",
|
||||||
|
"raf": "3.4.0",
|
||||||
|
"react-dev-utils": "^4.2.1",
|
||||||
|
"react-hot-loader": "^3.0.0",
|
||||||
|
"style-loader": "0.19.0",
|
||||||
|
"sw-precache-webpack-plugin": "0.11.4",
|
||||||
|
"url-loader": "0.6.2",
|
||||||
|
"webpack": "3.8.1",
|
||||||
|
"webpack-bundle-tracker": "0.2.1",
|
||||||
|
"webpack-dev-server": "2.9.4",
|
||||||
|
"webpack-manifest-plugin": "1.3.2",
|
||||||
|
"whatwg-fetch": "2.0.3"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "node node_scripts/start.js",
|
||||||
|
"build": "node node_scripts/build.js",
|
||||||
|
"test": "node node_scripts/test.js --env=jsdom"
|
||||||
|
},
|
||||||
|
"jest": {
|
||||||
|
"collectCoverageFrom": [
|
||||||
|
"src/**/*.{js,jsx,mjs}"
|
||||||
|
],
|
||||||
|
"setupFiles": [
|
||||||
|
"<rootDir>/config/polyfills.js"
|
||||||
|
],
|
||||||
|
"testMatch": [
|
||||||
|
"<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
|
||||||
|
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
|
||||||
|
],
|
||||||
|
"testEnvironment": "node",
|
||||||
|
"testURL": "http://localhost",
|
||||||
|
"transform": {
|
||||||
|
"^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
|
||||||
|
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
|
||||||
|
"^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
|
||||||
|
},
|
||||||
|
"transformIgnorePatterns": [
|
||||||
|
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
|
||||||
|
],
|
||||||
|
"moduleNameMapper": {
|
||||||
|
"^react-native$": "react-native-web"
|
||||||
|
},
|
||||||
|
"moduleFileExtensions": [
|
||||||
|
"web.js",
|
||||||
|
"mjs",
|
||||||
|
"js",
|
||||||
|
"json",
|
||||||
|
"web.jsx",
|
||||||
|
"jsx",
|
||||||
|
"node"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"babel": {
|
||||||
|
"presets": [
|
||||||
|
"react-app"
|
||||||
|
],
|
||||||
|
"plugins": [
|
||||||
|
"react-hot-loader/babel"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"extends": "react-app"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
{{cookiecutter.project_slug}}/frontend/public/favicon.ico
Normal file
BIN
{{cookiecutter.project_slug}}/frontend/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
40
{{cookiecutter.project_slug}}/frontend/public/index.html
Normal file
40
{{cookiecutter.project_slug}}/frontend/public/index.html
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<meta name="theme-color" content="#000000">
|
||||||
|
<!--
|
||||||
|
manifest.json provides metadata used when your web app is added to the
|
||||||
|
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
|
||||||
|
-->
|
||||||
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||||
|
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||||
|
<!--
|
||||||
|
Notice the use of %PUBLIC_URL% in the tags above.
|
||||||
|
It will be replaced with the URL of the `public` folder during the build.
|
||||||
|
Only files inside the `public` folder can be referenced from the HTML.
|
||||||
|
|
||||||
|
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||||
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
|
-->
|
||||||
|
<title>React App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
You need to enable JavaScript to run this app.
|
||||||
|
</noscript>
|
||||||
|
<div id="root"></div>
|
||||||
|
<!--
|
||||||
|
This HTML file is a template.
|
||||||
|
If you open it directly in the browser, you will see an empty page.
|
||||||
|
|
||||||
|
You can add webfonts, meta tags, or analytics to this file.
|
||||||
|
The build step will place the bundled scripts into the <body> tag.
|
||||||
|
|
||||||
|
To begin the development, run `npm start` or `yarn start`.
|
||||||
|
To create a production bundle, use `npm run build` or `yarn build`.
|
||||||
|
-->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
15
{{cookiecutter.project_slug}}/frontend/public/manifest.json
Normal file
15
{{cookiecutter.project_slug}}/frontend/public/manifest.json
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
{
|
||||||
|
"short_name": "React App",
|
||||||
|
"name": "Create React App Sample",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "64x64 32x32 24x24 16x16",
|
||||||
|
"type": "image/x-icon"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"start_url": "./index.html",
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#000000",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
28
{{cookiecutter.project_slug}}/frontend/src/App.css
Normal file
28
{{cookiecutter.project_slug}}/frontend/src/App.css
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
.App {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.App-logo {
|
||||||
|
animation: App-logo-spin infinite 20s linear;
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.App-header {
|
||||||
|
background-color: #222;
|
||||||
|
height: 150px;
|
||||||
|
padding: 20px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.App-title {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.App-intro {
|
||||||
|
font-size: large;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes App-logo-spin {
|
||||||
|
from { transform: rotate(0deg); }
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
21
{{cookiecutter.project_slug}}/frontend/src/App.js
Normal file
21
{{cookiecutter.project_slug}}/frontend/src/App.js
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import logo from './logo.svg';
|
||||||
|
import './App.css';
|
||||||
|
|
||||||
|
class App extends Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="App">
|
||||||
|
<header className="App-header">
|
||||||
|
<img src={logo} className="App-logo" alt="logo" />
|
||||||
|
<h1 className="App-title">Welcome to React</h1>
|
||||||
|
</header>
|
||||||
|
<p className="App-intro">
|
||||||
|
To get started, edit <code>src/App.js</code> and save to reload.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
8
{{cookiecutter.project_slug}}/frontend/src/App.test.js
Normal file
8
{{cookiecutter.project_slug}}/frontend/src/App.test.js
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
import App from './App';
|
||||||
|
|
||||||
|
it('renders without crashing', () => {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
ReactDOM.render(<App />, div);
|
||||||
|
});
|
||||||
5
{{cookiecutter.project_slug}}/frontend/src/index.css
Normal file
5
{{cookiecutter.project_slug}}/frontend/src/index.css
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
30
{{cookiecutter.project_slug}}/frontend/src/index.js
Normal file
30
{{cookiecutter.project_slug}}/frontend/src/index.js
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
import { AppContainer } from 'react-hot-loader';
|
||||||
|
import './index.css';
|
||||||
|
import App from './App';
|
||||||
|
import registerServiceWorker from './registerServiceWorker';
|
||||||
|
|
||||||
|
const rootEl = document.getElementById('root');
|
||||||
|
|
||||||
|
ReactDOM.render(
|
||||||
|
<AppContainer>
|
||||||
|
<App />
|
||||||
|
</AppContainer>,
|
||||||
|
rootEl
|
||||||
|
);
|
||||||
|
|
||||||
|
registerServiceWorker();
|
||||||
|
|
||||||
|
// Hot Reloader: http://joshbroton.com/add-react-hot-reloading-create-react-app/
|
||||||
|
if (module.hot) {
|
||||||
|
module.hot.accept('./App', () => {
|
||||||
|
const NextApp = require('./App').default; // eslint-disable-line global-require
|
||||||
|
ReactDOM.render(
|
||||||
|
<AppContainer>
|
||||||
|
<NextApp />
|
||||||
|
</AppContainer>,
|
||||||
|
rootEl
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
7
{{cookiecutter.project_slug}}/frontend/src/logo.svg
Normal file
7
{{cookiecutter.project_slug}}/frontend/src/logo.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
|
||||||
|
<g fill="#61DAFB">
|
||||||
|
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
|
||||||
|
<circle cx="420.9" cy="296.5" r="45.7"/>
|
||||||
|
<path d="M520.5 78.1z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
|
|
@ -0,0 +1,108 @@
|
||||||
|
// In production, we register a service worker to serve assets from local cache.
|
||||||
|
|
||||||
|
// This lets the app load faster on subsequent visits in production, and gives
|
||||||
|
// it offline capabilities. However, it also means that developers (and users)
|
||||||
|
// will only see deployed updates on the "N+1" visit to a page, since previously
|
||||||
|
// cached resources are updated in the background.
|
||||||
|
|
||||||
|
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
|
||||||
|
// This link also includes instructions on opting out of this behavior.
|
||||||
|
|
||||||
|
const isLocalhost = Boolean(
|
||||||
|
window.location.hostname === 'localhost' ||
|
||||||
|
// [::1] is the IPv6 localhost address.
|
||||||
|
window.location.hostname === '[::1]' ||
|
||||||
|
// 127.0.0.1/8 is considered localhost for IPv4.
|
||||||
|
window.location.hostname.match(
|
||||||
|
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
export default function register() {
|
||||||
|
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||||
|
// The URL constructor is available in all browsers that support SW.
|
||||||
|
const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
|
||||||
|
if (publicUrl.origin !== window.location.origin) {
|
||||||
|
// Our service worker won't work if PUBLIC_URL is on a different origin
|
||||||
|
// from what our page is served on. This might happen if a CDN is used to
|
||||||
|
// serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
||||||
|
|
||||||
|
if (isLocalhost) {
|
||||||
|
// This is running on localhost. Lets check if a service worker still exists or not.
|
||||||
|
checkValidServiceWorker(swUrl);
|
||||||
|
} else {
|
||||||
|
// Is not local host. Just register service worker
|
||||||
|
registerValidSW(swUrl);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function registerValidSW(swUrl) {
|
||||||
|
navigator.serviceWorker
|
||||||
|
.register(swUrl)
|
||||||
|
.then(registration => {
|
||||||
|
registration.onupdatefound = () => {
|
||||||
|
const installingWorker = registration.installing;
|
||||||
|
installingWorker.onstatechange = () => {
|
||||||
|
if (installingWorker.state === 'installed') {
|
||||||
|
if (navigator.serviceWorker.controller) {
|
||||||
|
// At this point, the old content will have been purged and
|
||||||
|
// the fresh content will have been added to the cache.
|
||||||
|
// It's the perfect time to display a "New content is
|
||||||
|
// available; please refresh." message in your web app.
|
||||||
|
console.log('New content is available; please refresh.');
|
||||||
|
} else {
|
||||||
|
// At this point, everything has been precached.
|
||||||
|
// It's the perfect time to display a
|
||||||
|
// "Content is cached for offline use." message.
|
||||||
|
console.log('Content is cached for offline use.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error during service worker registration:', error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkValidServiceWorker(swUrl) {
|
||||||
|
// Check if the service worker can be found. If it can't reload the page.
|
||||||
|
fetch(swUrl)
|
||||||
|
.then(response => {
|
||||||
|
// Ensure service worker exists, and that we really are getting a JS file.
|
||||||
|
if (
|
||||||
|
response.status === 404 ||
|
||||||
|
response.headers.get('content-type').indexOf('javascript') === -1
|
||||||
|
) {
|
||||||
|
// No service worker found. Probably a different app. Reload the page.
|
||||||
|
navigator.serviceWorker.ready.then(registration => {
|
||||||
|
registration.unregister().then(() => {
|
||||||
|
window.location.reload();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// Service worker found. Proceed as normal.
|
||||||
|
registerValidSW(swUrl);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
console.log(
|
||||||
|
'No internet connection found. App is running in offline mode.'
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function unregister() {
|
||||||
|
if ('serviceWorker' in navigator) {
|
||||||
|
navigator.serviceWorker.ready.then(registration => {
|
||||||
|
registration.unregister();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
6605
{{cookiecutter.project_slug}}/frontend/yarn.lock
Normal file
6605
{{cookiecutter.project_slug}}/frontend/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
|
|
@ -58,4 +58,20 @@ rcssmin==1.0.6 {% if cookiecutter.windows == 'y' %}--install-option="--without-c
|
||||||
django-compressor==2.2
|
django-compressor==2.2
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
|
{% if cookiecutter.js_task_runner == "CreateReactApp" %}
|
||||||
|
|
||||||
|
# Django REST APIs
|
||||||
|
djangorestframework==3.7.7
|
||||||
|
djangorestframework-jwt==1.11.0
|
||||||
|
|
||||||
|
django-filter==1.1.0
|
||||||
|
django-rest-auth==0.9.2
|
||||||
|
|
||||||
|
coreapi==2.3.3 # For documenting API
|
||||||
|
django-oauth-toolkit==0.12.0
|
||||||
|
|
||||||
|
# This integrates webpack and Django
|
||||||
|
django-webpack-loader==0.5.0
|
||||||
|
{%- endif %}
|
||||||
|
|
||||||
# Your custom requirements go here
|
# Your custom requirements go here
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
{% raw %}{% extends 'react-base.html' %}
|
||||||
|
{% load staticfiles %}
|
||||||
|
{% load render_bundle from webpack_loader %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
<div id="root"></div>
|
||||||
|
{% endblock body %}
|
||||||
|
|
||||||
|
{% block javascript %}
|
||||||
|
{% render_bundle 'main' %}
|
||||||
|
{% endblock javascript %}{% endraw %}
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
{% raw %}{% load staticfiles %}
|
||||||
|
<html class="{% block html_class %}{% endblock html_class %}" lang="en">
|
||||||
|
<head>
|
||||||
|
<!-- Allows you to inject head elements here -->
|
||||||
|
{% block head %}
|
||||||
|
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
||||||
|
|
||||||
|
<meta name="author" content="">
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="keywords" content="NGS, Panel">
|
||||||
|
|
||||||
|
<title>{% block head_title %}{% endraw %}{{ cookiecutter.project_name }}{% raw %}{% endblock head_title %}</title>
|
||||||
|
|
||||||
|
<!-- Allows you to inject CCS here -->
|
||||||
|
{% block stylesheets %}
|
||||||
|
|
||||||
|
<!-- Project specific Stylesheets -->
|
||||||
|
{% endblock stylesheets %}
|
||||||
|
|
||||||
|
<!-- Title Icon -->
|
||||||
|
<!-- <link rel="shortcut icon" href=""> -->
|
||||||
|
|
||||||
|
{% endblock head %}
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="{% block body_class %}{% endblock body_class %}">
|
||||||
|
|
||||||
|
<!-- Allows you to inject body content here -->
|
||||||
|
{% block body %}
|
||||||
|
{% endblock body %}
|
||||||
|
|
||||||
|
<!-- Project specific JavaScript -->
|
||||||
|
<!-- Allows you to inject JavaScript here -->
|
||||||
|
{% block javascript %}
|
||||||
|
{% endblock javascript %}
|
||||||
|
|
||||||
|
<!-- Google Analytics goes here -->
|
||||||
|
{% block google_analytics %}
|
||||||
|
{% endblock google_analytics %}
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
{% endraw %}
|
||||||
Loading…
Reference in New Issue
Block a user