React w Node & Express Server
To begin, we discuss what we will build throughout this tutorial and the concepts you should know going into it. We then configure our environment by installing Node JS as well as a couple other packages such as Webpack and the Turbo CLI. Finally, we clone a project on the Vertex platform which will serve as our Node/Express foundation and pull down the source code to get started.
Node & Express Project
In this unit, we configure the Node/Express project by installing the dependencies and connecting the environment variables. We then run the code locally to make sure everything works. Then we briefly explore the basic structure of a simple Node app - templates, routes, the package JSON file and node_modules folder. Finally, we create a new template page for our project which will render our React code which we set up in the next video.
We set up the basic React code in this video creating creating a simple "App" component. We then connect it to the home template from video 2 by transpiring the code through Webpack. For a little extra Webpack orientation, we change the build configuration in order to see how it affects the output files in a typical React project.
It's time to fetch posts from the server! In this video, we first create two sample blog posts on the Node/Express project by taking advantage of the built-in content management system that comes equipped with all Vertex projects. Then, after briefly showing how API queries are executed, we add an API call the Posts component right after it renders. When data is returned from the API, we render it in the component by resetting the state and doing away with the static data from the previous video.
Styling and Images
In this video, we add some basic styling to the posts page so that it shows more than just plain text. We add image thumbnails by taking advantage of the scaling/cropping features of the Vertex 360 image hosting service and we also show the post date and preview text.
What good is a blog website if you can't read blog posts? In this video, we create a dedicated component for individual blog posts. We then connect it to another template with corresponding route in order to render the post on a separate page. In particular, we pass data from the server side directly to the React component without making a followup API call which is another way of facilitating communication between the two areas of the codebase.
Post Detail Page
Now that we have a dedicated route for showing individual posts as well as a corresponding post component, we pass the full post data to the React code. The post component then renders the full data - title, image, date and full text. We use "props" for this rather than state as another way of passing data through a React component tree.
We cap off the tutorial series by deploying our project to the staging server on Vertex 360 and making sure it works the same there as it does on local.