Hi there,
I having some problems with back-end of my project.
Bascily I'm using create-react-app as my boilerplate and trying to attach server on express with socket.io . I did some tutorials etc. But all of those servers based on build version of my app. I'm trying to find solution where I can code on react files and see result on my server same time, not rebuilding whole app each time I made any changes to it.
Here is git with project:
https://github.com/7sleepwalker/boilerplate_server
At the moment I have: server runing at localhost:3001 (based on build files of app)
production app runing at localhost:3000
Any ideas how to join both?
Related
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've been working on building a video conferencing application by following this tutorial.
It's a great tutorial, and everything worked awesome when developing. However, when pushing to production I had issues and I'm not well-versed enough with these tools to figure out what's wrong.
I changed my NODE_ENV=PROD in my .env file. Which should trigger the production express build located here. (tutorial github link)
Next, I ran npm run build as I wanted to build my bundle.js, etc in the dist/ directory. I copied the three files from dist/,
bundle.js
common.js
index.html
Into my web server's directory, but now when visiting /token route, I get a 404. This doesn't happen on DEV, so it has to be something with the way the express server.js is written.
Unfortunately, I'm having trouble deducing what the issue is.
Environment details - I'm using a hostgator account, and copying files into the cpanel file manager. I've hosted lot's of JS applications like this before, but usually if I'm using a back-end it's a django server, so this (express) is new for me.
It is because express server is not running in your production environment. As express is used to build web server listening on specific port. In your case you have deployed the static files but the server is not running.
Have a Node.Js API and a React app semi finished. Working on deploying to get the development cycle churning. Currently using npm start for viewing the react server during development. Same for the Node API. When deployed to AWS EC2 I am building in the most basic fashion, npm build pushing to a 'release' folder.
Once the deploy folder is up, I can go into it and run serve -s release
This gets me up and running. I can do the same for api server.
To get the apps running as a service, for the api, I can see how I can build a systemd process and run that with no issue.
For the react app, is there an easy way to run that server as a system... I'm new to this stack, so I might be confused. I have read in some places that once you've built your react app that you need to serve it out via apache or nginx? (e.g. in development it hosts itself, in production, you need to serve it) Is that sort of the general idea - build with local hosting, deploy with a production webhost?
Help appreciated. This is my last major issue before I can get Jenkins running a nice pipeline for deployment. Thanks!
Since you are already running a NodeJs server, It would be a good idea to host your ReactJs App in the NodeJs App itself.
You can pipline in the Jenkins to Build the ReactJs App first and the move it to static serving folder in the server and then you just need to deploy the NodeJs app in which ever environment that you want.
I am new to Angular2. I have stated learning through resources in Internet.
I am using Angular-Cli tools for building my test application.
When I issue command ng serve --open I got my example project running on a default port 4200 and console shows,
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
Now I am very confused with NG Live Development Server.
I have the following concerns,
Being a Client Side Framework why angular needs an development server.
Where Live Server is physically Located in running machine
The Live Server
can serve only Javascript or any other language.
What is the
complexity in integrating Angular2 application with Server side
frameworks like Spring-MVC.
Could anyone please provide your thoughts on this? Please correct me if I have understood the concepts wrongly.
Tl;Dr the cli live server is only for local development. Not for production or any environment other than local dev.
To answer your specific questions:
Being a Client Side Framework why angular needs an development server.
Angular is an SPA framework. The compiled application code needs to be loaded into the browser from a web server.
Where Live Server is physically Located in running machine
The server is part of Webpack, which is a dependency of Angular-CLI. So it is in your node_modules folder.
The Live Server can serve only Javascript or any other language.
The development server is only for running your Angular code on your local development machine. If you have a API backend, you should look at proxying requests through the dev server to your dev API.
What is the complexity in integrating Angular2 application with Server side frameworks like Spring-MVC.
This is trivial. You will not host your Angular application in production on the live dev server. Instead you will run ng build --prod --aot to build the production bundles into the project dist folder. These are the build artefacts that will be deployed to your frontend webserver. Configure the frontend to run at the root contest i.e. www.foo.com/ and the the Spring API to run at the /api context www.foo.com/api/.
You may want to take a look at this:
Node live server
This clearly explains what exactly is a live server and also how it works:
Quoted from the link:
The server is a simple node app that serves the working directory and
its subdirectories. It also watches the files for changes and when
that happens, it sends a message through a web socket connection to
the browser instructing it to reload. In order for the client side to
support this, the server injects a small piece of JavaScript code to
each requested html file. This script establishes the web socket
connection and listens to the reload requests. CSS files can be
refreshed without a full page reload by finding the referenced
stylesheets from the DOM and tricking the browser to fetch and parse
them again.
If you go through the entire post, you would get the answer to almost all your questions.