I have deployed my backend express server to feed data to my React frontend app using Heroku. I used the following script to launch my frontend with heroku
"heroku-postbuild": "cd client && npm install && npm run build"
How can I do the same with MS Azure or Firebase? What type of server/hosting can handle this? I am brand new to full stack development so anything helps.
Similar question: How to connect and deploy React app with Node js backend?
file setup
scripts
Related
I have two separate applications one is the ionic app and other is node express api app. Is it possible to merge both in one application? Like for example when i enter npm run start it should run ionic serve and node index js both?
Typically after you finish developing your frontend you "build" it. This minifies and optimizes frontend files. For ionic: https://ionicframework.com/docs/cli/commands/build
This creates a folder(the default name can be "dist" or "build" etc). You put this folder in your backend folder, then serve it statically. For static serving check out https://expressjs.com/en/starter/static-files.html.
This way you deploy only backend, and it works. You can make api endpoint routes start with "/api" and "/" routes can be for frontend's static serving.
If you mean you want to do that for development purposes only, you can use concurrently command https://www.npmjs.com/package/concurrently
npm install -g concurrently
After installation, add this line to package.json script
"start": "concurrently \"command1 arg\" \"command2 arg\""
In command1: add ionic start command, like: ionic start
In command2: add node start command, like: nodemon server.js
I'm trying to put an angular application in "production" on a local server that is generated by the http-server tool, but it does not return the of the index.html.
I followed these steps ...
ng build --prod (this throws me the project folder for production like this -> "dist / project-erp")
http-server
web server
Update:
So, I changed the base route to "/" but still happening in same situation :/
After many tests of building the project, the solution to launch it on the Express server (it worked for now) is to just do the command "ng build" instead of "ng build --prod", then the folders "dist / project-erp "put them on the backend server.
I have an app using React Native as its frontend, and NodeJS as backend, and it also has a cloud MySQL instance. I want to deploy the app to the public and show it to someone as demo using Heroku or maybe other hosting services.
I want to publish my React Native App with Expo, but am not sure how/ where to host my nodeJS server so that the mobile app can access it.
Steps for deploying React native/expo app to heroku:
1: set heroku buildpack as static: >heroku buildpacks:set heroku-community/static
2: Add static.json for static buildtype: { "root": "web-build/", "routes": { "/**": "index.html" } } More settings here: https://github.com/heroku/heroku-buildpack-static#configuration
3: npm run build (package.json: "build": "expo build:web") --> Creates web-build folder
git add .
git commit
git push heroku master
heroku open
You can follow Heroku official document to deploy your NodeJS server.
https://devcenter.heroku.com/articles/deploying-nodejs
Then you can access the domain provided by Heroku just exactly like on your localhost.
I'm trying to deploy a node application with aws via Elastic Beanstalk. The deployment is showing as successful, but when opening the webpage I receive the error message Cannot GET /.
My general project structure looks like this:
client/
server.js
Where client/ is a react application built using create-react-app and server.js is where express app.listen is defined.
I connected the frontend to the backend in the development environment using "proxy": "http://localhost:5000" in the react app's package.json.
I also added "homepage": "my-aws-url.com/client" to the react package.json since it isn't stored at the root level of the project.
Do I need to do something with the proxy in production similar to what was done in the development environment, or are there other things I'm missing?
I have a asp.net core 2.2 react template based app
The react app under ClientApp has my own build script for react app which compiles stuff in a lib folder under ClientApp via 'npm run build' custom script.
More importantly, the app runs with a custom node/express based web server (npm run start in clientapp would launch a web server script which would listen on say port 6000)
I cannot use the standard react development server that comes with template.
The startup.cs file of asp.net core layer uses it via spa.UseProxyToSpaDevelopmentServer (http://localhost:6000)
app.UseSpa (spa =>
{
spa.Options.SourcePath = "ClientApp";
if (env.IsDevelopment ())
{
string reactDevServerUri = Configuration["ReactDevServerUri"];
spa.UseProxyToSpaDevelopmentServer(reactDevServerUri);
}
});
During debug session in vs 2017, on any change in typescript files in ClientApp\src folder, i need to
1.Invoke script 'build' in ClientApp\package.json to compile react app in ClientApp\lib folder
2. Restart my web server running via script 'start' to pick new changes in lib
3.Reload browser
Currently i have added a 'debug' script which uses nodemon to track changes in react app and restart server after build script
"debug": "nodemon -e ts,tsx --watch src --exec \"npm run build && npm run start\""
I still have to reload browser myself and it keeps failing until build/start are finished. I need a better way to do this in one go by proper configuration of encapsulating asp.net core project.
Please help me figure out a way :)