Last active
November 25, 2018 21:49
-
-
Save filmaj/ded05b6cb5026f0f655eee2495206caf to your computer and use it in GitHub Desktop.
arc.codes single page app bui
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let fs = require('fs'); | |
| const INDEX_HTML = 'public/index.html'; | |
| const INDEX_ROUTE = 'src/http/get-index/index.js'; | |
| let html = fs.readFileSync(INDEX_HTML).toString(); | |
| let route = fs.readFileSync(INDEX_ROUTE).toString(); | |
| route = route.replace(/`.*`/, '`' + html + '`'); // replace everything between two backticks with index.html. that's my sophisticated templating engine! | |
| console.log('\nOverwriting index route to return new index.html...'); | |
| fs.writeFileSync(INDEX_ROUTE, route, 'utf-8'); | |
| console.log('... done.'); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "weirdreactapp", | |
| "version": "0.0.1", | |
| "author": "Filip Maj <[email protected]>", | |
| "scripts": { | |
| "start": "echo 'TODO: kick up arc sandbox? parcel has cli too for pwa hosting but then how to host routes?' && exit 1", | |
| "build:pwa": "rm -rf public/* && parcel build pwa/index.html --public-url ./ --out-dir public && node pwa_munger.js && node base_route_munger.js", | |
| "ship:pwa": "npm run build:pwa && npx deploy static && echo 'TODO: deploy get-index route'", | |
| "ship": "npm run build:pwa && npx deploy" | |
| }, | |
| "dependencies": { | |
| "@architect/architect": "^4.3.12", | |
| "autoprefixer": "^7.2.1", | |
| "babel-preset-react-app": "^3.1.0", | |
| "nodemon": "^1.17.3", | |
| "react": "^16.2.0", | |
| "react-dom": "^16.2.0" | |
| }, | |
| "postcss": { | |
| "modules": false, | |
| "plugins": { | |
| "autoprefixer": { | |
| "browsers": [ | |
| ">1%", | |
| "last 4 versions", | |
| "Firefox ESR", | |
| "not ie < 9" | |
| ], | |
| "flexbox": "no-2009" | |
| } | |
| } | |
| }, | |
| "devDependencies": { | |
| "@architect/parser": "^1.1.6", | |
| "parcel-bundler": "1.10.3" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* this goes under pwa/index.css | |
| */ | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, | |
| 'Helvetica Neue', Arial, sans-serif; | |
| } | |
| .App { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| margin: 2rem auto; | |
| } | |
| img { | |
| transition: 3s; | |
| height: 100px; | |
| width: 100px; | |
| } | |
| .App:hover > img { | |
| transform: rotate(1080deg); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- this goes under pwa/index.html --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Parcel React Example</title> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script src="index.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // this goes into pwa/index.js | |
| import React from 'react'; | |
| import ReactDOM from 'react-dom'; | |
| import './index.css'; | |
| const App = () => ( | |
| <div className="App"> | |
| <h1 className="App-Title">Hello from React</h1> | |
| </div> | |
| ); | |
| ReactDOM.render(<App />, document.getElementById('root')); | |
| // Hot Module Replacement | |
| if (module.hot) { | |
| module.hot.accept(); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let parser = require('@architect/parser'); | |
| let fs = require('fs'); | |
| const INDEX_HTML = 'public/index.html'; | |
| const env = process.env.ARC_DEPLOY || 'staging'; | |
| const region = process.env.AWS_REGION; | |
| const isOGS3 = region === 'us-east-1'; | |
| const S3domain = isOGS3 ? `https://s3.amazonaws.com/` : `https://s3-${region}.amazonaws.com/`; | |
| // 0. read bucket info from arc file | |
| let arc = parser(fs.readFileSync('.arc').toString()); | |
| let bucket = arc.static[(env === 'production' ? 1 : 0)][1]; | |
| // 1. based on env assemble proper js and css url (100% stolen from | |
| // arc-repos/arc-functions/src/http/helpers/_static.js | |
| let url = S3domain + bucket; | |
| // 2. read public/index.html | |
| let html = fs.readFileSync(INDEX_HTML).toString(); | |
| // 3. interpolate | |
| // munge css | |
| html = html.replace(/stylesheet" href="(.*\.css)"/i, 'stylesheet" href="' + url + '/$1"'); | |
| // munge js | |
| html = html.replace(/script src="(.*\.js)"/i, 'script src="' + url + '/$1"'); | |
| // 4. dump to stdout | |
| console.log('\nOverwriting URLs in public/index.html...'); | |
| fs.writeFileSync(INDEX_HTML, html, 'utf-8'); | |
| console.log('... done.'); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // this goes into src/http/get-index/index.js | |
| exports.handler = async function http (req) { | |
| console.log(req); | |
| // FYI: the body property is modified at build-time | |
| return { | |
| type: 'text/html; charset=utf8', | |
| body: `this will end up being overwritten every time you build the site by pwa_munger.js` | |
| }; | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment