I have a development server on HTTPS using a self signed certificate for locahost. App is build using create-react-app and I am starting up the dev server set HTTPS=true&&react-scripts start. Source maps are not loaded in Chrome's developer tools.
When using HTTP source maps shows up correctly. react-scripts version is 2.1.8.
Related
We have a React app that's embedded and served in .NET CMS project.
App is bootstrapped with Create React App and webpack config tweaked with craco.
Webpack dev server is running at default location http://localhost:3000 and CMS is running at https://localhost:5000
When I open https://localhost:5000, I correctly see React app. However, console is full of errors
WebSocket connection to 'wss://localhost:3000/ws' failed:
Is there a way to configure it to work with hot reload from external server?
I have tried setting dev server to https and adjusting webSocketURL, but did the error persists.
I start my React app using:
npm start
This starts the app on localhost:3000
I would like to have it start with a domain instead of localhost. When testing locally, I have a local domain (example mydomain.com) set to IP address 127.0.0.1. This allows me to use the actual domain in code when making requests to the backend. Without this, my code would need to support both localhost and my domain and swap them out in production.
npm start is only a command to run your react app in development mode.. for faster build and publish functionalities..
So for production, you will be using npm build to get a production build for the same. This won;t be automatically deplyed or hosted on your localhost:3000.
So production deployment you will have to host your compiled build files using IIS or some hosting application. There you can configure your preferred DNS, whcihever domain name you would want to use.
You can customise the url for deployment for development.
In your .env.development add this line
HOST='mydomain.com'
If you want to deploy at https, add this line also in same file
HTTPS=true
I have deployed a react application using this tutorial on Medium:
https://medium.com/#timmykko/deploying-create-react-app-with-nginx-and-ubuntu-e6fe83c5e9e7
I am using an Ubuntu server from Digital Ocean.
It worked perfect for deploying the web app by doing "git pull" in the /var/www-folder.
However, I am not able to change the app running on the server. When I change the repo locally, git push locally and pull on the remote server, everything seems to be working fine. With "git log" I can see that the changes to the repo are actually registered. However, after running
sudo service nginx restart
The changes are not visible on the server when I go the the corresponding IP-adress..
I even tried building the project after pulling on the server.
What could the solution to this be?
Thanks:)
I've created an Angular 1.6.x application using Visual Studio Code, with bower'ed dependencies. The Angular app talks to a separate ASP.NET MVC REST/API application for data (eventually with adal-angular).
Locally, I'm using http-server to run the Angular app successfully using npm start:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "start http://localhost:8080/app/index.html && http-server -a localhost -p 8080"
},
While I've been able to successfully get the Angular source code to my defined App Services on the Azure (verified using the Web App's console option) using the Continuous Delivery mechanism, it's not entirely obvious how the application will start, specifically:
How does Azure know how to do a "npm start"? Where do I instruct this to happen, if it's not automatic?
How would I instruct my application to use process.env.PORT, instead of port 8080?
Assuming I get past this initial issue, are there guidelines for http-server usage on Azure? Or are there other recommended ways to serve Angular SPAs?
FWIW, I note that the trying to run 'npm start' from the Azure console results in an 'ELIFECYCLE' error.
As you deploy your app to Azure WebApp, Azure will use IIS to host your app and only ports 80 and 443 are public-facing. So you don't need any other HTTP server to server your web application on Azure.
You can clarify what issue you ran into when you visited your website, so we can help to figure out what's wrong there.
The Azure Web App model hosts node.js/Angular apps within IIS, therefore a configured web.config file is required. The magic glue between IIS and node is the iisnode module: https://github.com/tjanczuk/iisnode that allows hosting of node.js applications within IIS.
The web.config file can direct IIS to start the app's app.js (or server.js) file, which would include a reference to process.env.PORT.
A good overall guide for deploying node apps is: https://blogs.msdn.microsoft.com/laurelle/2015/12/01/how-to-deploy-a-node-js-site-into-azure-web-app-to-create-a-website/.
The best guideline and documentation I could find on setting up a web.config is here: https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
Hello i'm trying to develop a restful api using nodejs and express, and i also want to create a client-side application using angularjs. As explained in AngularJS oficial website:
"The angular-phonecat project is configured with a simple static web server for hosting the application during development. Start the web server by running:
npm start
This will create a local webserver that is listening to port 8000 on your local machine. You can now browse to the application at:
http://localhost:8000/app/index.html"
So i should run client side app in node web server. but my restful api also run in my node web server. How should i set up node js to be able to run both instances of nodejs at the same time and be able to conect to my restful api from my angularjs application
If your app is structured like angular-phonecat, open your package.json file and find where the npm start command is configured (hint: "scripts" > "start") and change the port that http-server is using.
i.e. "http-server -a 0.0.0.0 -p new_port_number"