VSC Remote Server Works with Vite projects? - vite

I can't get a Vite Project up and running on the VSCode remote, node based repositories run perfectly. The servers start but the url for the tunnel doesn't. I am using my computer as server in which vite is installed. Is there any other config needed? Browser Screenshot accesing the tunnel's URL
Thanks

Related

Create open 80 port for Storybook for React

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.

How does a react app can be set up on server

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

Local Angular server and Local node server not working for external devices

I'm developing my MEAN application fully locally (Angular frontend and Node Backend). To test this I'm using my mobile with angular command ng serve --host command. When I run my application data from the local node server not loading to mobile but it works with the Laptop browser.
You would need to do following steps:
(1) Ensure that your local machine and mobile phone are on same WiFi network.
(2) Get your local machine IP Address. It will be something like e.g. 184.192.108.xx
(3) Run angular application with command ng serve --host 184.192.108.xx
You can specify the --port and --live-reload options.
https://angular.io/cli/serve
Thanks!

How can I run Laravel mix on custom URL?

I am creating one application that needs to be made on staging server from one point. Because creating it on local is impossible as it has some endpoints that other servers in network has to access.
I have created an application in Vue.js and Laravel. In local, I used to run npm run hot so that I don't have to re-compile when I change some code. But as I have to continue developing this application on a live server, I want to run npm run hot on a custom domain like staging.something.com instead of localhost:8080.
I don't have any issue if somehow localhost:8080 co-operates but when I run npm run hot on a live server, Here is the error I get when I try to access the web application.
GET http://localhost:8080//js/app.js net::ERR_CONNECTION_REFUSED
I think it should show IP address of my server instead of localhost. I don't know what's wrong with this but it's not working.
Laravel mix uses the webpack-dev-server package for the run hot command.
webpack-dev-server has a switch --useLocalIp which will make it use the servers local IP address.
It also has a --host switch which can be used to set the IP address manually --host 0.0.0.0

Difficulties connecting to socket.io server with Ionic

An overview of my setup:
A socket.io/node server is being hosted/ran on a computer in my local network.
An Ionic app is attempting to connect to the socket.io/node server to send/receive messages.
If I run the app in the browser with 'ionic serve', I am able to connect to the socket.io/node server successfully.
If I run the app in the emulator or on my device, I am only able to connect to the socket.io/node server if I add the -l (livereload) flag (ionic run android -l).
Originally, I hosted the node server on a heroku instance. I had no troubles connecting with this setup from browser, phone, or emulator. I had to switch to running the node server on a local computer so I have access to a local database.
Any ideas what is going on?
I fixed it by adding 'http://' to the beginning of the connection string.
Not sure why Ionic's livereload enabled me to connect without the 'http'

Resources