A Step-by-Step Guide to Building a React Universal Blog App
To deal with it, developers try various methods such as,
- Adding the website's fragment version that requires pages to be in static form. It only adds a lot of work.
- Un browserify SPAs into static pages so that web spiders can crawl them. Of course, it's a paid service.
So, how do you build such an app?
Let's find out.
Build A React Universal Blog App
Before you start implementing the steps below, let me tell you there are two ways to build a React Universal App. Either you can start building the app from scratch. Or, you can use an existing codebase and curtail it in your way. Choice is yours!
React Web Development App from Scratch
Developing a React universal app will first render the markup on the server-side. It will let search engines view the content. Next, it will allow browsers to take the content as an app that's fast and responsive.
Our universal blog will use the following technologies.
- Node.js for package management and server side rendering
- React for UI
- Express for easy backend JS server framework
- React Router for routing
- React Hot Loader for hot loading in development
- Flux for data flow
- Cosmic JS for content management
1. Run these Commands
mkdir react-universal-blog cd react-universal-blog
2. Create a Package
Now, create a package.json and add the following components to the content.
- Cosmic JS official Node.js to serve our content from Cosmic cloud hosted API.
- Flux to manage the app's data flow.
- React for managing UI on server and browser.
- React Router to help in routing on server and browser.
- Webpack to bundle everything in bundle.js file.
After adding these details, add a script in the package.json file. When you run the npm run development command, the script will copy index.html content from the view folder and paste it into the public folder. From there, it will set our content base from webpack-dev-server to public. It will enable hot reloading and help debug components at the source. This functioning will also notify us about the fallbacks if any.
3. Setup Webpack Configuration File
After setting the package, configure your webpack by editing the webpack.config.js file.
- Add the entry property with the app-client.js file name. It will act as an entry point, and webpack will bundle our application here and output it to /public/dist/bundle.js.
- You can also use loaders. Hot loaders will help you with no-page refresh loading during ReactJS Application Development.
4. Design your Theme/ Use Pre-built
The next part is to design your theme. Either you can custom design the blog's feel and look, or you can use the predefined themes. For now, let's use the pre-designed theme.
5. Create a View Folder
Create a folder named "views" in the index.html file. Add the code to it.
For styling, you can add all JS and CSS files in the Public folder. You can get the files from the GitHub repository.
Remember, you can refrain from using JQuery by using the React Bootstrap package.
6. Using the Pre-built JQuery Functionality
To give your app a structure, get in your index.html file. And there, set React Mount Point to div where id= "app." It will convert our template variable to server render markup. And when the browser comes in, React will take over the control and mount to div where id=" app."
To enhance the user experience, add class = "hidden" to the body. And remove it once the React is mounted.
With this, the static pieces are done.
7. Build React Components
Now, let's start developing the UI of our React Web Development App. For this, we need to set up the pages of our blogs. Therefore, let's add the following pages
First, create an app-client.js file. Make sure it has a Router component in it. This component consists of browser history for our client side routing. As server render markup doesn't need browser history, let's create a separate route.js file to share between server and client entry points.
With it, your basic blog is ready. It's time to run your application and test it.
8. Run the application on localhost
To run the app on localhost, run these commands:
mkdir public npm install npm run development
Then, navigate to http://localhost:8080 to view your app in action.
9. Run the App on Server
Congratulations on app development!
To run it on the server, create an app-server.js file. In it, load the basic routes that you've set up. It will convert the rendered markup into a string and pass it as a variable to the template.
You're ready to run the app on the server. Before that, create a script so that you can run the code on the server and client side, both.
To do this,
- Open the package.json file
- Edit the script part in it
- In your terminal, execute "npm start"
10. Run the App
Your app is ready. Navigate to the localhost in your browser. See your simple blog and navigate in the SPA mode.
Add and Edit Content
If you wish to add and edit the content, follow these steps.
- Add a store by including AppStore.
- Create a store folder and add an event emitter. It will allow you to edit data in the store.
- Build some components. Add an event listener to re-render the state. Add getstore method to render data on the client side.
- Create page components. They will serve as templates for blog pages. Next, add the page title.
- Create AppDispatcher. It will accept information from high-level components and distribute it evenly to the store.
- Add actions now.
- To receive data from cloud API, configure your Cosmic JS CMS.After setting all the React and Flux architecture, edit the app-server.js file to render the data on the server-side.
React JS Application Development using Existing CodeBase
Now, let's see how to develop a React Universal App using codebase.
- Sign up for Cosmic JS.
- In Cosmic JS, create a new bucket. Here, the bucket name represents your website name, project name, or client application that you are building.
- After signing up and creating a bucket, you'll find two options. One is to build the app from scratch. Another is "see some apps."
- As you are building using existing modules, hit the right option, i.e., "see some apps."
- Now, Cosmic JS provides you with different programming languages like Node.js, PHP, React, Angular, and more. Hit the install button underneath the React Universal Blog icon.
- After installation, click on the "Deploy to Web" button. And confirm the deployment.
- Once it's done, you can start editing global objects, objects, and object types in the Cosmic JS dashboard.
Your React Web Development App is ready.
It's a Wrap
Building SPA gets comfortable with React. Follow any of these two procedures and build a React Universal app that uses React and Node.js. The best part of using this technology for React JS Application Development is that your app is fast, loads instantly, and runs on both, client and server side. Also, search engines will be able to rank it now.
There are two ways to build a React Web Development App. Check out this exclusive guide and build your React Universal Blog App today.
Maulik ShahMaulik Shah is the CEO of Biztech, react native app development from India. Maulik likes to explore beyond his comfort zone. When it comes to writing for the blog, his contribution is priceless. No one else on the team can bring the deep industry knowledge to articles that he has. However, his door is always open and he is generous with sharing that knowledge.