React/Nodejs/Express - Routes not working on Azure Web App - javascript

this is my first time making a nodejs app, and using express. I created the project using create-react-app. I am trying to setup a CI/CD pipeline using VSTS to deploy to my Azure Web App. I am able to get my React code working on the web app, but when I try to hit my Express route, it throws a 404, and renders the index.html file instead of retrieving the data.
Here is my file structure: File Structure
My Package.json: Package.json
My Express server: server.js
Also, here is my build VSTS:
Archive
drop
And here is my Release:
Release
And this is what is put onto the server: Azure files
When I run this locally, hitting localhost/api/getData returns my data as expected. But for some reason it does not work in production.
Any help would be greatly appreciated! I've been stuck on this for the last 2 days and I can't seem to find anything that has helped. I've read multiple forums, but none of the fixes they provide seem to be working. Thank you!

Related

Ive deployed my React app on IIS, it works fine but returns a 404 error when i refresh on other pages besides root

Ive read around and everyone is saying that you need a web config together with the build files. Does anyone have resources on how i can write the config.

Nuxt.js: How to debug server side after nuxt build (logging some information)

I am using nuxt.js for my frontend app. I currently have a problem with asyncData especially the first time it is run (which is on the server).
When building my app ($ nuxt build and serving it via $ serve), I currently have no real possibility to console.log some information out from the code that is run on the server. How can I debug that part, before code is run on my client?
Would this be a way:
https://codeburst.io/debugging-nuxt-js-with-visual-studio-code-724920140b8f
So I would launch nuxt manually with node.js and try to inspect something there?
Or is there a better way?
The nuxt build properties (https://github.com/webpack-contrib/webpack-bundle-analyzer#options-for-plugin) are just for analyzing the build right? Like package sizes etc, and not for actual code that is run on the server?
I hope I could make clear what I am looking for, if not I am happy to answer further questions.
Any hints are very welcome. Thank you in advance.
cheers

Run ReactJS application which using webpack and babel without server and by opening HTML file

I couldn't find the proper answer for my problem so if there is any same question please let me know.
I'm new in ReactJs and I was wondering if anyone could help me.
I have the react project which is using Webpack to bundle components. It works fine with npm start on port 3000 but I need to run it without the server and I want to see it by opening the HTML file. The App just calls APIs in its components so it doesn't need the server.
I have the same project and it works well but because it uses Webpack as well it's hard to find out what is missing in my project.
I would be grateful if anyone could help me!
Thanks
To generate an html file you can run npm run build that will generate all your static files in the build directory including a static html.
However i think you would still need a server to make async calls.

Create-React-App on Github-pages returns a blank page

When testing locally my create-react-quiz app works perfectly. I was basing my project off of this code: https://github.com/mitchgavan/react-multi-choice-quiz/tree/gh-pages.
However, when I use npm build deploy on my "GitHub-Pages" branch, a blank page shows up and these errors show up in the console:
pk8189.github.io/:1 GET pk8189.github.io/pk8189/futureU-/static/css/main.1dc4d41f.css
pk8189.github.io/:1 GET pk8189.github.io/pk8189/futureU-/static/js/main.28e294a0.js
This is my repo: https://github.com/pk8189/futureU-
What do you think the issue is? Thank you for any help.
Create React App uses homepage field in your package.json to determine the URL at which the app is served. Since you set it to https://github.com/pk8189/futureU-/, it tries to request assets from /pk8189/futureU-/ which doesn't exist.
Change homepage to match your deployed URL: https://pk8189.github.io/futureU-/. Then rebuild by running npm run build and re-deploy.
This is described in deployment instructions for GitHub Pages. Please read this part of the User Guide.

angular-php api not found after minification

I scaffolded a basic angular-php yeoman app to try it out.
angular-php
When I run grunt serve it works as expected and pulls some data using rest using $http.get('/api/features')....
When I minifiy the project it creates a dist folder which I assumed could be dropped onto a webserver so I dropped it onto XAMPP and browsed to localhost:8000/dist.
The site loads ok but it cannot find the api
localhost:8000/api/features not found
when I browse to localhost:8000/dist/api/features it returns the json so the api is functioning, so I changed the get url to $http.get('dist/api/features') only this time it says
localhost:8000/dist/dist/api/features not found
What am I missing?
Oops. Seems I forgot a /.
Should have been /dist/api/features

Categories