Adding Tutorial for Reading and Writing a File #4089
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
View your CI Pipeline Execution ↗ for commit b0e48e3.
☁️ Nx Cloud last updated this comment at |
SeanCassiere
reviewed
May 5, 2025
|
|
||
| At this point, your app will look like this - | ||
|
|
||
|  |
Member
There was a problem hiding this comment.
Could we inline the images in the repo?
See, docs/router/framework/react/guide/custom-search-param-serialization.md.
This should have it work where the website will automatically choose the image based on the selected branch.
|
|
||
| ```tsx | ||
| // src/serverActions/jokesActions.ts | ||
|
|
|
|
||
| With a little Tailwind styling, the app should look like this: | ||
|
|
||
|  |
| ``` | ||
|
|
||
| With this, our UI should look like this: | ||
|  |
|
|
||
| ### Data Flow | ||
|
|
||
|  |
|
|
||
| ## Nice to know | ||
|
|
||
| - [Server Side Rendering (SSR)](https://tanstack.com/router/latest/docs/framework/react/guide/ssr) |
Member
There was a problem hiding this comment.
Use absolute linking, without the origin.
Suggested change
| - [Server Side Rendering (SSR)](https://tanstack.com/router/latest/docs/framework/react/guide/ssr) | |
| - [Server Side Rendering (SSR)](/router/latest/docs/framework/react/guide/ssr) |
tannerlinsley
pushed a commit
that referenced
this pull request
Sep 17, 2025
Incorporating feedback from PR - #4089. Changes made - 1. Moved images to `assets` folder on suggestion 2. Changed URLs from absolute to relative. 3. Adding an in-line sequence diagram <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Newly added jokes now receive unique identifiers, improving reliability when creating new entries. * **Documentation** * Updated links to internal paths for SSR, router concepts, and React Query sections. * Switched images to repository-hosted assets for consistency and availability. * Replaced the data flow image with an inline Mermaid sequence diagram covering home-page loading and add-joke flows, including data refresh behavior. * Minor formatting cleanup. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Add DevJokes Tutorial: Reading and Writing Files
Description
Adds a tutorial showing how to build a full-stack DevJokes app with TanStack Start. Users learn to create server functions for reading and writing to files, build React components, and implement data fetching with TanStack Router.
Key Features
createServerFnfsrouter.invalidate()Demo
https://youtu.be/zd0rtKbtlgU
Reference
Complete code available at: https://github.com/shrutikapoor08/devjokes