If you haven’t heard the news, MongoDB Stitch Serverless Platform has announced Stitch Hosting (Beta). Stitch Hosting allows you to host, manage, and serve your application’s static media and document files. You can use our hosting to store individual pieces of content or to upload and serve your entire client application. This post will show how super simple and easy to host and serve it to our clients.
To showcase this really neat new capability, I took our famous PicStream React app, developed by my colleague and Developer Advocate Aydrian as part of his StitchCraft live coding sessions on Twitch, and hosted it in my Stitch app. Now it can be served as a static content from the mongodbstitch.com domain.
First I enabled the Stitch Hosting feature by going to my Stitch app UI > “Hosting” > “Enable Hosting” button. It can take a few minutes for the provided DNS to become available.
In order to easily host my app in Stitch Hosting, I used webpack.js and babel JS to create a single static bundle.js file which can be served from my main index.html.
index.html
<!-- inside /build/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
<title>PicStream</title>
</head>
<body>
<div id='root'></div>
</body>
<script src="./public/bundle.js"></script>
</html>I configured the following webpack.config.js/.babel.rc/package.json files in my PicStream project directory to build the bundle.js file.
webpack.config.js
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
mode: "development",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: "babel-loader",
options: { presets: ["@babel/env"] }
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000'
}
]
},
resolve: { extensions: ["*", ".js", ".jsx"] },
output: {
path: path.resolve(__dirname, "public/"),
publicPath: "/public/",
filename: "bundle.js"
},
plugins: [new webpack.HotModuleReplacementPlugin()]
};.babel.rc
{
"presets": [ "@babel/env", "@babel/preset-react"],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}package.json
{
"name": "web-ui",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.2.1",
"babel-polyfill": "^6.26.0",
"file-loader": "^2.0.0",
"import": "0.0.6",
"moment": "^2.22.2",
"mongodb-stitch-browser-sdk": "^4.0.13",
"mongodb-stitch-browser-services-aws": "^4.0.13",
"react": "^16.5.1",
"react-dom": "^16.5.1",
"react-scripts": "1.1.5",
"semantic-ui-css": "^2.3.3",
"semantic-ui-react": "^0.82.5",
"url-loader": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"compile-boundle": "webpack-cli --mode development src/index.js --output public/bundle.js"
},
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.2.0",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"webpack-cli": "^3.1.2",
"webpack": "^4.27.1",
"webpack-dev-server": "^3.1.8"
}
}Eventually, my project tree was built as follows:
+-- public
| +-- index.html
+-- src
| +-- index.js
| +-- registerServiceWorker.js
| +-- StitchApp.js
| +-- StitchApp.test.js
+-- .babelrc
+-- .gitignore
+-- package-lock.json
+-- README.md
+-- package.json
+-- webpack.config.jsThis configuration enables me to create the required public/bundle.js:
# npm run compile-bundle+-- public
| +-- index.html
| +-- bundle.jsOn the stitch side, I have configured my Google auth “Redirect URL” to the Hosting URL.
After uploading the 2 static files (`/public/bundle.js` and `/index.html`) to my Static Hosting,
I was able to access my website through the DNS name that Stitch provided me.
Want to see how it all came together? Watch Aydrian's recording on YouTube with the Github repo in the description. Follow Aydrian on Twitch to join him and ask questions live.