Host a React Frontend with the Static Site Resource

Many websites are built using front-end libraries, frameworks and static site generators to improve performance, user experience, and reduce cost. Cdev can easily integrate these technologies with the Static Site resource to host your static front-end content.


Host React JS with the Static Site Resource

React(React.js or ReactJS) is one of the most popular front-end libraries. This example will show how Cdev can easily integrate React with the Static Site resource.

React Documentation
For more information about how to use React, visit the official documentation.

Requirements

To create a React application you will need to install Node.js, a JavaScript Runtime.

Node.js Installation Instructions

Windows and MacOS

Instructions for Windows and MacOs can be found here: Node JS Installers.

Windows Subsystem for Linux(WSL)

WSL instructions can be found here: Install Node.js on Windows Subsystem for Linux(WSL).


Use the following command to start a new project.

cdev init react-project

Create a React Application

In the root of your project folder, create a React app with the following command:

npx create-react-app <your-app-name-here>

For example:

npx create-react-app my-react-app

Once the React app is created, the file structure will look like this: change_app_name

Using the terminal, enter the folder that contains the React app and start the local server to confirm that the React app was created correctly.

cd <your-app-name-here>
npm start

For example:

cd my-react-app
npm start

This should be the output of http://localhost:3000: change_app_name

Connect the React App to the Static Site Resource

Prepare the React application by creating a build folder with the following command:

npm run build
React Build
The command, npm run build, minifies files to create a production build of the React app in order to reduce overall load and render times on the client-side.

In the root directory, within the src folder, create a folder named content. change_app_name

Use the following command to copy the contents of the React app build folder to the root src/content folder.

cp -r <your-app-name-here>/build/* src/content

For example:

cp -r my-react-app/build/* src/content

The file structure should look like this: change_app_name

Add Static Site Resource

Go to hello_world/resources.py and add the code at lines 6, 26 and 30.

# Generated as part of Quick Start project template 

from cdev.aws.api import Api
from cdev.aws.lambda_function import ServerlessFunction

from cdev.aws.frontend import Site

from cdev import Project as cdev_project

myProject = cdev_project.instance()

DemoApi = Api("demoapi")

hello_route = DemoApi.route("/hello_world", "GET")

@ServerlessFunction("hello_world_function", events=[hello_route.event()])
def hello_world(event, context):
    print('Hello from inside your Function!')


    return {
        "status_code": 200,
        "message": "Hello Outside World!"
    }

myFrontend = Site("demofrontend", content_folder="src/content", index_document='index.html')

myProject.display_output("Base API URL", DemoApi.output.endpoint)
myProject.display_output("Routes", DemoApi.output.endpoints)
myProject.display_output("Static Site URl", myFrontend.output.site_url)

Save and deploy the changes.

cdev plan
cdev deploy

Push the React Application to Your Site

Sync the front-end, static React app, to the Static Site with the following command:

cdev run static_site.sync hello_world_comp.demofrontend  --dir src/content

Use the command below to get the url of the Static Site.

cdev output hello_world_comp.staticsite.demofrontend.site_url

Copy and paste the url into the browser to view the Static Site, React app. change_app_name