I have created sample angular application to test GitHubPages deployment..
Backend has a node js code which is connected to MongoDB Atlas.
Frontend has angular which is working fine when starting backend and frontend both.
When I build project, it has fully angular component only.. So I moved to backend into frontend folder and which is now
still when I build and I need to copy paste the database component and dist in one single folder.
If I do that npm install and node index.js it is working fine..
The same i am trying to do in GitHubPages using Actions. until dist folder is fine.. How to move database backend files in to ghPages to up the service. without db files i except html page but showing 404. How to copy db files from master to ghpages branch.
My repository is given https://github.com/changan1111/UserManagement
Any help would be really appreciated.
Github pages can only serve static files (HTML,CSS, js, images, etc.)
It might serve your bundled Angular application, but your API calls will need to be done to a hosted backend.
You can check Google Cloud, AWS, Heroku, Azure for hosting the backend.
Be sure to set CORS properly.
Related
I deployed my node.js app on Evennode using the git command line. On the logs i saw that app was deployed successfully because "db connection successful" is showing on the logs and there are no errors. However, when i try to visit the url it doesn't show any page. I copied the build folder from react to the backend directory so that the node app can read the react build folder from there and render client side. But it seems the app is not able to read the build folder which works fine on heroku but on even node, its not displaying my client side.
I have no idea why it couldn't read my client side build folder so i came to ask to find solutions
it was my first time implementing data upload (jpeg files) on nodeserver.
let say i use this RESTapi to store uploaded data.
http://localhost:3000/uploads/
when i was serving my app in localhost (with ng serve command), it works fine. but i got confused while i try to build the project. i mean i store the files on nodejs directory but my angular only read files on it's dist folder.
i just realizing that both nodejs app and angular app has different directory.
my question is, is it right syntax to do this all? should i made http call to read the desired files or should i change upload path to go to my angular assets path?
I have a question and got confused with the articles I found on the internet.
I have a react App which deploys on the development server. I want to create an admin part, where the administrator will be able to push content into the database. React App will get content from a Database and render it.
Also after the development, I want to upload this on hosting so users from the internet can have access to it and use it. I understand how the server works with post\get requests from glitch projects.
Writing on React.Js, server with express.js
So can someone explain to me the following:
how the server sends React app? Should I send simple index.html with #root div and the whole website will work?
I am a bit confused about how hand-made server and API are different from hostings? How to connect then backend with a hosting?
IN VSCode is it possible to make a react App showing from the server of Node.js? - On glitch I can
sendfile index.html with simple request and I see the landing page.
So theoretically I should have a possibility to send static file through a server of Node.js/Express.js?
Can you explain these questions to me, please or provide some resources where it explained? Currently I'm watching Youtube and Google but how to connect it with my project I do not get a clear idea.
Pretty much. If you use create-react-app to build your React frontend, the build result folder will contain all the static files required (HTML, CSS, JS, images, fonts...). You can then either have your Express app serve it as static data.
"Hosting" is a nebulous term... No, you can't upload a Express/Node.js app to some PHP web hotel and expect it to work. You'll need an application-hosting centered provider/PaaS such as Heroku.
When developing a react + backend app locally, you'd have your backend server running, and the frontend dev server up to serve your frontend and configured to proxy all API requests to the backend server (like this, via the Create-React-App docs).
This is my first time building a MEAN stack application and I built it locally. Now I am trying to host it on heroku and I think I messed it up. I went through different questions here and most of them said both angular and express needs to be in one single app. I din't know that, So here's my current folder structure.
Project Root Folder
|
|
|------ Frontend (Angular App)
|
|
|------- Backend (Express App)
I tried searching everywhere but couldn't figure out what changes I need to make to my current project structure. Any tips or help or even a link to a guide would be much appreciated.
For hosting as a single app
first build the angular app
host the build folder of front end in the backend express app as
app.use('*', express.static('Frontend/build/'))
in start script of backend build the angular app and start the server file(index.js)
inside the server file use port from the environment variables, heroku will automatically assign you with an port which will be pointed to the dynamos url
you acn also follow this article
I have a Node server and a React app compiled into its 'public' folder. My host is Heroku (a must for me).
My problem is that whenever I compile a new change on the React app I need to re-deploy the server.
Is there any way in Heroku to store the front end outside the server so that when I push a new code to the front end the server doesn't re-deploy?
Probably a bucket of some sort, or a server router that redirect calls depending on URL? Or any other solution?
Thanks!
Edit: I found an answer. It's called 'Bucketeer' in Heroku. It's the same S3 bucket from AWS. However, this is mainly for storing bulks of data, and it might not be fast enough to serving static app. So if you have any better idea I would appreciate sharing it.