A React Static website that deploys automatically to web and SAFE!

websites
react-static

#1

Create your content locally in markdown and then publish to web and/or SAFE Network. Here is the demo Blog live:

Clone this repo to create a Blog website/app for Web and/or SAFE Network that will load blazing fast because it is based on React-static.

Deployment

On Linux this is automatic using a bash script with FTP (with ncftpput) and/or SAFE Drive:

$ scripts/deploy.sh
yarn run v1.12.3
$ react-static build

=> Info: No 'siteRoot' is defined in 'static.config.js'. This is suggested for absolute urls and also required to automatically generate a sitemap.xml.

=> Cleaning dist...
=> [✓] Dist cleaned
=> Building Routes...
=> [✓] Routes Built (0.4s)
=> Building Templates
=> [✓] Templates Built
=> Copying public directory...
=> [✓] Public directory copied
=> Bundling App...
Version: webpack 4.29.0
Time: 2336ms
Built at: 2019-01-29 12:24:18
                                        Asset       Size  Chunks             Chunk Names
                             main.63b9e5bf.js   5.26 KiB       0  [emitted]  main
                         main.63b9e5bf.js.map   18.1 KiB       0  [emitted]  main
                          styles.85db626c.css  336 bytes       6  [emitted]  styles
    templates/src-containers-Post.88917035.js  444 bytes       1  [emitted]  src-containers-Post
templates/src-containers-Post.88917035.js.map   1.08 KiB       1  [emitted]  src-containers-Post
          templates/src-pages-404.0b0868a6.js  306 bytes       2  [emitted]  src-pages-404
      templates/src-pages-404.0b0868a6.js.map  610 bytes       2  [emitted]  src-pages-404
        templates/src-pages-about.f8ca561e.js   3.56 KiB       3  [emitted]  src-pages-about
    templates/src-pages-about.f8ca561e.js.map   10.5 KiB       3  [emitted]  src-pages-about
         templates/src-pages-blog.e4e07055.js  541 bytes       4  [emitted]  src-pages-blog
     templates/src-pages-blog.e4e07055.js.map   1.31 KiB       4  [emitted]  src-pages-blog
        templates/src-pages-index.1b49daf0.js   3.65 KiB       5  [emitted]  src-pages-index
    templates/src-pages-index.1b49daf0.js.map   10.7 KiB       5  [emitted]  src-pages-index
                 templates/styles.85db626c.js  126 bytes       6  [emitted]  styles
             templates/styles.85db626c.js.map  105 bytes       6  [emitted]  styles
           templates/vendors~main.e5b6c10a.js    264 KiB       7  [emitted]  vendors~main
       templates/vendors~main.e5b6c10a.js.map    901 KiB       7  [emitted]  vendors~main
  [0] /home/mrh/src/safe-react/rs-blog-demo/node_modules/react/index.js 189 bytes {7} [built]
  [1] /home/mrh/src/safe-react/rs-blog-demo/node_modules/react-hot-loader/index.js 676 bytes {7} [built]
  [2] /home/mrh/src/safe-react/rs-blog-demo/node_modules/@babel/runtime/helpers/typeof.js 817 bytes {7} [built]
  [3] (webpack)/buildin/module.js 552 bytes {7} [built]
  [5] /home/mrh/src/safe-react/rs-blog-demo/node_modules/path-browserify/index.js 6.02 KiB {7} [built]
  [6] /home/mrh/src/safe-react/rs-blog-demo/node_modules/babel-plugin-universal-import/universalImport.js 888 bytes {7} [built]
  [8] ../lib/browser/index.js 25.8 KiB {7} [built]
 [15] ../lib/browser/components/StaticInfo.js 3.02 KiB {7} [built]
 [25] /home/mrh/src/safe-react/rs-blog-demo/dist/react-static-browser-plugins.js 144 bytes {0} [built]
 [33] /home/mrh/src/safe-react/rs-blog-demo/dist/react-static-templates.js 3.33 KiB {0} [built]
 [46] multi ../lib/bootstrapPlugins.js ../lib/bootstrapTemplates.js ../lib/bootstrapApp.js 52 bytes {0} [built]
 [47] ../lib/bootstrapPlugins.js 942 bytes {7} [built]
 [74] ../lib/bootstrapTemplates.js 715 bytes {7} [built]
 [81] ../lib/bootstrapApp.js 1.98 KiB {7} [built]
[106] /home/mrh/src/safe-react/rs-blog-demo/src/index.js + 1 modules 1.02 KiB {0} [built]
      | /home/mrh/src/safe-react/rs-blog-demo/src/index.js 581 bytes [built]
      | /home/mrh/src/safe-react/rs-blog-demo/src/App.js 436 bytes [built]
    + 94 hidden modules

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  templates/vendors~main.e5b6c10a.js (264 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (269 KiB)
      styles.85db626c.css
      templates/styles.85db626c.js
      templates/vendors~main.e5b6c10a.js
      main.63b9e5bf.js

Child extract-css-chunks-webpack-plugin ../../css-loader/dist/cjs.js??ref--4-oneOf-2-1!../../postcss-loader/src/index.js??postcss!../../../src/app.css:
    [0] /home/mrh/src/safe-react/rs-blog-demo/node_modules/css-loader/dist/cjs.js??ref--4-oneOf-2-1!/home/mrh/src/safe-react/rs-blog-demo/node_modules/postcss-loader/src??postcss!/home/mrh/src/safe-react/rs-blog-demo/src/app.css 624 bytes {0} [built]
    [1] /home/mrh/src/safe-react/rs-blog-demo/node_modules/css-loader/dist/runtime/api.js 2.35 KiB {0} [built]

=> There were WARNINGS during the prod build stage. Your site will still function, but you may achieve better performance by addressing the warnings above.

=> [✓] App Bundled (2.6s)
=> Fetching Site Data...
=> [✓] Site Data Downloaded
=> Fetching Route Data...
=> [=======] 7/7 100% 7000/s 0.0s 
=> [✓] Route Data Downloaded
=> Exporting HTML across 8 threads...
=> [=======] 7/7 100% 31/s 0.0s 
=> [✓] HTML Exported (3s)
Done in 7.27s
FTP upload...
./dist/404/routeInfo.json:                              82.00 B     1.00 kB/s  
./dist/404.html:                                         1.34 kB   17.38 kB/s  
./dist/about/index.html:                                 1.70 kB   12.91 kB/s  
./dist/about/routeInfo.json:                           303.00 B     3.33 kB/s  
./dist/blog/index.html:                                  1.98 kB   22.82 kB/s  
./dist/blog/routeInfo.json:                            517.00 B     6.29 kB/s  
./dist/blog/post/another-post.md/index.html:             1.47 kB   18.04 kB/s  
./dist/blog/post/another-post.md/routeInfo.json:       193.00 B     3.13 kB/s  
./dist/blog/post/testing-deploy-script.md/index.html:    1.65 kB   20.42 kB/s  
...blog/post/testing-deploy-script.md/routeInfo.json:  367.00 B     4.33 kB/s  
./dist/blog/post/an-example-post.md/index.html:          1.49 kB   18.52 kB/s  
./dist/blog/post/an-example-post.md/routeInfo.json:    215.00 B     3.13 kB/s  
./dist/client-stats.json:                                2.32 MB  145.09 kB/s  
./dist/index.html:                                       2.41 kB   29.80 kB/s  
./dist/main.63b9e5bf.js:                                 5.26 kB   52.80 kB/s  
./dist/main.63b9e5bf.js.map:                            18.15 kB   72.12 kB/s  
./dist/react-static-browser-plugins.js:                163.00 B     1.98 kB/s  
./dist/react-static-build-config.json:                   3.30 kB   29.74 kB/s  
./dist/react-static-templates.js:                      993.00 B    11.10 kB/s  
./dist/robots.txt:                                      14.00 B   196.77 B/s   
./dist/routeInfo.json:                                 673.00 B     8.63 kB/s  
./dist/static.226b95f1.js:                             178.74 kB  107.93 kB/s  
./dist/static.226b95f1.js.map:                         209.40 kB  117.97 kB/s  
./dist/styles.85db626c.css:                            336.00 B     4.22 kB/s  
./dist/templates/src-pages-index.1b49daf0.js.map:       10.71 kB   14.77 kB/s  
./dist/templates/src-pages-about.f8ca561e.js.map:       10.46 kB   55.14 kB/s  
./dist/templates/src-pages-index.1b49daf0.js:            3.65 kB   30.23 kB/s  
./dist/templates/src-pages-blog.e4e07055.js.map:         1.31 kB   14.32 kB/s  
./dist/templates/vendors~main.e5b6c10a.js:             263.59 kB  142.45 kB/s  
./dist/templates/vendors~main.e5b6c10a.js.map:         900.72 kB  151.88 kB/s  
./dist/templates/src-pages-about.f8ca561e.js:            3.56 kB   21.33 kB/s  
./dist/templates/styles.85db626c.js:                   126.00 B     1.33 kB/s  
./dist/templates/styles.85db626c.js.map:               105.00 B     1.54 kB/s  
./dist/templates/src-containers-Post.88917035.js:      444.00 B     4.38 kB/s  
./dist/templates/src-pages-blog.e4e07055.js:           541.00 B     4.11 kB/s  
./dist/templates/src-containers-Post.88917035.js.map:    1.08 kB   12.29 kB/s  
./dist/templates/src-pages-404.0b0868a6.js:            306.00 B     3.61 kB/s  
./dist/templates/src-pages-404.0b0868a6.js.map:        610.00 B     6.63 kB/s
Mount SAFE Drive and press ENTER to sync...  scripts/deploy.sh: 24: read: arg count
Syncing via SAFE Drive...
sending incremental file list
deleting main.css
./
404.html
client-stats.json
index.html
main.63b9e5bf.js
main.63b9e5bf.js.map
react-static-browser-plugins.js
react-static-build-config.json
react-static-templates.js
robots.txt
routeInfo.json
static.226b95f1.js
static.226b95f1.js.map
styles.85db626c.css
404/
404/routeInfo.json
about/
about/index.html
about/routeInfo.json
blog/
blog/index.html
blog/routeInfo.json
blog/post/
blog/post/an-example-post.md/
blog/post/an-example-post.md/index.html
blog/post/an-example-post.md/routeInfo.json
blog/post/another-post.md/
blog/post/another-post.md/index.html
blog/post/another-post.md/routeInfo.json
blog/post/testing-deploy-script.md/
blog/post/testing-deploy-script.md/index.html
blog/post/testing-deploy-script.md/routeInfo.json
templates/
templates/src-containers-Post.88917035.js
templates/src-containers-Post.88917035.js.map
templates/src-pages-404.0b0868a6.js
templates/src-pages-404.0b0868a6.js.map
templates/src-pages-about.f8ca561e.js
templates/src-pages-about.f8ca561e.js.map
templates/src-pages-blog.e4e07055.js
templates/src-pages-blog.e4e07055.js.map
templates/src-pages-index.1b49daf0.js
templates/src-pages-index.1b49daf0.js.map
templates/styles.85db626c.js
templates/styles.85db626c.js.map
templates/vendors~main.e5b6c10a.js
templates/vendors~main.e5b6c10a.js.map

sent 4,108,426 bytes  received 789 bytes  2,718.63 bytes/sec
total size is 4,104,329  speedup is 1.00

Static website frameworks for SAFE Network
#2

Great work! You may already know this, but a useful tool to test webpage performance is PageSpeed Insights: your page gets quite a nice score. :slight_smile:


#3

I haven’t been building websites for a while so am out of touch in many respects, so this is very welcome @marcin, thanks.

The work I had to do to achieve this was minimal really, very basic stuff (though hard for me). I want to build on it though, so any other tips etc from everyone will be very welcome.

One thing I will do is pull this together into a live website documenting what I’ve done, and things like PageSpeed and links to components used etc will be part of that. :slight_smile:


#4

Glad you found the link useful. I’m a bit out of touch as well, I have a Jekyll website but Jekyll seems passé now and it does not get nearly as good of a PageSpeed score out of the box. I’ve no experience with newer frameworks, but React Static is very well-regarded and the results speak for themselves. Really cool project :+1:


#5

Haven’t got time to look at this at the mo, but could it be used as a website template, e.g. “drop your Markup files in here, your stylesheets here, alter the config file and upload?”


#6

That’s pretty much the idea although I haven’t learned how to do much of that myself yet.

Certainly you can just put a bunch of markdown files in there (following a couple of conventions), and just run scripts /deployweb.sh to build the website and upload it.

Customising the style, layout etc is also what you are supposed to do with React-static ‘templates’ such as this, but I haven’t changed any of that myself yet.

People have built impressive websites with it though, examples over at React-static.