I have an IIS Server and a Next JS app which is mosty SSR. The problem is that I'm connected through a VPN and it was very easy to deploy a react-create-app, just moving the build folder and than all was working. Now it does not work the same and I do not find enough documentation for my problem.
If you want an easy way like react-create-app, you can use NextJS export function which doesn't have server side. Then you can just run next export and upload your next build folder to your server.
If you insist to have SSR on your NextJS app, then the way you upload your app might be more difficult than just a upload your build folder. Because your app now has a server side that you need to run in your IIS server.
The easiest way to run Next SSR app on your server is by copying the whole root folder of your app to the server and run the production mode.
Other than that is by using containerization, so you build your app's image and push to the repo, then your IIS server will get this image and run it in the container.
Related
I am working on a react isomorphic app in which my express server is running along with the client app now I want to deploy this app but didn't know the proper way to deploy this kind of app.
this boilerplate of my project client folder contains react app and server.js contain express server. normally we run the build command and deploy our project's build. but in this case, if I run the build command then I lose my server.
my react app is running on 3000 port while my server is running on 5000.
if anyone has the solution or gives a bit of advice.
I need to get data from google bigquery and it is not possible from the client-side so use this approach
My team is working on an NodeJS app with a ReactJS frontend that needs to be deployed on our Ubuntu server. It runs fine locally and it used to run fine on the server until we added a Router/Switch structure into the App.js. Now we get 404 and 502 errors and I'm thinking of adding some GitHub action to automate the deployment process with npm run build and all. Ideally, every time we push to GitHub, the app on the server should update without someone having to tunnel in and type something manually. Can anyone suggest a ready-made YAML file for that purpose? How would we trigger it on our Ubuntu server? Would we run it under nginx (like now) or apache?
I recently create Express and MongoDB API and after that, I connect that API to my React Application successfully and which is running well. But one situation occurring during deployment now I need to deploy both projects separately means I need two hosting plan for them. So, I want that both project running on the same host. Is it possible? and How?
A build of any React application creates (unless webpack-dev-server is used to compile it) the output which consists of static files: script bundles and .html file(s) that reference the bundles in <script> tag.
Those files can and should be copied to Express in production build. Then you have one server on one host. When React application runs inside a client (e.g. browser) it gets everything including .html files, script bundles, API responses from the single source: Express backend/server. Which by the way excludes any possibility of getting CORS issues so many people are asking about here on SO.
Example, e.g. a boilerplate project that demonstrates all that.
If you execute commands:
git clone https://github.com/winwiz1/crisp-react.git
cd crisp-react
yarn install && yarn start:prod
and then point your browser to localhost:3000, you will have React app running inside your browser and it got everything from one single Express backend.
crisp-react has two subdirectories: client with React client app and server with Express backend. The build command copies the build artifacts from one subdirectory to another. So you can even rename or delete the client subdirectory after a build, it won't affect the Express backend.
I am currently trying to deploy the default react web app to Azure and I am encountering an issue where though I deploy the contents of my build folder to the azure hosted /site/wwwroot folder I end up on the following page when going to my hosted address: https://[project_name].azurewebsites.net/
Landing Page :
I intend to deploy the default create-react-app react application so that I may have the process down for when I deploy my real site.
The process I have followed is pretty much exactly what is mentioned in this article https://medium.com/#to_pe/deploying-create-react-app-on-microsoft-azure-c0f6686a4321
Create the default React App with create-react-app
Run "npm run build" to get the build folder
Go into the Azure React Portal and create a new Web App ***
FTP / Git deploy the contents of the local build folder into the Azure website's /site/wwwroot/ folder
For overkill I added the below web.config file to handle future routes, but have also tried without this step
In the end my Azure site's contents look like this
Folder contents :
At this point when I try to access the Azure site I get the "Hey, Node developers!" page which implies my code is not deployed. Any thoughts as to why this might be the case?
*** I have a hunch that during the configuring of the Azure Web Api something is not set up correctly perhaps because I select Node 10.14 as my Runtime stack simply because that is the version of Node that I have installed and am using with my local React app.
Thank you folks for your time.
Another approach is to configure Azure Linux Web App Service to run a startup command to serve your React app in "Settings > General settings > Startup Command":
pm2 serve /home/site/wwwroot/ --no-daemon
Remember to change the path to your build path (The path to your index.html file).
If you use react-router and wants to make any direct access on custom routes be handled by index.html you need to add --spa option on the same command.
pm2 serve /home/site/wwwroot/ --no-daemon --spa
Using --spa option pm2 will automatically redirect all queries to the index.html and then react router will do its magic.
You can find more information about it in pm2 documentation: https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/#serving-spa-redirect-all-to-indexhtml
I've coped with the same problem recently: React router direct links not working on Azure Web App Linux
You have created a Linux App Service - your web.config won't work because there is no IIS.
If you don't select node as the runtime stack, your app will work for the most part because it serves the files like a static web host. However I would suggest to keep the runtime stack as node and add the following file to your deployment in the wwwroot folder:
ecosystem.config.js
module.exports = {
apps: [
{
script: "npx serve -s"
}
]
};
https://burkeknowswords.com/this-is-how-to-easily-deploy-a-static-site-to-azure-96c77f0301ff
There's an extremely simple way to overcome this problem, and although it is not perfect, it works both on AWS, Microsoft Azure, and probably any other hosting:
Just point the error document to: index.html
I found it out here:
https://stackoverflow.com/a/52343542/3231884
Disclaimer: This solution is not perfect and impacts SEO. Google doesn't rank well sites that throw 404s.
I'm trying to build a react app starter that suits my needs. I've read, downloaded, tested countless react boilerplate to try to understand how to add SSR but I'm kind of stuck right now.
The github repo is here
So far I've got React running with hot reload. Webpack 4 bundles the client code. I use a proxy with webpack-dev-server (WDS) to serve my backend express api as well as my client for development.
WDS hot reload change when I update app client code. The express server doesn't restart that way.
I use nodemon to watch the change of the server so that only the backend restarts when I'm coding api features.
For production I simply build the server and client to the dist folder and serve the application with node.
Later I plan to add React router, redux, etc but this is the easy part.
So what I'd like to add now is server side rendering (SSR) for the production mode as I don't need it for development.
Any idea on how I could implement that ?
Thank you
I'll post a further analysis.
Right now I start a webpack-dev-server that allows me to serve and hot reload the client app on localhost:3000
I also launch an express server on localhost:8080 and connect it to the client using the proxy attribute of the devServer
If I modify code on the client app only the hot reload is triggered
If I modify code on the express api only the server api is restarted
From what I understand of SSR and hot reload being put together is that webpack now needs to be compiled in the express server and I add a dev server and a hot reload middleware.
But if I do that each time I modify code of the api nodemon will restart the server and then webpack will compile the client code but I don't need that since I only modified the api.
What I think I need to do is leave things as they are for the development part (because I don't need SSR for dev) but add a production code that will be executed only if NODE_ENV=production, add a template dedicated to serve the html for production with all the renderToString logic
How's that sound ?
Check out Paragons. It has Webpack 4, router, redux, and more all working with SSR. Plus it has both development and production modes.