
Create a file with the name of app.config.js
inside the root directory of your project and paste the following code:
const myAppName = 'Song Finder'
export default () => {
if (process.env.NODE_ENV === 'development') {
return {
name: myAppName,
version: '1.0.0',
// All values in extra will be passed to your app.
extra: {
API_URL: 'http://localhost:5000/api/v1',
},
}
} else {
return {
name: myAppName,
version: '1.0.0',
// All values in extra will be passed to your app.
extra: {
API_URL: 'https://YOUR_PUBLIC_API_URL/api/v1',
},
}
}
}
Furthermore, you will need to initiate your app with the command of npx cross-env NODE_END=development expo start/public
. You might be prompted to install cross-env, please do!
Moreover, you will also need to install a npm library called expo-contants, npm i expo-constants
. This library will make the environment variables available accross your app.
import Constants from "expo-constants";
import { View, Text } from "react-native";
const Playlists = () => {
return (
<View>
<Text>{JSON.stringify(Constants.manifest.extra.API_URL, null, 4)}</Text>
</View>
)
}
export default Playlists.
Lastly, React Native does not really lets you connect to your localhost server. However, there’s a solution that it is easy to implement. Open your CMD in your Windows machine and type the following command, ipconfig
then simply scrolldown to the Wireless LAN adapter Wi-Fi and copy the address under the IPv4 Address section. It should look like this:
Wireless LAN adapter Wi-Fi:
Connection-specific DNS Suffix . : attlocal.net
IPv6 Address. . . . . . . . . . . : XXXX:XXXX:XXXX:XXXX:XXXX:XXXX:XXXX:XXXX
Temporary IPv6 Address. . . . . . : XXXX:XXXX:XXXXX:XXXX:XXXX:XXXX:XXXX:XXXX
Link-local IPv6 Address . . . . . : XXXX::XXXX:XXXX:XXXX:XXXX%X
IPv4 Address. . . . . . . . . . . : 192.168.1.73
Subnet Mask . . . . . . . . . . . : XXX.XXX.XXX.X
Default Gateway . . . . . . . . . : XXXX::XXXX:XXXX:XXXX:XXXX%X
XXX.XXX.X.XXX
NOTE: When running the command to initiate your app, plase make sure to use either start or publish, NOT BOTH!
Bye Bye 🙂
If you want to know more about Web Development with NodeJS, take a look into this book: