Set up Babel
npm install --save-dev @babel/core @babel/preset-env babel-loader @babel/preset-react @babel/plugin-proposal-class-properties
In your root directory, create a file called .babelrc (yes, it starts with a dot). Copy and paste the following content:
Run npm start and open your browser to http://localhost:3000.
You should see a message that says, “This is a React component inside of Webflow!”
That’s it for the React setup! Now let’s set up our deployment.
Set up S3 deployment
Since Webflow doesn’t allow you to host your own script files on their servers, we’ll have to load the script from an external server. For this, we’ll use Amazon S3.
- Create an s3 bucket and give it a unique name
- Press “next” twice
- Uncheck the following options
a. Block new public ACLs and uploading public objects
b. Remove public access granted through public ACLs
- Enable public access
a. Go to the Permissions tab
b. Click Access Control List > Everyone
c. Check List Objects and Write Objects > Save
Modern browsers enforce Cross-Origin Resource Sharing (CORS) rules which don’t allow your site to load content from an external URL. To get around this limitation, we need to tell S3 to send a CORS header specifying that any origin can GET the files in our bucket. To do this:
- Click CORS Configuration
- Copy and paste the following
<?xml version="1.0" encoding="UTF-8"?>
Now you’ll need to install the AWS Command Line Interface (CLI) on your computer.
To do this, run the following:
curl "https://s3.amazonaws.com/aws-cli/awscli-bundle.zip" -o "awscli-bundle.zip"
sudo ./awscli-bundle/install -i /usr/local/aws -b /usr/local/bin/aws
Create an S3 CLI User
Now let’s create a user for the AWS CLI to use:
- In the AWS dashboard, go to Services > IAM > Users
- Add a user and give it a name
- Check Programmatic access > Next
- Attach existing policies > check AmazonS3FullAccess
- Click Next > Next > Create
- Keep this page open and open a terminal
- Type in aws configure
- Enter your access key ID and secret access key as prompted
Create a build script
To bundle an app using Webpack, you only have to use the “webpack” command, so go ahead and add the following script to your package.json:
Create a deploy script
Add the following script to your package.json, making sure to replace BUCKETNAME with the name of your s3 bucket:
"deploy": "aws s3 cp ./dist/bundle.js s3://BUCKETNAME/ --acl public-read"
Build and deploy the script
When you run the build script, it will create a bundle.js file. This is the file we want to load in the Webflow site. In your terminal, run:
npm run build && npm run deploy
I usually like to create a shortcut script that does both, so go ahead and add the following script to your package.json. (bd stands for build and deploy):
"bd": "npm run build && npm run deploy"
Add component to Webflow
With all that out of the way, we’re finally ready to deliver on this post’s promise: adding your React component to your Webflow project.
Load the React library
- Open your Webflow project
- Open the page you want to add your React component to
- Click the gear icon
- Find the Inside <head> tag section and paste the following script tags to load React and React DOM:
Now your page will load both the React library and the React DOM, which is the part of React that allows you to attach elements to the document object model (DOM), which is what we techies call the structure of the page.
Load your bundled app file
Next, we’ll need to tell Webflow to load our compiled app bundle. Find the Before </body> tag section and paste in the script link to your compiled bundle.js.
Create a target div
The last thing you’ll need to do is to create a div for the React app to populate:
- Find where you want to render the React component on your page, and create a div
- Give the div an ID of react-target (the same name we specified in our index.js)
- Deploy the Webflow project
Now, when you view your Webflow site, your React app should render in the div you specified.
Congratulations! If you made it this far, you now have React running in Webflow. If you have any questions, leave a comment below or send me an email. Good luck!