40 minutes, Beginner/Intermediate
In this workshop, you will learn how to convert the Todo web application from a previous DataStaxDevs workshop into a React Native mobile and web application. We will actually be using the same database setup as before, so if you've already created it during the prior workshop, you can skip the Database setup section of this workshop.
Before going all React Native, if you would like to learn more about React and create your first React app take a look at our previous Todo app workshop. HERE.
This is an example React Native Todo application using a DataStax AstraDB free tier database.
Mobile App on Android:
Mobile App on iOS:
Web Application in Chrome:
- Implement a React Native Todo app using Expo
- Learn about React Native components and how they are used to dynamically update the DOM with new information
- Learn how to convert a React web app to a React Native mobile and web app
- Learn how state and props changes are used
- Leverage Netlify and DataStax AstraDB
- Are there any prerequites?
- You will need a GitHub account
- You will need to download Expo Go on your mobile phone (if you wish to do that part)
- What other prerequisites are there?
- You will also need an Astra DB account, but we'll work through that in the exercises
- Use Chrome or Firefox for the best experience. Other browsers are great, but don't work well with the GitPod integration we use a bit later.
- Can I run the workshop on my computer?
There is nothing preventing you from running the workshop on your own machine. If you do so, you will need
- git installed on your local system
- node 15 and npm 7 or later
- Expo CLI, Watchman, Xcode, Android Studio, and an iPhone or Android
You will have to adapt commands and paths based on your environment and install the dependencies by yourself. We won't provide support to keep on track with schedule. However, we will do our best to give you the info you need to be successful.
- Do I need to pay for anything for this workshop?
- No. All tools and services we provide here are FREE.
- Will I get a certificate if I attend this workshop?
Attending the session is not enough. You need to complete the homework detailed below and you will get a nice badge.
It doesn't matter if you join our workshop live or you prefer to do at your own pace, we have you covered. In this repository, you'll find everything you need for this workshop:
Don't forget to complete your upgrade and get your verified skill badge! Finish and submit your homework!
- Complete your mobile app deployment by completing the practice steps below THROUGH STEP 9 by launching the app in GitPod and viewing it in Expo Go
- A single image of the working mobile app with some fun todo items deployed on your phone is fine (if you cannot do this on your phone a screen of the web app is just fine)
- Extra credit to fully deploy this up on Netlify and access from your mobile device using steps 10 and 11
- Submit your homework here
That's it, you are done! Expect an email next week!
- Login or Register to AstraDB and Create Database
- Create a Security Token
- Deploy to Netlify
- Access your GitHub repository and Launch GitPod IDE
- Check Node and NPM versions in GitPod
- Register for an Expo Account in GitPod
- Install Expo Mobile Application on Your Phone
- Launch the Todo app
- View Mobile App
- Link to and Configure Netlify
- Deploy to Production
Part 1: Create the Database
ASTRADB is the simplest way to run Cassandra with zero operations at all - just push the button and get your cluster. No credit card required, $25.00 USD credit every month, roughly 5M writes, 30M reads, 40GB storage monthly - sufficient to run small production workloads.
✅ Step 1a: Click the button to login or register with Datastax. You can use your Github, Google accounts or register with an email.
Make sure to chose a password with minimum 8 characters, containing upper and lowercase letters, at least one number and special character
-
Show me!
Use the following values when creating the database
| Field | Value |
|---|---|
| database name | todos_native_workshop_db |
| keypace | todos |
| Cloud Provider | Use the one you like, click a cloud provider logo, pick an Area in the list and finally pick a region. |
You can technically use whatever you want and update the code to reflect the keyspace. This is really to get you on a happy path for the first run.
You will see your new database pending in the Dashboard.
The status will change to Active when the database is ready, this will only take 2-3 minutes. You will also receive an email when it is ready.
✅ Step 2a: Create a token for your app to use in the settings screen. Use "Database Administrator" permission.
✅ Step 2b: Copy the token value (eg AstraCS:KDfdKeNREyWQvDpDrBqwBsUB:ec80667c...) in your clipboard and save the CSV, this value would not be provided afterward.
👁️ Expected output
-
Show me!
-
What does the netlify deploy button do?
The Netlify deploy button will:- Create a new repository for you on Github
- Create a site on Netlify
- Link the two together.
-
Click the button to deploy
-
Show me!
This will take a few minutes.
-
Click on
Site deploy in progresswithin the Netlify UI,Show me!
-
Click the top deploy link to see the build process.
Show me!
-
Wait until the build complete
Netlify Build Complete, When you see Pushing to repository you're ready to move on.Show me!
-
Scroll up to the top and click on the site name (it'll be after {yourlogin}'s Team next to the Netlify button).
Show me!
Part 2: Launch the Native Application
✅ Step 4a:
- Click on the
GitHubinDeploys from GitHubto get back to your new repository. Scroll to where you were in the README.
✅ Step 4b:
- Click the button to launch the GitPod IDE from YOUR repository.
WAIT! Before moving on ensure you are working out of YOUR repository, not the datastaxdevs repository.
- From your GitPod terminal execute the following command
git remote -v
If you are still using the datastaxdevs repo please ensure to follow the previous step, step3 to get to your repo.
ℹ️ It may take 3-5 minutes for GitPod to fully initialize.
(Note: if the Gitpod button does not work, for example you are using Safari, don't despair! You can manually build the URL you need and open it in a new tab like this:
https://gitpod.io/#<YOUR REPO FULL URL>, pasting in it the full address of your GitHub repository. For example,https://gitpod.io/#https://github.com/JohnSmith/workshop-todo-native-mobile, assuming you are "JohnSmith" on Github and your repo is "workshop-todo-native-mobile").
- Check out the .gitpod.yml file to see the environment setup. We've installed the Expo CLI, the Netlify CLI, and updated Node and NPM for you already.
✅ Step 5a:
- Create split terminals
Click on the double-panel icon:
End Result:
✅ Step 5b: You will need node 15 and npm 7 or later in both terminals.
npm -vnode -vIf either are not updated, run the following commands respectively.
nvm install nodeIf you don't have an account:
expo registerOpen https://expo.dev/signup in a new tab.
Note, when using GitPod the preview pane will not display this properly. You must click the "open in a new window" button in the very top right of the preview pane.
Login to your account in the terminal:
expo loginDouble check that you are logged in.
expo whoami You should see:
Download the Expo App from the Android Play Store or iOS App Store.
Android:
iOS:
✅ Step 8a: Retrieve application token to securely connect to the database
Use the token you previously generated. If you no longer have the token and did not download a .csv, you can generate a new token using the instructions above
✅ Step 8b: Configure Environment Variables and Install Dependencies
- Set up your Astra Environment
In the repository directory run the following command to set up your Astra environment. Note that this does require Node 15 and NPM 7 to work. You can install a node version manager like nvm or n to use multiple versions on your system.
npm exec astra-setup todos_native_workshop_db todos- You will be asked to: Please paste the Database Admin Token here so copy over the Token you saved earlier, and hit enter. It will start with AstraCSAstraCS:cvdPRONUrUUT:...
✅ Step 8c: Add Host URL to .env
Get workspace URL:
bash hostURL.shFinal output should look like the below:
You can see the output of the .env file by running cat .env.
✅ Step 8d: Start Netlify and Expo
- Run the application (Ignore the QR code generated here)
netlify dev ; gp preview $(gp url 8888)
If this doesn't open in the right port (for example, 19003) - swap the port number to 8888. You will get the right url by running:
gp preview $(gp url 8888)
In a new terminal window: (or have a split terminal)
expo start --tunnel
Enter 'y' for yes when asked to use another port. Port 19000 is being used for the web app launched with netlify dev, that starts the web app with expo start --web (This opens when you run netlify dev.)
✅ Step 8e: Launch your app in the web browser
Open your web application at the URL specified in the HOST line of your .env file in a new tab in your browser.
Web Application in Chrome:
✅ Step 8f: Launch your app on your mobile device
Scan the QR code with your phone camera to open your application in the Expo App! You may need to resize the terminal to make the QR code render properly. You can also scan the QR code from within the Expo Go app. Once the QR code is scanned, it may take a few minutes for the app to be loaded and run on your phone.
Scanning in the Expo Go App:
✅ Step 9a: Launch your app on your mobile device
You may see this screen for a while -- Expo Go is loading the application.
Add some items to your Todo list (type in the 'What needs to be done?' input and hit enter)! These get stored in Astra DB.
See examples of what your finished product should look like:
Mobile App on Android:
Mobile App on iOS:
✅ Step 9b: See your Todos in Astra DB.
- Navigate to the Dashboard in Astra DB and click on the todos_native_workshop_db.
- Then click on the CQL tab.
Finally, run the following commands:
use todos;
describe tables;
select * from rest;
The output should look like the following:
Execute each of the commands below to link your code to your Netlify deployment.
- First thing, we'll need to STOP both programs running: the
netlify devcommand we issued a moment ago, as well as the expo start --tunnel command. In the terminal where you executed the netlify command issue aCTRL-C(control key + the C key) in order to stop the process. From here on, you will only need one console. - Then continue with the following commands
- This will pop up a browser to authenticate with netlify
netlify login
Note, when using GitPod the preview pane will not display this properly. You must click the "open in a new window" button in the very top right of the preview pane.
- This will link your workspace to the associated site
netlify link
- Update the environment variables in your .env file - (See generateEndpoint function in api.js to see why we do this).
Before:
IS_PROD="false"
GITPOD="true"
After:
IS_PROD="true"
GITPOD="false"
- This will take the .env file created by astra-setup and upload it to netlify
netlify env:import .env
Now that you've hooked everything up, time to deploy to production.
- Run
netlify build
- Then run
netlify deploy --prod
- Then finally run
netlify open:site
You've deployed your app to Netlify!
Take me to the React stuff
We've created a separate repo going over the Basics of React. To get there, click the link below.When you're done, just click on the "Back to Main" breadcrumb to come back here.
- The contents of this repo are based on Jake's port of the TodoMVC code originally written by Pete Hunt.
- The example is modified from https://github.com/huksley/todo-react-ssr-serverless.