Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/futurepress/react-native-static-server
HTTP static file server for React Native
https://github.com/futurepress/react-native-static-server
react-native
Last synced: about 1 month ago
JSON representation
HTTP static file server for React Native
- Host: GitHub
- URL: https://github.com/futurepress/react-native-static-server
- Owner: futurepress
- License: mit
- Created: 2017-02-15T23:26:35.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-05-24T11:09:02.000Z (over 1 year ago)
- Last Synced: 2024-05-29T14:25:42.179Z (7 months ago)
- Topics: react-native
- Language: Java
- Size: 1.22 MB
- Stars: 352
- Watchers: 10
- Forks: 176
- Open Issues: 46
-
Metadata Files:
- Readme: README.md
- License: license
Awesome Lists containing this project
README
# react-native-static-server
A cross platform component for serving static assets with React Native.
## Getting started
`$ npm install react-native-static-server --save`
### Installation
From react-native 0.60 autolinking will take care of the link step but don't forget to run pod install
`$ react-native link react-native-static-server`
## Usage
Declare the `StaticServer` with a port or use the default `0` to pick a random available port.
```javascript
import StaticServer from 'react-native-static-server';
let server = new StaticServer(8080);
// Start the server
server.start().then((url) => {
console.log("Serving at URL", url);
});
// Stop the server
server.stop();
// Check if native server running
const isRunning = await server.isRunning()
// isRunning - true/false
```
`StaticServer` serves from the document directory (default) or takes an optional absolute path to serve from.
For instance, using [react-native-fs](https://github.com/johanneslumpe/react-native-fs) you can get the document directory and specify a directory from there.
#### Default (document directory)
```javascript
import StaticServer from 'react-native-static-server';
import RNFS from 'react-native-fs';
// create a path you want to write to
let path = RNFS.DocumentDirectoryPath + '/www';
let server = new StaticServer(8080, path);
```
#### Custom folder (iOS)
##### Create the folder for static files
Create a folder in your project's top-level directory (usually next to your node_modules and index.js file), and put the files you want to access over http in there.
##### Add folder (static files) to XCode
This folder **must be added to XCode** so it gets bundled with the app.
In XCode, `Project Navigator` right click in the folder project → `Add files to ""` → Select the static folder **and clic options (Uncheck copy items if needed, Create folder references)** so don't duplicate files → Clic Add.
When the app gets bundled, this folder will be next to the compiled app, so using `MainBundlePath` property from `react-native-fs` you can access to the directory.
```javascript
import StaticServer from 'react-native-static-server';
import RNFS from 'react-native-fs';
// path where files will be served from (index.html here)
let path = RNFS.MainBundlePath + '/www';
let server = new StaticServer(8080, path);
```
If the server should only be accessible from within the app, set `localOnly` to `true`
```javascript
import StaticServer from 'react-native-static-server';
// Just set options with defaults
let server = new StaticServer({localOnly : true });
// Or also valid are:
let server = new StaticServer(8080, {localOnly : true });
let server = new StaticServer(8080, path, {localOnly : true });
```
If the server should not pause when the app is in the background, set `keepAlive` to `true`
```javascript
let server = new StaticServer({keepAlive : true });
```
Passing `0` as the port number will cause a random port to be assigned every time the server starts.
It will reset to a new random port each time the server unpauses, so this should only be used with `keepAlive`.
```javascript
let server = new StaticServer(0, {keepAlive : true });
```
## Credits
* iOS server: [GCDWebServer](https://github.com/swisspol/GCDWebServer)
* Android server: [NanoHttpd Webserver](https://github.com/NanoHttpd/nanohttpd)
Thanks to [CorHttpd](https://github.com/floatinghotpot/cordova-httpd) and [react-native-httpserver](https://gitlab.com/base.io/react-native-httpserver#README) for the basis of this library.