/apex/reactreduxblog
to see the app.git clone https://github.com/rajaraodv/react-redux-blog-vf.git
cd react-redux-blog-vf
npm install
Install ngrok. It provides a way to serve/expose your localhost files to the internet even in https (required by Visualforce).
This is great for VF development. Because now, you can develop React Redux (or angular or whatever) locally and directly load the JS from within Visualforce while you are still developing it! So you won't have to upload the JS to Static Resource everytime you make changes to the code!
For example: In your Visualforce,
Instead of point to static resource, you can point to something that looks like below. Notice that bundle.js
is actually the main app file that's currently being developed on localhost!
<script src="https://cca77cf6.ngrok.io/bundle.js"/>
Note: Once you are all done, simply copy the final bundle.js from 'public' folder in your localhost (see production section) to static resource and update the url above to point to static resource.
Create a custom object "Post" with following three fields:
You need two terminal windows open, one for client and the other for ngrok.
npm run dev
. This runs the development server(webpack-dev-server) at port 8080./path/to/ngrok http 8080
. You'll see ngrok w/ urls as shown below. Simpy use the https one.
<your ngrok's https url>/bundle.js
.<apex:page showHeader="false" sidebar="false" standardStylesheets="false" applyBodyTag="false" applyHtmlTag="false">
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<!-- Remote Objects definition to set accessible sObjects and fields -->
<apex:remoteObjects >
<apex:remoteObjectModel name="Post__c" jsShorthand="Post"
fields="Id, Name, Categories__c, Content__c">
</apex:remoteObjectModel>
</apex:remoteObjects>
<!-- reactjs -->
<div id="body" />
<!--Development to point to ngrok. Also update the ngrok's url to match your localhost's url-->
<script src="https://cca77cf6.ngrok.io/bundle.js"/>
<!-- Uncomment and use the below for production to point to final static resource "reactreduxblog"(bundle.js) -->
<!-- <script src="https://github.com/rajaraodv/react-redux-blog-vf/raw/master/{!URLFOR($Resource.reactreduxblog)}"/> -->
</body>
</html>
</apex:page>
npm run build
public
folderbundle.js
in Static resource.Please check out the following blogs to learn more: