网页端使用react
In the past year, I worked on three teams to build mobile apps in React-Native. Whenever I start up the development environment, the process looks little like something like this.
在过去的一年中，我曾与三个团队合作，在React-Native中构建移动应用程序。 每当我启动开发环境时，该过程看起来都不像这样。
Run backend server and listen on port 8000 运行后端服务器并在端口8000上侦听 Launch Ngrok to expose port 8000 启动Ngrok以暴露端口8000 Copy the Ngrok-generated URL 复制Ngrok生成的URL Go to env/development.json and paste the copied URL into API_URL 转到env / development.json并将复制的URL粘贴到API_URL中 Start React Native 启动React NativeDoing this every time I needed to start up an app was just plain tedious, and since I was splitting time and resources between 3 different mobile apps it became extremely frustrating.
每次我需要启动一个应用程序时，这样做都是很乏味的，而且由于我将时间和资源分配在3个不同的移动应用程序之间，因此变得非常沮丧。
Don’t get me wrong, Ngrok is a powerful tool not just for development but business, too. It exposes the process running on your local network to the world. That means you can send clients a first-look of your API, or even builds of your web applications. Hell, I even used it to expose my private Minecraft server when I was hosting it for friends. However, it just wasn’t the right tool for this job mainly because it was command-line based and very difficult to utilize in writing an automation script with something like JavaScript or Python.
别误会，Ngrok不仅是开发的强大工具，还是业务的强大工具。 它将在本地网络上运行的过程向全世界公开。 这意味着您可以向客户端发送您的API的初稿，甚至可以向您的Web应用程序构建。 地狱，当我为朋友托管时，我什至用它来暴露我的私人Minecraft服务器。 但是，它并不是适合此工作的主要工具，主要是因为它基于命令行，并且很难用JavaScript或Python之类的代码编写自动化脚本。
After some scouring of the web, I found this hidden gem, Localtunnel. It basically does the same thing as Ngrok but better since I was able to use it via JavaScript. This opened a lot of doors. Let’s take a look at the code example below.
经过一番网上搜索后，我发现了这个隐藏的宝石Localtunnel。 它基本上和Ngrok做同样的事情，但是更好，因为我可以通过JavaScript使用它。 这打开了很多门。 让我们看一下下面的代码示例。
No need to use Regex to parse out the text logs of Ngrok after all, and also, it’s initial execution process is synchronous, allowing us to control anything happening in between. Ok, now let’s add the rest of the code in order to utilize our newly obtained public URL.
毕竟，无需使用Regex来解析Ngrok的文本日志，而且它的初始执行过程是同步的，从而使我们可以控制之间的任何事情。 好的，现在让我们添加其余代码，以利用我们新获得的公共URL。
The spawnNativeProcess function executes the yarn start script which in turn should start up your React Native process if you have the default configurations for your package.json (if you don’t have yarn, you can replace “yarn” with “npm”). The option stdio should be inherit so that not only will your React Native debug logs be outputted, but so that you can still interact with its terminal interface.
spawnNativeProcess函数执行yarn start脚本，如果您具有package.json的默认配置，则该脚本将反过来启动您的React Native进程(如果您没有yarn，则可以将“ yarn”替换为“ npm”)。 选项stdio应该是继承的，这样不仅会输出您的React Native调试日志，而且您仍然可以与其终端界面进行交互。
Finally the last edits we will need to make to complete the streamlined process is to add an additional script to the package.json file.
最后，我们需要完成的最后一个编辑是在package.json文件中添加一个附加脚本，以简化流程。
Your start script will depend on what device you will be using. Now give it a go with this simple command.
您的启动脚本将取决于您要使用的设备。 现在，通过这个简单的命令尝试一下。
yarn start:devWhat originally was a 5-step start-up process has now been shortened to 2.
最初的5个步骤的启动过程现在缩短为2个。
Run backend server and listen on port 8000 运行后端服务器并在端口8000上侦听Run yarn start:dev
运行yarn start：dev
Voila! You have automated your development environment start-up process.
瞧！ 您已经自动完成了开发环境的启动过程。
This is my first article on Medium, so I am ecstatic to have finally found something to share with the developer world. I hope this helps, and I’ll continue to search for more quality of coding-life hacks to share.
这是我关于Medium的第一篇文章，所以我很高兴终于找到与开发人员分享的东西。 我希望这会有所帮助，并且我将继续搜索更多质量的可共享编程的hack。
翻译自: https://medium.com/swlh/react-native-stop-using-ngrok-to-test-your-backend-95183c9cfa81
网页端使用react
相关资源：四史答题软件安装包exe