I'm hoping you can point me in the right direction for finding out how to deploy a static single page react app to my server. Nothing fancy, no routing, no database--imagine a simple 'hello world' page. What do I need to do to get the react goodness into static files I can upload to my server?
Thanks!
Here's a great boilerplate to get started. This will deploy to heroku no problem. https://github.com/alanbsmith/react-node-example Also checkout the react docs facebook.github.io/react/docs/getting-started.html
Basically if using ES6 or JSX you do your build first, then deploy.
Related
This is the link to my GitHub project, see the directory structure: https://github.com/SutirthaDey/crowdcoin
app link: https://crowdcoins.netlify.app/
I have used react,nextJs, and next routes for dynamic routing. The problem I'm facing is after deploying it using netlify, everything is working fine but when I do a refresh, it's showing 404 pages not found(except the main index.js page/landing page). I don't know whether I was doing it appropriately but tried several things like using netlify.toml and _redirects but nothing really worked. Other than the refreshing part, everything is working fine.
I was stressing out for days over this its such unique problem that I couldn't find the answer too anywhere. I also followed the same Solidity tutorial as you and unfortunately the tutorial is very out of date so a lot of things don't really work. I had the exact same issue as you when trying to build on netlify. It took a while to figure out but basically the next-routes package does not work with netlify. So you will have to set up your routes just using vanilla Next.js. So delete the server.js and routes.js files then search up how to create routes using Next.js I would suggest these tutorials they are very good! Next routes tutorials. Hopefully this helps others I don't want anyone else to go through what I had to go through lol
I'm creating a react application. The default create-react-app puts the react app in the root folder. However, what I want is something like this:
/index.html --This is a static page
/tandcs/index.html --This is a static terms and conditions page
/react-app/ --This should be the react application
How do I create a site where all the pages are static, but within/react-app/ is the react app, so that when the browser goes to http://localhost:3000/react-app the react application starts?
Like I said, I am new to react so I might have missed something obvious, so apologies for being really stupid, but please help.
Thanks,
A
When you are using react what you see on localhost is the react app you are working on in "dev-mode". If you want to add the app to a webserver you should deploy it to a directory named react-app
So I am new to React and I can currently create different functional components when I use npx create-react-app appname but if I want to "package" these files and send them to my Django's view page, what is the best way to do this? I am having some trouble with webpack configuring everything in the methods I've attempted. I am trying to create a web app. Thank you.
Basically to "deploy" Django + React app, you need to use webpack on your react project, then you store react webpacked scripts in your staticfiles directory in django. Then, you define a view that returns index.html with attached scripts {% static 'reactscripts.js' %}. Thats basically all if you want to combine theese two on simple project.
I hope thats the answer you're looking for.
[edit] Also if you would like to deploy your project (after you've figured everything out), this article may help you to do so
https://mattsegal.dev/django-spa-infrastructure.html
I am building an Single-Page-Application where the front end is using ReactJS, and React Router.
The application shall be hosted with conventional app server either Tomcat or Weblogic (just due to whatever reason as required by our client).
My question is straight forward: in React, how could I get the application context path which is equivalent to request.getContextPath() as in jsp? I did many searching in google, but none of it could just give me a straight to the point answer. Whether react having such equivalent function? Or if I could grab this path from JSP? If so, how to grab it?
Thanks.
I had this problem as well and solved it like this:
In reactjs, when you are building your app for production, you need to run "npm run build".
To build it correctly, you need to set the homepage property in package.json to the main url of your site.
In my case I am using http://localhost:3000 for local development, and http://localhost:8080/myapp for stage testing.
That app needs to know if there is a "myapp" in the url or not. This is basically the problem of this post.
My answer is, because you need to specify the homepage property in package.json anyway, I am using this value to find my context path.
I am doing this like this:
{packageJson.homepage.substring(packageJson.homepage.lastIndexOf("/"))+"/login"}
For my test environment this returns: /login
For my stage environment this returns: /myapp/login
Maybe this helps.
The particular use case I'm looking at is running a single page application at the root path / of a domain, and having a statically rendered blog at /blog.
I've already checked out the advice at https://www.gatsbyjs.org/docs/path-prefix/, however I'm not entirely sure how this would interact with the React app running at /
Is there a way to get React Router in the React app to support handing over to Gatsby?
Gatsby is just React so yes :-)
Build your SPA & blog both with Gatsby. Put the entry to your SPA at src/pages/index.js and it'll be served at /.
If you need client-only routes, you can set those up like this: https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#creating-client-only-routes
Gatsby is basically CRA with some additional features to make it easy to build websites.