localtransporter.space
https://admin.localhost.run/#/domains/ff0b7170-7b8f-4114-af0f-6aed5b74371a
ssh -R localtransporter.space:80:localhost:3000 plan@localhost.run ssh -R app1.yourdomain.com:80:localhost:8080 -R app2.yourdomain.com:80:localhost:8081 localhost.run // Assign the value "Hello!" to the variable "greeting" $greeting = "Hello!"; // Assign the value 8 to the variable "month" $month = 8; // Assign the value 2019 to the variable "year" $year = 2019;
https://tecadmin.net/kill-process-on-specific-port/
How to Kill a Process Running on Specific Port
Written by Rahul, Updated on November 15, 2019
The Linux operating system consider everything as file. So first of all, use lsof (List of Open Files) Linux command to identify the process id (PID) of running process on any port. The you can use kill command to kill that process using the PID.
Kill Process on Port
For example, you need to kill process running on port 3000.
sudo kill -9 $(sudo lsof -t -i:3000)
Explanation
First “sudo lsof -t -i:3000” will return the PID of the process running on port 3000.
lsof -t -i:3000 6279
The above result shows 7279 is the PID of the process on port 3000. Now you can use kill command to kill the process.
sudo kill -9 6279
https://localwp.com/help-docs/advanced/router-mode/
Stopping Whatever Is Listening On Port 80
If you want to use all of the features that Local offers, then running in the default “Site Domains” router mode is required. In most cases, this is seamless, but if you are unsure about what piece of software is already listening on port 80, it can be challenging to zero in on where the conflict is.
Mac
The quickest way to zero in on what is listening on port 80 is to open a terminal and issue this command, which will prompt you for your computer password.
sudo lsof -i:80; sudo lsof -tnP -i:80 | xargs -n 1 ps -p
If you’re curious about what this command is doing, it’s basically:
- Listing all the “open files” on port 80
- Listing more details about the process that’s running on port 80
With that additional info, you should be able to shut down that application gracefully, but if you need to kill that process forcefully, you can do so from within a terminal:
kill
Using the terminal, we can find what process is listening on port 80. In this screenshot, I was reminded that I had a development server running. Because this was a process that was owned by root, I had to use sudo kill in order to stop that process. Alternatively, I could have navigated to and stopped that process where ever it was created.
Key Permissions
$ sudo chmod 600 /path/to/my/key.pem
Keep in mind that if you keep all of your keys in the ~/.ssh directory (or any other directory, really), you may need to adjust the permissions for that directory as well. In that case, use this:
$ sudo chmod 755 ~/.ssh
And that’s all there is to it. Now you should be able to use your key with no problems.
copy your ssh key to your clipboard
pbcopy < ~/.ssh/id_rsa.pub ALSO: tr -d '\n' < ~/.ssh/id_ed25519.pub | pbcopy
linking to files in /src folder
Just use a / before the name, this will make it relative to the output root, which includes anything in the public folder (provided the finished hosted application is served at the root of a domain).
so for the question asked above:
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
background-image: url("/example.png");
}
the critical part being
/example.png
refers to a file, example.png, that is in the public folder (served at the root level)
Could also be relative:
one could also use
./example.png
provided that the css file was also imported from the public/build directory, this would be relative to the css file and not depend on being served at the domain root, but typically in CRA webpack will bundle the CSS and it may or may not be loaded from this location. (you could import it in the html file directly using rel tag with the %PUBLIC_URL%/Styles.css macro)
How do I include 3rd party libraries in react?
https://stackoverflow.com/questions/45658200/how-do-i-use-include-third-party-libraries-in-react
You have two options, both demonstrated by a contrived example where I fade out a unordered list using jQuery. There are pros and cons to both approaches, I highlight both, and then provide my choice.
Option 1: Include the third party library in your index.html file
index.html
App.jsx
import React, { Component } from "react";
class App extends Component {
componentDidMount() {
// ** following two lines of code do the same thing
// using the first version, however, could potentially cause errors
// see "Referencing unimported libraries when using create-react-app"
$(this.refs.list).fadeOut(); // version 1
window.$(this.refs.list).fadeOut(); // version 2
}
render() {
return (
<ul ref="list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
Referencing unimported libraries when using create-react-app
** If you are using create-react-app to scaffold your project, using the first version of code will throw errors. This is because create-react-app's default syntax linter (eslint) will throw errors during project compilation if you try to reference non-imported code (i.e. you never import $ from "jquery" since we reference the library in index.html). So when we referencing jQuery's global $ reference (which is very normal when using jQuery in the browser), we violate the basic principles of building modular JavaScript applications on Node.js. In Node, modules are the way of life and in those modules, we can only reference objects that we explicitly import. Without that explicit mention we technically break convention, hence the complaint from the linter.
Now both you and I know that the $ reference will become available once the application actually runs in the browser. When componentDidMount() is invoked, view has already mounted to the DOM and your third party library (in our example jQuery) is available to reference. Unfortunately the linter will block your react app from rendering because it thinks you are trying to reference undefined variables. Furthermore, the linter is platform agnostic and has no knowledge that your app is running in the browser (since JavaScript is no longer a browser-only language). This may be annoying but the linter is just doing its job, and, to some degree, it's absolutely right.
To avoid this error there are a few options:
- Have eslint (the provided linter) ignore the lines where you make reference the third party libraries using
// eslint-disable-next-line(not preferred) , or - Make use of
window(preferred), or - Turn off the linter (not preferred), or
- Don't use create-react-app (your preference, not recommend for beginners or even experts for that matter).
The first option can easily become a hassle if you make a lot of calls to the third party library. If you read up on componentDidMount, you know that at this point of invocation, you now have access to the window variable. You can access your library through window if the library attaches itself to the DOM's global window object. In our example, jQuery does just that and we can access jQuery's functionality via window.$
Option 2: Install the library using npm install <package-name> -S and import the library into relevant project files.
Terminal
npm i jquery -S
App.jsx
import React, { Component } from "react";
import $ from "jquery";
class App extends Component {
componentDidMount() {
$(this.refs.list).fadeOut();
}
render() {
return (
<ul ref="list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
What is the right approach?
There are pros and cons of each approach: with first one you have the possibility of using a library that is hosted on a CDN and bank on the network effects and don't need to import third party code into your codebase. With the latter, you can make your code more readable and avoid the linter from blowing up.
For cons, the first approach may require you to add window to your third party library calls if you're using a linter (and you probably should); in the latter's case, sometimes third party libraries don't have their project code available to install through npm and you must download them manually and manually add them to your project source folder. In that case, using the first approach might make sense so that you don't have to manually import new versions of the library when they're released.
If at the end of all of this, you have failing code:
- Ensure you installed the correct package,
- Ensure you have included it directly in your index file or imported it into your project and files where you are making library specific calls.
If you know of other ways of accomplishing third party library integrations into react or find an error in this post, please feel free to edit this answer or add another answer.
The examples in this answer assume the execution environment is a browser, hence the use of window. If you are building a shell script or using react-native, it would be global, etc.