Todo List with React
warning
Running dart
on the backend side is still experimental work. If you encounter any issues, please let us know by creating a new GitHub issue.
info
The source code for this example is public on the following GitHub repository.
This is an example of a todo application that uses:
Dart
for the backendReact
for the frontendMongoDB
genezio
for developing and deploying the project
Note: genezio deploy
deploys both backend and frontend.
If you want to test this example out-of-the-box by running 1 command, head to the server
directory and run genezio deploy
.
If you want to deploy your application step-by-step, follow the guidelines below.
Prerequisites
- Host a Mongo Database. Follow this tutorial to get a free tier database.
- Create a
server/.env
file and add the following environment variables:
MONGO_DB_URI=<your-mongo-uri>
Clone the example
- Run
git clone https://github.com/Genez-io/genezio-examples
- Navigate to the folder
cd ./genezio-examples/dart/todo-list-react-typescript
Initialization
- Run
dart pub get
in theserver/
folder to install the dependencies. - Run
npm install && npm run build
in theclient/
folder to install the dependencies.
Run the example locally
- Run
genezio local
in theserver/
folder to start the local server. - Start the Flutter app by going to the
client/
folder and runflutter run -d chrome
.
Deploy the example in the genezio infrastructure
- Run
genezio deploy --backend
in theserver/
folder that contains also thegenezio.yaml
file. This will deploy your code in the genezio infrastructure and it will also create an SDK that can be used to call the methods remotely. - Start the Flutter app by going to the
client/
folder and runflutter run -d chrome
.
Deploy the frontend in genezio Infrastructure
- Run
npm install && npm run build
in theclient/
folder to build the Flutter app. - Run
genezio deploy --frontend
in theserver
folder to deploy the frontend in the genezio infrastructure.
Github files are available here.