Click & Launch a Meteor Blaze App (PWA ready) at Github Codespaces (& Actions test)
Tags: githubactions, meteorjs, moopt, showdev
Published: 2023-05-19 03:18:49

## MeteorJS

[MeteorJS](https://blaze-tutorial.meteor.com/) is an open-source full-stack JavaScript platform that is useful for developing modern web and mobile applications. Meteor helps the developer to develop in one language. Meteor has several features that help for creating a responsive and reactive web or mobile application using JavaScript or different packages available in the framework.

![What is Meteor & its Benefits](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rbxfzqlwcaubbjst6gxe.png)

For starts working with any technology, first of all, we need to create a suitable environment. Meteor currently supports OS X, Windows, and Linux. Only 64-bit is supported. The main prerequisite is Node.js. 

We will use [BlazeJS](https://github.com/meteor/blaze), a powerful library for creating user interfaces by writing reactive HTML templates. Compared to using a combination of traditional templates and jQuery, Blaze eliminates the need for all the "update logic" in your app that listens for data changes and manipulates the DOM. Blaze is a Meteor-only package for now.

Instead of setting MeteorJS environment manually (especially as the application will be getting more complex from time to time), for example adding Progressive Web App (PWA), we leverage [Meteor.js devcontainer](https://github.com/meteorengineer/meteor-dev-container) by Meteor Engineer. Now, you can simply go to [moopt-codespace-action repo](https://github.com/Mooptcom/moopt-codespace-action) and create a codespace based on this repo in seconds!

{% embed https://www.youtube.com/watch?v=A1On7u3h9VI %}

## Github Codespaces

[GitHub Codespaces](https://github.com/features/codespaces/) are development environments hosted in the cloud. You can customize your project for GitHub Codespaces by configuring dev container files to your repository (often known as Configuration-as-Code), which creates a repeatable codespace configuration for all users of your project.

GitHub Codespaces run on a variety of VM-based compute options hosted by GitHub, which you can configure from 2 core machines up to 32 core machines.

GitHub Codespaces is similar to your local IDE, so you don't really able to host an application with it. 

GitHub Codespaces allowed me to work on the project from any device, anywhere in the world, with a pre-configured development environment that included all the necessary tools and dependencies, enabling me to focus on coding without worrying about setting up my local environment.

## Step-by-step to Click & Launch a Meteor Blaze App Environment at Github Codespaces

Step 1: Go to [moopt-codespace-action repo](https://github.com/Mooptcom/moopt-codespace-action)

![go to moopt-codespace-action repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ym2g36ovs21l4olbo51y.png)

Step 2: Click to launch a Codespace

![Click to launch a Codespace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/joqn5ntqsuggy79dspc5.png)

Step 3: Wait

![launching Codespace 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/71jm4b6a17humaegm91w.png)

![launching Codespace 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wb91hf8a68thrqgozf42.png)

![Meteorjs environment auto setup 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6c3003p1g0q1z53avzgq.png)

![Meteorjs environment auto setup 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xtvybl8pwjf241f4gjo.png)

Step 4: Awesome!

![Meteorjs Example Hello app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f18hfc23xo6v8jfdhdid.png)

![Github Codespace status](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mowtv0vlpxzxewz2wnn1.png)

## Behind the Scene

Used Github Desktop to add existing local repository.

![Github Desktop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0y3sb1xbg4f4jy41r6k.png)

## Progressive Web App (PWA)

Before

![Before PWA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/830vgtwkmc0maxroiwdp.png)

After

![After PWA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/znxpis7gzucwwu88cbbj.png)

## Github Actions

[Github Actions](https://github.com/actions/starter-workflows) is a combination of individual tasks, to define custom workflows that automated the entire development lifecycle, from code changes, testings to deployments. 

![Github Actions test running](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/john1u5cn5014dw4572i.png)

{% embed https://www.youtube.com/watch?v=A1On7u3h9VI %}

To be continue...