Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andrey-lawyer/react-server-side-rendering
This deployment is based on a Docker image provided by andreylawyer/render-image.
https://github.com/andrey-lawyer/react-server-side-rendering
Last synced: 27 days ago
JSON representation
This deployment is based on a Docker image provided by andreylawyer/render-image.
- Host: GitHub
- URL: https://github.com/andrey-lawyer/react-server-side-rendering
- Owner: andrey-lawyer
- Created: 2024-04-12T15:55:43.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-04-14T08:06:15.000Z (9 months ago)
- Last Synced: 2024-04-14T12:31:56.933Z (9 months ago)
- Language: JavaScript
- Homepage: https://render-image-x1xv.onrender.com/
- Size: 498 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## React-server-side-rendering
- [Introduction](#introduction)
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [Running](#running)
- [Deployment](#deployment)
## Introduction
This project is a server-side rendered React application designed to provide users with dynamic content based on their interactions. Leveraging React Router for client-side routing and Express.js for server-side rendering, this application offers a seamless user experience. The project was tested on the version node 14.21.3
## Features
- **Server-side Rendering (SSR):** Utilizes server-side rendering to pre-render React components on the server, improving performance and SEO.
- **Dynamic Content:** Fetches data from the server based on the requested route, providing users with personalized content.
- **React Router:** Implements client-side routing using React Router, enabling navigation within the application without full page reloads..
- **Static Assets:** Serves static assets (HTML, CSS, JavaScript) from the server for enhanced performance and reliability..
## Installation
1. **Clone the repo**
```bash
github.com/andrey-lawyer/react-server-side-rendering
```
2. **Install dependencies** It's recommended to use npm:
```bash
npm install
```
## Usage
This project is built using the following technologies:
- **React.js:** A powerful JavaScript library for building user interfaces, known for its declarative and component-based approach.
- **Express.js:** A minimalist web application framework for Node.js, providing a robust set of features for building APIs and web applications.
## Running
```bash
npm run dev
```
After that, you can access the application in your web browser at http://localhost:3006.
## Deployment
The project is currently deployed on [Render](https://render-image-x1xv.onrender.com) from docker image.
(free version). Please note that it may take a few minutes for the application to start up initially.
Feel free to check the live deployment and interact with the application.
**Docker**
This project supports Docker, making it easy to deploy. To deploy the project, follow these steps:
1. **Install Docker:** If you don't have Docker installed on your computer yet, you can download and install it from the official Docker website.
2. **Start the Docker Containers:** Use Docker Compose to start the containers defined in the docker-compose.yml file:
```bash
docker-compose up -d
```
3. **Check the project:** Once the containers are up and running, you can access the application in your web browser at http://localhost:4005. Please note that it may take a few minutes for the application to start up initially.
4. **Stopping the Containers:** To stop the running containers, use the following command:
```bash
docker-compose down
```