Original port for my Storybook installation was port 8080 and 6006 see documentation enter link description here, and figured to change the JSON file to point to port 80
This is the package.json file part of my Storybook installation:
Now I've assigned a domain name since port 80 is hosted under the public ip, the problem is after a while that port closes and we can't see the Storybook because the port is closed again. How do I configure so that the port stays open? I'm using Jelastic as a web hosting environment: https://jelastic.com/
My current configuration is as followed:
Running a VPS with Ubuntu 18.04 installed
Other dependencies:
NPM
Yarn
NodeJS
Create React App : https://reactjs.org/docs/create-a-new-react-app.html
StoryBook for React : https://storybook.js.org/docs/react/get-started/introduction
Chromatic : https://www.chromatic.com/
Storybook's webserver is not meant to be exposed to the internet, it's only for local development. You can create a static build of your Storybook using yarn build-storybook and upload that to any hosting provider. However, since you're using Chromatic, you don't have to, because it gives you free hosting out of the box. See https://www.chromatic.com/docs/document#direct-access-to-your-storybook for details.
Related
I am trying to get my nuxt app working on the production servers. For the local machine, the generated docker image runs well and it can access the nodejs app that runs on localhost. The axios 'baseurl: http://127.0.0.1:6008/' seems working fine, the docker image can access this. On the production servers, i have used docker to setup the nuxt app, the same way i tested on my local machine. Yet the docker nuxt app cannot reach the nodejs app on the host server. I can see this must be some kind of network setting issue.
In vuejs app, i usually setup a proxypass in the apache web conf, to convert the input backend query to match and replace them with localhost address.
ProxyPass /app/query http://localhost:6008/query
The nuxt.config file, axios setting looks lik this:
axios: {
baseURL:'http://127.0.0.1:6008/',
browserBaseURL: ''
},
Does docker needs additional settings or should i configure my apache for this communication between my docker container and a node app that running on host apache pm2 ?
localhost or 127.0.0.1 from within the docker will not resolve to the server's localhost. Instead you need to specify the name of the nodejs service (if you are using docker-compose) or the nodejs docker container name (if you are just using docker run).
You can also try by giving the IP of the server where the docker is running instead of 127.0.0.1
I deployed a REACT application on an AWS EC2 running Ubuntu by cloning my github repository and installing node and npm. I tried running the application after installing all of the dependencies and it finally says:
Project is running at http://localhost:3001/
How do I make the running project show up on the http(80) port of the EC2?
Inbound ports open: 80, 443 and 22.
Please install nginx on your EC2 instance which will serve your frontend.
Follow the below blog for steps
https://dev.to/xarala221/the-easiest-way-to-deploy-a-react-web-application-2l8a
Thanks
I'm trying to understand what needs to be done to put my react app online.
Until now, I launched it on my mac using npm start, and accessing localhost:3000 or http://127.0.0.1:3000.
So I currently have bought a small server, installed everything (last version of node and npm, git and other necessary things), cloned my repo, and installed all dependencies.
When I do npm start on the server, it says it's available on port 3000. But when I go in my server's ip with the following :3000, it times out.
I don't really understand what need to be done to do this, I found some things about configuring apache on the server, others about using pm2 so have a node script running even after leaving the terminal, but that would be my next step I guess.. And other about configuring things with express (but do I need node+ express here ? As it's a simple front end react page ?).
if you are using webpack devserver, use it for development only
The tools in this guide are only meant for development, please avoid using them in production!
back to your question, there is a difference between binding to 127.0.0.1 or binding to 0.0.0.0
try changing the devserver to listen to 0.0.0.0
webpack.config.js
module.exports = {
//...
devServer: {
host: '0.0.0.0'
}
};
Usage via the CLI
webpack-dev-server --host 0.0.0.0
also note, that you will need to allow ingress rules (incoming connections). that is, allow a request from the internet to reach your server
There are a lot of configurations you will have to do when you deploy your application on a server. Building the app, Nginx, pm2 and even ssl certification. This video is 20min and has all you need. https://www.youtube.com/watch?v=oykl1Ih9pMg&t=1s
I've both NodeJS and AngularJS applications. I'm using npm install to download the app's dependencies for both the application. The NodeJS application runs on port 4000 and AngularJS application runs on port 4200. I can access APIs from NodeJS application in the browser and cannot access the application's UI(AngularJS) in the browser. I have deployed these applications on Azure Virtual Machine.
I have opened the ports 4000 and 4200 in the network settings of Azure VM. I'm using npm start command to start both the applications. NodeJS working fine as like in the local machine but not the same case with AngularJS. There is no errors or warnings from AngularJS side. It shows that the app is listening on http://localhost:4200/ and it is not accessible.
In this case, you need to run ng serve --host 0.0.0.0 to allow that your AngularJS application is listening on 0.0.0.0 for outside connecting. You could refer to this How to allow access outside localhost
Try using:
ng serve --open --host 0.0.0.0 --disable-host-check
I have built a simple web app using angular-cli 2,it works well in the local machine. now i tried to deploy it onto a digitalocean server,
however when going to the web server link with http://ip address:4200, i can't visit the web app.
Note: I can make sure the firewall is open to the web application on that port since in ufw status shows 4200 ALLOW Anywhere
You need to serve the actual ip address of the server, by default ng serve will use the loopback address. You can achieve this with:
ng serve --host 0.0.0.0