Create-react-app: Django csrf token

[smmoosavi]

How to I get django csrf token? Is there any way CRA proxy html pages from backend server like django. (I know already proxy works for api call)

[smmoosavi]

or proxy every things except /static/*.

[gaearon]

No, there is no built-in proxying for HTML pages.

You can, however, embed anything (e.g. a token) in your HTML page when you serve it.
Does an approach like this help?

[gaearon]

I'm going to close since I provided a workaround—we don't directly integrate with Django so I don't think there is a better answer. Just treat CRA output as a static HTML/JS bundle (which it is), and think how you'd solve this problem with HTML and JS.

[smmoosavi]

Where I can specify __SERVER_DATA__ to use in CRA dev-server?

[gaearon]

Oh, I thought you were referring to production.

Since CRA lets you create single-page apps, you should refer to documentation about CSRF in single-page apps.

Here is what I found about this topic: http://security.stackexchange.com/questions/36468/csrf-protection-and-single-page-apps.

Does it help?

[smmoosavi]

I solve my problem:
solution 1: run my own proxy. you can see gist here

solution 2: open django served page directly and load css and js from CRA

<!-- localhost:8000 -->
<script src="http://localhost:3000"></script>

but in solution 2 hot reload not working. can I set hot reload url from /sock-js/... to http://localhost:3000/sock-js/...?

[gaearon]

No, this is not possible without ejecting (it's just too hard to support so many possible configurations and ensure neither of them breaks with time).

[shangsunset]

Hi, If I were to eject, what should be the best approach that doesnt use jQuery on dev server? I searched around but didnt find any intuitive solution that goes with CRA. Or how should I make Django to server index.html for development?

[gaearon]

I'm not sure what this has to do with jquery.

CRA just produces a static HTML/JS/CSS bundle. It doesn't do anything special. You can serve it with Django exactly the same way you would serve any HTML page with it. Please refer to Django documentation or support groups for this.

[smmoosavi]

I will create full example in few days.

[shangsunset]

@gaearon Thanks for your reply. The problem is that if I make Django render index.html and call bundled js file like this <script src="http://localhost:3000/static/js/bundle.js"></script> the browser wont auto refresh as @smmoosavi mentioned. Is there a way to make auto refresh work in this scenario?

@smmoosavi looking forward to your example.

[gaearon]

Let's keep it open because it is likely this will keep coming up, and we want to have some sort of integration story.

[viankakrisna]

Can't we just provide a watching development mode that writes to disk? I think it a lot easier for this kind of use case rather than hacking dev server to work with it. It's coming up quite often and I know what it feels to be ejecting and overwhelmed by the config just to integrate CRA with a backend on development.

A lot of times, we just want to include a script tag that bundles quickly...

quik/nwb may be better suited to this scenario, but I miss the polish and community of CRA when I'm using it. 😜

[gaearon]

Yes, I think this is related to https://github.com/facebookincubator/create-react-app/issues/1070.

[smmoosavi]

djcra

Django :heart: create-react-app integration example

https://github.com/smmoosavi/djcra

[smmoosavi]

this example works in development and production, even with cdn server for static files.

@gaearon REACT_APP_PUBLIC_URL not working as I expect. can you help in problems section. should I append PUBLIC_URL manually?

import logo from './logo.svg';
console.log(logo); // "/static/media/logo.5d5d9eef.svg"
<img src={(process.env.REACT_APP_PUBLIC_URL || '') + logo} alt="logo" />

[gaearon]

Maybe you meant process.env.PUBLIC_URL? REACT_APP_* is reserved for project-specific variables with no special meaning, but PUBLIC_URL is always provided.

[smmoosavi]

Can we apply PUBLIC_URL in dev mode?

attachment:
code:

import logo from './logo.svg';
console.log(logo);
console.log(process.env.PUBLIC_URL);
console.log(process.env.REACT_APP_PUBLIC_URL);

npm start browser output:

"/static/media/logo.5d5d9eef.svg"
""
undefined

PUBLIC_URL=http://localhost:8080 npm start browser output:

"/static/media/logo.5d5d9eef.svg"
""
undefined

REACT_APP_PUBLIC_URL=http://localhost:8080 npm start browser output:

"/static/media/logo.5d5d9eef.svg"
""
"http://localhost:8080"

npm run build browser output:

"/static/media/logo.5d5d9eef.svg"
""
undefined

PUBLIC_URL=http://localhost:8080 npm run build browser output:

"http://localhost:8080/static/media/logo.5d5d9eef.svg"
"http://localhost:8080"
undefined

REACT_APP_PUBLIC_URL=http://localhost:8080 npm run build browser output:

"/static/media/logo.5d5d9eef.svg"
""
"http://localhost:8080"

[gaearon]

Can we apply PUBLIC_URL in dev mode?

Yes, see https://github.com/facebookincubator/create-react-app/issues/1582 for discussion.

[smmoosavi]

coming in 0.10.0?

[smmoosavi]

I test 0.10.0-alpha.328cb32e but I can't see any change.

code:

import logo from './logo.svg';
console.log(logo);
console.log(process.env.PUBLIC_URL);

command:

PUBLIC_URL=http://localhost:3000 npm run start

output:

"/static/media/logo.5d5d9eef.svg"
""

and hot reload ws (open localhost:8000 in browser.)

http://localhost:8000/sockjs-node/info?t=1490949621968

what I expect:

"http://localhost:3000/static/media/logo.5d5d9eef.svg"
"http://localhost:3000"

and hot reload ws be

http://localhost:3000/sockjs-node/info?t=1490949621968

is this ok? Did I miss somethings?

[Timer]

This is not yet released in a 0.10 alpha. Sorry. It might be in the next (or next next).

[smmoosavi]

@gaearon can you keep in mind djcra problems when you review #1887.
txn

[gaearon]

I'll close this as stale. If the issues are still relevant please file a more focused issue about specific problems and your proposed solutions.