Polymer and Node.js on Google App Engine
I really had a hard time in getting started with Polymer and Node on GAE, I really got frustrated at some point of time. But I was able to finish it with perfect build. I thought to scribe it down here so that it may help somebody else who is in my kind of situation.
Get the code from git hub
We will be using polymer cli for development and build process, and Node.js for production. I have earlier used webpack for building polymer files, but its little tough and I was never comfortable with it.
What we are going to build is a greet app, that shows random greets fetched from a node api.
See it live here polymer-greets
I assume you have polymer cli installed, if not there is a good “how to” in polymer page. If you are windows there are some extra steps to do to get installed. I was on windows.
Download all the source code that is need for the demo from here.
Now, the project structure will look like as in the picture, all routes will be in folder api and all the polymer-elements will be in folder src.
When we develop the application we use cli command polymer serve to get a polymer development server. This will be typically started on 8081. And we will also run a node api server on 8080. Once we build the application it will be started on 8080. Because we will be then ask Node to serve files and not polymer cli. When we upload application on to server it will be under a domain and in my case its at https://polymer-greets.appspot.com. So, we need to allow all these origins to connect with our api. To do that add all the origins onto app.js as shown below.
Buy doing this you app will ready to get started, run polymer serve to see the application in action.
Next step is to build application so that it can be pushed to server. We can use polymer build for this job. I am using a default build. Output of build process will be under the folder build/default.
When we are using polymer serve our entry point will be index.html at the root of application. But once we have build the application we can start node and start serving files from build folder.
We can do that by asking the main route to serve index.html file from build/default folder. But we will also have to set static path of folder /node_modules, /src and /resources, to the one inside the build folder.
Next is pushing application on to production, I generally use Google App Engine for hosting as it is cheep and easy to use.
Now, there is tricky part. Since we are having a nodejs app, when we push the app to GAE, it skips node_modules, but installs the same in server through the package.json. We are okay, if GAE is not uploading project/node_modules, but we need build/default/node_modules to be pushed to production as it has all the polymer related and other files after the build. During the build process cli converts all the scoped paths into actual paths.
To make sure app engine is pushing build/default/node_modules to server we can get into .gcloudignore file and add this line !build/default/node_modules
That’s it, now upload the file app engine through Google Cloud SDK, and browse to there.
Keep Calm and #usetheplatform