Forums

React code isn't being interpreted on PA

I'm deploying React app on PA. The app has only one component to begin with so no routing on client-side. I'm using Flask on backend:

blog_blueprint = Blueprint('blog', __name__, static_folder='~/blog/client/build/static')
api = Api(blog_blueprint)


@blog_blueprint.route('/')
def index():
    return blog_blueprint.send_static_file('~/blog/client/build/index.html')

mapping of static files looks like this:

URL                                           Directory     
/                       /home/markalexa/blog/client/build/static/js/main.e7045ac6.chunk.js

the code above is based on what I've gathered on the web and in official docs https://create-react-app.dev/docs/deployment

When I type in my domain and hit enter the page renders React code as a plain text:

(this.webpackJsonpclient=this.webpackJsonpclient||[]).push([[0],{10:function(t,e,n){},11:function(t,e,n){"use
strict";n.r(e);var c=n(0),i=n(1),o=n.n(i),s=n(3),a=n.n(s),p=(n(9),n.p+"static/media/logo.6ce24c58.svg"),r=n.p+"static
/media/python.f22d1fce.png",l=n.p+"static/media/react.80045de7.png";n(10);var d=function(){return Object(c.jsx)
("div",{className:"App",children:Object(c.jsxs)("header",{className:"App-header",children:[Object(c.jsx)("img",
{src:p,className:"App-logo",alt:"logo"}),Object(c.jsx)("p",{style:{marginTop:"10px",paddingBottom:"30px"},children:"This soon is going to be"}),Object(c.jsx)("img",{src:r,style:{height:"60px",width:"auto"},alt:"Python Logo"}),"\xa0\xa0",Object(c.jsx)

Any assistance is very much appreciated.

deleted-user-7794456 | 25 posts | Jan. 27, 2021, 10:01 a.m. | permalink

I see this is a continuation from another thread. Can we take a look into your code?

Staff pafk | 2973 posts | PythonAnywhere staff | Jan. 27, 2021, 10:16 a.m. | permalink

I made the code publicly available for the time being. You can take a look here https://gitlab.com/coding_hedgehog/bitcoinacademy

deleted-user-7794456 | 25 posts | Jan. 27, 2021, 10:26 a.m. | permalink

According to the page you linked to, you need to be serving the index.html file from your build directory, not the .js file.

Staff glenn | 9498 posts | PythonAnywhere staff | Jan. 27, 2021, 3:07 p.m. | permalink

Hi Glen,

this setup should work according to video tutorial I've just watched:

blog_blueprint = Blueprint('blog', __name__, static_folder='~/blog/client/build', static_url_path='/')
api = Api(blog_blueprint)

@blog_blueprint.route('/')
def index():
    return blog_blueprint.send_static_file('index.html')

mapping of static files:

URL                Directory    
/               /home/markalexa/blog/client/build/static

And no, it doesn't. I'm getting 404.

deleted-user-7794456 | 25 posts | Jan. 27, 2021, 4:47 p.m. | permalink

You're getting a 404 because you do not have an index.html file in /home/markalexa/blog/client/build/static and. I'm guessing, that making the static_url for your blueprint "/" is probably hiding the route that you defined.

If you put your index.html into /home/markalexa/blog/client/build/static, then it will be served by the static file system and you will not need to serve it from flask.

Staff glenn | 9498 posts | PythonAnywhere staff | Jan. 27, 2021, 5:43 p.m. | permalink

Resolved. Thank you.

deleted-user-7794456 | 25 posts | Jan. 27, 2021, 9:16 p.m. | permalink

Great, thanks for letting us know!

Staff pafk | 2973 posts | PythonAnywhere staff | Jan. 28, 2021, 9:54 a.m. | permalink