Where do I put front-end code in my backend project and how/when to run it?

Question

The question is, say I have written a backend REST service using Python, and then some other guy wrote some frontend code in Angular JS. Is the typical workflow putting them into two separate folders and run them separately? So the process will look like below

python manage.py runserver 

in Python colder and then probably

# in the angular2 folder
npm start

Or should I place all the JS code into some assets folder and when I start my server, all the JS code will run automatically with them? If so, how should I do it?

Another question related is, when is all the JS code sent to users' browsers? If the app is a client-side rendering app, is the code sent to browser at the first time of server requesting? How does the server know it should package your JS code and ship it?

Answer 1

Q) The question is, say I have written a backend REST service using Python, and then some other guy wrote some frontend code in Angular JS. Is the typical workflow putting them into two separate folders and run them separately?

Both Angular and Python can be run differently as well as together. You could choose to place the Angular files (which qualify for all practical purposes as public files) in the public (or related folder) depending on which framework you're using - Django, Flask, Web2py or so on.

You can also choose to run them independently as standalone apps.

Depends on your requirement. Honestly, there are so many ways to answer this question.

Q)Or should I place all the JS code into some assets folder and when I start my server, all the JS code will run automatically with them? If so, how should I do it? If you place everything in your assets folder, then as soon as the home route or any other route is made a request for [from a browser] , the public folder passes on to the browser. Although I'm not sure if it is the case with server side rendering. If you're using Angular 1, I do not think it fits server side rendering although you could use some libraries out there.

Q)Another question related is, when is all the JS code sent to users' browsers? If the app is a client-side rendering app, is the code sent to browser at the first time of server requesting? How does the server know it should package your JS code and ship it? All the files in PUBLIC folder on the server are accessible by a browser.

All of your questions seem to essentially ask the same question.

Answer 2

There are many approaches to this problem.

If infrastructure management is difficult for you, than maybe it's easier to place them in the same server. You can create another directory and place your html that is served to browser with your JavaScript code.

In case you have a good pipeline (which I think it pays for it self) than having another server that serves your application is better. You can do more things without affecting your service, like caching etc. And your server that runs your service wont be busy serving assets as well.

I have a case where we run a node server, which serves the html and javascript to our users, because that way we can do server side rendering. enter link description here

The flow of code execution will be this : Once the browser of your user hits the server that is serving html and assets, it will download it locally and it will start with JavaScript execution (Parsing, Compiling and Executing). Your JavaScript app might do some API calls upon initialization or it might not, but your service will be executed only if frontend makes a request.

As for CORS it is irrelevant how you serve them, because you can keep them always in the same domain.