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.
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
, visit the official documentation.To create a Instructions for Windows and MacOs can be found here: Node JS Installers. WSL instructions can be found here: Install Node.js on Windows Subsystem for Linux(WSL).React
application you will need to install Node.js
, a JavaScript Runtime
.
Node.js Installation Instructions
Windows and MacOS
Windows Subsystem for Linux(WSL)
Use the following command to start a new project.
cdev init react-project
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:
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
:
Prepare the React
application by creating a build folder with the following command:
npm run build
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
.
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:
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
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.