ReactJS app on SSL - reactjs

I'm very new to ReactJS and am trying to test deploying to a web server.
It's just one component that says hello, to make sure everything is working.
It works fine on local host, but when I upload to my webserver, which is configured for SSL, it does not work.
Works: http://careigniter.com/x/test/
Does Not work: https://careigniter.com/x/test/
Is there something special you have to do if you are going to serve the entire app under SSL?

Thanks!
The issue is that server has wordpress and some caching, that is probably what is going on. I should have just started on a fresh server to begin with.

Related

How to check a VPS configuration (Nest and React)?

I need to update the web app of a client of mine. That webapp uses Nest as a backend (along with Prisma and SQLite) and React as a frontend. Everything seems to run off of a VPS running Ubuntu.
I have a couple of questions since i've never used a VPS before :
How do I check the configuration of the VPS so that I can update the front-end and/or the backend without crashing the whole system and losing all the DB data ?
Is it necessarily using nginx ?
Thank you in advance

How to deploy a simple json-server?

I completed an online React course and deployed my application to Heroku. During development, I used the 'json-server' module found at https://github.com/typicode/json-server. This served up a folder on my computer which contained a simple json file and a few images for my website while conforming with the REST API. What do I need to do to get the server to operate independently of my machine so that my application can fetch the data ? I have zero experience doing this.
if you mean you want to create a server for your site,
first of all, you need to get a server, which can run nodejs , then you need to deploy and run your JSON server via a nodejs(express) app.
then you can connect to your server via your website/app
in order to do these things, you can follow tutorials
there are lots of tutorials about it.
hope you got the idea.

VueJS PWA says Network Error in my small PWA. Even I can't login

In my PWA everything is working except POST HTTP calls. I have a login on my first screen. It says Network Error. But it works fine Desktop/Laptop web browser. Only found the problem on mobile app [Android]
Note
I used Vue CLI for creating project.
I also tried with React. Happened the same. I don't know what's wrong with me.
You most likely try to connect to localhost. When deploying to a different device localhost is the actual device you are deploying and most likely you are not running a web server there.
You need to find your local machine's ip and use that as base url for HTTP calls.

How to deploy React App on production with Server Side Rendering

I have created my application using create-react-app. It is working fine with SSR. Everything is in place but I don't know how to deploy it?
What I ideally want is :
Generate a build folder and will upload in cdn. Want to serve my static assets from there. I want to create a distribution from my code and take that to another machine to deploy. I am not able to figure out how to do highlighted part. How can I create bundle for server? npm run build creates my bundle for client.
PS: I am using React libraries like React Router 4, Redux.. in my application. Hope this does not affect my answer.
For SSR , I have used express.
Server side rendering means you need a server (which is express) that will serve all the requests: server-rendered pages, including the static assets. So CDN is not enough.
You might want to try following free cloud services that support Node server:
https://zeit.co/now
https://www.heroku.com/
https://firebase.google.com/docs/functions/
You can create server bundle using Webpack, with target: "node" and use https://www.npmjs.com/package/webpack-node-extenals.
The details can be complicated, so you can just visit https://github.com/antonybudianto/react-ssr-starter/blob/master/config/webpack.server.config.babel.js for the reference.
I tried whit Firebase, but I can't, In the function's documentation says that execute the function can't be more than 60s, and my function takes more.
When I deployed other basic functions, it deploys without problems.
And If you achieve deploy it, give you a status 403, because you have to put the function in public mode.
If you want to deploy an app whit SSR make it whit Express, like in my case, you can deploy it like an API.
You can deploy it too whit Doker using AWS or Google cloud.
Heroku is the easiest way to do it, but I don't want to have all my apps here.

Debug AngularJS and NodeJS in Webstorm At Once (Without CORS)

I have a client/server app running on NodeJS with an AngularJS frontend. I want to use the built in debugging features of Webstorm, but it just won't work.
Imagine following scenario:
I have a webstorm project with a client folder and a server folder. I can start the debuggers for the client and the server, and it works. But both sessions are on different ports. So an AJAX request to the server inside the client doesn't work without using CORS and telling AngularJS to use a different server address.
In the production version the client will be published under the server, but for developing there is no need to do this.
Does anyone know how achieve this? Something like: The system should behave like one server, under one URL.
Or is my approach stupid?
Best regards,
Kersten

Resources