I am following Ben Awad's wonderful tutorial to build a fullstack
app using Next.js, Express, Typescript, and GraphQL. Everything works smoothly locally, but I have run into a barrage of issues trying to deploy to Heroku. I would really like to deploy both server and client to Heroku as one app, and have Express serve the frontend files as well as be the backend.
monorepo
- web
- package.json
- server
- package.json
package.json
To my understanding, this is possible using Next's custom server option, which I have integrated in my server.js file. My problem is when deploying to Heroku, it doesn't detect React as a dependency for the backend so while the deploy succeeds, the app crashes when I try to access it in the browser. I have tried a few things to resolve this issue - having two copies of React in frontend and backend, respectively, only leads to more problems (understandably so). I have tried keeping one copy and using npm link to point to the module, but it only works locally. I've tried changing the webpack config as well but it doesn't seem to register. I tried defining the custom server as a util in the frontend and import it in server.js, but the import is always undefined, which makes sense so I moved it back.
I'm still new and have many misconceptions about how Next.js works, especially when coupled with a custom server, so I might be doing something fundamentally wrong. Is there anything I'm missing, or is it better to split the app into two Heroku apps and push one subtree into each?
The source code can be found here, but I will be probably rolling back because it has become very messy.
I know there are other ways to do this I just don't want to give up quite yet.
Related
From udemy React courses i could see Brad Traversy using create-react-app with node.js backend server and Andrei Neagoie using only create-react-app without node.js server to develop a full stack product.
I am seriously confused with when to use what?
Can any one explain me between these two scenarios? Please?
This is mostly related to how you want to structure your code. You can either :-
Set up your front-end and back-end code together. So, in your script tags in package.json, you will have something like 'nodemon server.js && react start' (refer package.json for exact syntax) to start both front-end and server with 'npm start'
Setting up front-end and back-end separately.
This is preferred for separation of concerns. In this case, you would start each separately.
Also, your front-end shouldn't be concerned about how your backend code has been written. It should only be dealing with backend using an API.
For ex: if in future, you wanted to change to Deno.js instead of node.js server, you would have make some modifications in package.json if you had front-end and back-end code written together in folder.
As far as deployment is concerned, in this case also, it will help if you kept the front-end and back-end code separately so you can deploy them separately.
React is used for frontend, while node.js is used for backend.
I think your confused because one is using react with node.js the other is using react alone.
Well React can be used for other backend other than node.js, like php for example.
This means you can create an app using react/php.
The reason Brad Traversy is using create-react-app with node.js because he wants to use node.js for his backend.
While Andrei Neagoie is using create-react-app without node.js because he either:
Don't want to use any backend.
He will add backend later on.
I'm a building a web application with Next.js/React.js + Node.js.
I would like to deploy my application not separately but into one server(e.g. Heroku).
How could I do this and make it work?
Using package npm i -D concurrently you can run your both projects on same server.
Use this link fo reference
https://dev.to/numtostr/running-react-and-node-js-in-one-shot-with-concurrently-2oac
Never used next, but I had a similar problem last night and tried like 5 different things to no avail.
Found this today and walked thru his demo and got a better understanding of what's going on and was able to restructure my project to get it to work. This post walks thru how to have Express serve your React project using heroku-postbuild.
Other things that tripped me up: I needed two package.json files (one for Express and one for React) and I didn't have my express app directory set to find index.html
https://daveceddia.com/deploy-react-express-app-heroku/
I am creating a simple customer chat app for my school project using Pusher according to their tutorial.
I want to deploy the app on Heroku so anyone can use this app and connect to it. This app has a client-side (Vue.js app) and a server-side (express) folder.
How can I make it work together by deploying it on Heroku or what have I do?
I have deployed the client-side on Heroku and the front-end works fine.
I also tried to deploy server-side, but it seems it does not communicate with each other.
The server works fine on the localhost, however, I need to make it work globally.
The code can be found in this repository.
Server side settings are in server.js.
I have only changed some front-end stuff, but nothing important yet, so the code is pretty the same.
This is my first Vue.js & server deploying and I was trying several tips and tutorials, but none of them solved this issue.
GitHub repo: https://github.com/byeung2019/MIQSTechnologies
Hey guys,
This is my first time deploying a website online, so I'm confused and anxious of where to even begin.
My frontend is built using ReactJS, and my backend uses NodeJS/Express/GraphQL to fetch data from an external API (CryptoCompare).
My website works locally.
My frontend and backend each has its own unique package.json and .env file with its respective dependencies and dev dependencies.
Through my research it's been recommended to host the frontend using Netlify, and the backend with Heroku.
However, since this is my first time deploying, I'm confused about the following:
How to deploy the frontend and backend separately from the same project folder, with them having their own respective package.json file.
Would I need to rewrite code in index.js within the backend folder in order to connect my frontend GraphQL requests to my backend.
Thank you so much!
First of all this is a complicated question to provide an exact answer, you will have to google and learn few things. But here is a high level idea.
After developing any app using react or angularjs you can follow the build instructions and build the app. It is ng build --prod in angular for example. Then you just need the build to deploy and it does not depend on package.json
You have to deploy your backend app as it is and there is few options then you can follow most common is,
Using a proxy like nginx
Host your build inside the node backend
Here is a guide how to host your apps using nginx for nodejs and angular
https://www.journaldev.com/27234/nginx-reverse-proxy-node-angular
Hope you will get the idea.
I come from the LAMP world. Greetings. 🖖
I'm trying to get started with the new Angular and Node.js. I already have Node and an Express server installed on my machine. Now I want to use Angular as I start building my app.
One thing I don't understand is why the Angular CLI is spinning up a server to "run the application" and why it seems we have to setup proxies and do other things to get it to work with Express.
When I think of Angular, I'm most familiar with AngularJS as part of my LAMP stack workflow. All I do here is serve it as a .js file and serve it from the same webserver that is serving everything else. Why is a client-side script getting its own server? How is it different from Express and how does it fit in with Angular Universal, which I would like to use to take advantage of SSR.
I'm not looking at how to get it all to work, I can copy and paste and read docs just fine, I'm trying to understand the fundamental concept here. The Angular docs don't explain why they are asking you to "serve the application". Is it just to test it? Why would I have two servers in development and one in production, shouldn't the dev site mirror the production site as best as possible?