Have the picture error after build my angular 5 app, i serve my app with a django view.
I added the zone.js dependencie in my angular package.json file but i get the same error.
this is my Github gists view and template, the view load all files in the static path. this works fine.
Regards
Solve, the error it's the order of the scripts load by my django view, the view load the scripts in the folders order, but most be the next:
inline
polyfills
scripts
main
Related
I have a main Django app, say myApp, which has subApp in its INSTALLED_APPS list. I use Webpack 5 to compile my main application's resources. The subApp is actually used in several applications which are in Django 2 and Django 3.
However I cannot find a way to tell Webpack, from myApp, to go look into subApp to compile the resource files that are in there. How could one do that? If it helps imagination, let's pretend there is no js/css optimisation in subApp and Webpack would manage that from myApp on compilation.
And if it's not possible directly in Webpack's config, would there be a way to import subApp's scripts and stylesheets in myApp's script files and stylesheets to make webpack compile them from there?
Any help welcome. Thanks for your help.
I have created a working React + Django REST project and it works fine on my development machine. I have used the following method to make it work on my CentOS 7 server.
I created the build directory using npm run build and copied that to the Django project root folder.
I added the build directory on TEMPLATES list in Django settings to identify the index.html file.
I added build/static folder in STATICFILES_DIRS.
I added url(r'^.*', TemplateView.as_view(template_name='index.html')), line to the root URLS file to capture all url patterns and load the index file in build folder that contains the React app.
I run manage.py collectstatic to create a staticfiles folder with all static files.
I added the staticfiles folder to the Nginx conf file like following:
location /static/ {
root /home/michel/project/staticfiles;
}
I have restarted the nginx server.
I am using the Django server to load the index.html file and I expect that the staticfiles folder will contain necessary static files to load my React app.
However, when I visit www.mydomain.com it loads the index.html file, but does NOT load the React app on <div id='root'></div>. I know this because the footer of the index is shown, but the css for styling that footer is also not working.
I am guessing that I have a problem of making the static files being detected. Any solution?
EDIT
Here is the code that links my React app to the index.html file.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
P.S. It is automatically generated by the create-react-app command.
Its probably because you don't understand the Nginx root directive.
This:
location /static/ {
root /home/michel/project/staticfiles;
}
Means if I request www.yourwebsite.com/static/style.css then Nginx is going to expect that file location to be
/home/michel/project/staticfiles/static/style.css
not
/home/michel/project/staticfiles/style.css
So I have a Django project that acts as a backend REST server, and I would like to integrate that with an existing React project that makes AJAX calls to this REST server. Again, both of these projects already exist, I just want to connect them. Let's say the root of my Django project is DJANGOROOT and that is where manage.py is located. My Django project has a couple of Django apps that are part of the project. Let's say my Django project is called "mydjangoproj", the two Django apps are called "myapp1" and "myapp2" and the React project is called "myreactproj". Each of these two projects (the Django project with the two apps, and the React project) is stored in a separate GIT repo and to connect them on my server I have the following directory structure:
DJANGOROOT/
DJANGOROOT/mydjangoproj
DJANGOROOT/mydjangoproj/settings.py
DJANGOROOT/mydjangoproj/urls.py
DJANGOROOT/mydjangoproj/static/
DJANGOROOT/mydjangoproj/templates/
DJANGOROOT/myapp1
DJANGOROOT/myapp2
DJANGOROOT/myreactproj
DJANGOROOT/myreactproj/package.json
DJANGOROOT/myreactproj/src
DJANGOROOT/myreactproj/src/index.js
etc
Note that the React app root folder is inside DJANGOROOT and is parallel to my django project and app folders.
The React app uses an npm module called react-scripts (see https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build) that has a build script that will build all the stuff in DJANGOROOT/myreactproj/src (staring with index.js) and will put all this in a folder called DJANGOROOT/myreactproj/build. When I run the build (using "npm run build") it fills up the folder DJANGOROOT/myreactproj/build like this:
DJANGOROOT/myreactproj/build
DJANGOROOT/myreactproj/build/index.html
DJANGOROOT/myreactproj/build/{several other files}
DJANGOROOT/myreactproj/build/static
DJANGOROOT/myreactproj/build/static/css
DJANGOROOT/myreactproj/build/static/js
DJANGOROOT/myreactproj/build/static/media
So it appears that to connect Django to my React app, I have to find a way to have the root path for Django (mydomain.com/) point to DJANGOROOT/myreactproj/build/index.html. I understand that I must create a "home" template that is launched by the Django view that runs at mydomain.com/, and that home template has to launch the React app something like this:
{% load render_bundle from webpack_loader %}
{% render_bundle 'main' 'js' 'DEFAULT' %}
But I'm not sure how exactly I need to tell Django where to look for main.js (or is it index.js) and I'm not sure how to get Django to see all the static stuff in DJANGOROOT/myreactproj/build/static.
I also ran "npm list webpack" inside DJANGOROOT/myreactproj to get the version of webpack, and it shows this:
└─┬ react-scripts#1.0.11
└── webpack#3.5.1
I assume this means that webpack 3.5.1 is being used and is somehow bundles with react-scripts v 1.0.11
Also note that the Django app is already running under HTTPS under NGINX and UWSGI, so this is a real server not a dev server.
Can someone who has been through this process shed some light on what I need to do to hook this all up properly?
If your react app is using django just to get data via REST, why you want to use react in django templates? I think preferred approach here is separation not integration. Create standalone react app with its own server (both can run on one physical server of course) - this way your react app and django app will communicate only by rest calls and nothing else needed. If you have some assets in django app - move them to frontend react app.
I just started a new little project for learning purposes and I want to try out Vue js with Django (with DRF). I'm trying to use vue loader (webpack-simple template).
The problem is that I don't know how to synchronize npm run dev and python manage.py runserver. I don't know how to access a template that is rendered by django in webpack-dev-server.
I mean I have a template with django-template specific keywords like {% load static %} that is not handled by webpack-dev-server, obviously.
I know I can build it everytime npm run build, but that's kinda annoying and boring to wait for it everytime I want to make a little change.
In webpack, it's specified to run on a default index.html file, how can I make it work on the template that is actually rendered on 127.0.0.1:8000 with python manage.py runserver running? I know it doesn't make any sense to run 2 dev servers, but I don't know how to explain in other way.
Is there an alternative?
Thanks in advance for answers!
Run your Django server as normal. webpack shouldn't serve your files. It should just build them (use webpack development settings and webpack --watch) and let webpack put them in the static directory of your Django project, e.g.
// in your webpack config
output: {
path: path.resolve(__dirname, 'project/static/js')
}
That way Django can serve the files that are run through your webpack pipeline.
On top you can use the webpack live reload plugin and the live reload browser extension to auto-reload when your assets change.
When you are ready to commit your changes, build your files in production mode and commit the build files in the static dir.
This is a follow-up question to Ember.js app, Parse throws 404 for any path but root:
I have built an Ember-CLI app that I now want to host on Parse.com.
I can't figure out how to actually run the app server on Parse. I confess I don't understand how to serve an Ember-CLI in production from any server.
Do I run "ember server" on Parse somehow or do I need to make my own Express server for this to work?
Run parse new in some temp folder to create the correct config files for your existing parse app
Edit .ember-cli file and add "output-path" : "dist/public" to deploy your code to dist/public
Copy the folders code and config from your temp folder in step 1 to dist/code and dist/config
In a terminal window cd dist and parse deploy
Edit environment.js in your ember config folder and change locationType to hash