Merge pull request #310 from pushkin-consortium/codespaces

Codespaces-related updates

.changeset/modern-pillows-boil.md

@@ -0,0 +1,8 @@
+---
+"@pushkin-templates/site-basic": patch
+"pushkin-cli": patch
+---
+
+- Added logic to front end's `config.js` to automatically detect use in GitHub Codespaces and appropriately set API endpoints
+- Similar logic added to front end's craco config to set WebSocket URL appropriately for Codespaces
+- Added detection of Codespaces-specific environment variables to CLI's `setEnv()` function

.changeset/plenty-pumas-wink.md

@@ -0,0 +1,5 @@
+---
+"@pushkin-templates/site-basic": patch
+---
+
+Switched to self-hosting main site font

docs/getting-started/quickstart.md

@@ -187,6 +187,18 @@ pushkin stop
 
 If you don’t do that, the web server will keep running in Docker until you quit Docker or restart. When the command has finished running, it should output `done`.
 
+### Site testing with GitHub Codespaces
+
+If you are developing your Pushkin site in a codespace, you'll run `pushkin start` just like for local testing; however, to view your site, click on the "PORTS" tab and click the globe icon for port 80 to open your site in the browser:
+
+![](../assets/getting-started/quickstart/codespacesPorts1.png)
+
+If you notice CORS errors in the console while testing your site in a codespace, a potential fix can be to make port 80 public:
+
+![](../assets/getting-started/quickstart/codespacesPorts2.png)
+
+After you're done looking at your site, run `pushkin stop` just as you would for local testing.
+
 ## Updating your site
 
 Imagine now you want to add another experiment or edit an existing one. Every time you update your site, you’ll need to run `pushkin prep` (and `pushkin start` if you want to look at your updates) again:
@@ -212,7 +224,7 @@ Since the `remove experiment` command updates your site, you will need to run `p
 
 ## Viewing your data
 
-At this point, you should have generated some data by testing at least one of your experiments. In order to view it, you can use whatever Postgres manager you installed based on the Pushkin [installation instructions](installation.md#installing-a-postgres-manager). Here, we'll go over how to view the data using either pgAdmin or SQLTools.
+At this point, you should have generated some data by testing at least one of your experiments. In order to view it, you can use whatever Postgres manager you installed based on the Pushkin [installation instructions](installation.md#installing-a-postgres-manager). Here, we'll go over how to view the data using either pgAdmin or SQLTools. Make sure your database is running first by using the command `pushkin start`.
 
 === "pgAdmin"
 

packages/pushkin-cli/src/commands/prep/index.js

@@ -6,6 +6,7 @@ import util from 'util';
 import { execSync } from 'child_process'; // eslint-disable-line
 const exec = util.promisify(require('child_process').exec);
 import pacMan from '../../pMan.js'; //which package manager is available?
+import { env } from 'process';
 
 // give package unique name, package it, npm install on installDir, return module name
 const publishLocalPackage = async (modDir, modName, verbose) => {
@@ -107,13 +108,25 @@ const publishLocalPackage = async (modDir, modName, verbose) => {
   })
 };
 
+/**
+ * Creates/updates .env.js in the Pushkin site's pushkin/front-end/src directory
+ * @param {boolean} debug Whether the site is being prepped for testing (true) or deployment (false)
+ * @param {boolean} verbose Output extra information to the console for debugging purposes
+ */
 export function setEnv(debug, verbose) {
   if (verbose) {
     console.log('--verbose flag set inside setEnv()');
-    console.log('running setEnv()');
+    console.log('Updating pushkin/front-end/src/.env.js');
   }
   try {
-    fs.writeFileSync(path.join(process.cwd(), 'pushkin/front-end/src', '.env.js'), `export const debug = ${debug};`)
+    let envJS = `const debug = ${debug};
+      // The following will be undefined in the local environment
+      // but are needed to route the API and server correctly for GitHub Codespaces
+      const codespaces = ${process.env.CODESPACES};
+      const codespaceName = '${process.env.CODESPACE_NAME}';
+      module.exports = { debug, codespaces, codespaceName };`;
+    envJS = envJS.split('\n').map((line) => line.trim()).join('\n'); // Remove indentation
+    fs.writeFileSync(path.join(process.cwd(), 'pushkin/front-end/src', '.env.js'), envJS, 'utf8')
   } catch (e) {
     console.error(`Unable to create .env.js`)
   }

templates/sites/basic/src/pushkin/config.js.bak

@@ -4,7 +4,7 @@
 //import fs from 'fs';
 //import jsYaml from 'js-yaml';
 import { pushkinConfig } from './.pushkin.js'
-import { debug } from './.env.js'
+import { debug, codespaces, codespaceName } from './.env.js'
 
 // Front-end configuration file
 
@@ -14,7 +14,13 @@ let frontEndURL; //Still needed?
 let logoutURL; //Still needed?
 if (debug) {
   // Debug / Test
-  const rootDomain = 'http://localhost';
+  let rootDomain;
+  if (codespaces) {
+    // Make sure to point to the Codespaces URL if testing in a codespace
+    rootDomain = 'https://' + codespaceName + '-80.app.github.dev';
+  } else {
+    rootDomain = 'http://localhost';
+  }
   apiEndpoint = rootDomain + '/api';
   frontEndURL = rootDomain + '/callback';
   logoutURL = rootDomain;

templates/sites/basic/src/pushkin/front-end/craco.config.js

@@ -1,3 +1,4 @@
+const { codespaces, codespaceName } = require('./src/.env.js');
 const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
 
 const maybe_modify_test = test => {
@@ -10,6 +11,14 @@ const maybe_modify_test = test => {
 };
 
 module.exports = {
+  devServer: (devServerConfig, { env, paths, proxy, allowedHost }) => {
+    if (codespaces) {
+      // If testing with Codespaces, the WebSocket URL needs to be updated
+      const webSocketURL = "wss://" + codespaceName + "-80.app.github.dev/ws";
+      devServerConfig.client.webSocketURL = webSocketURL;
+    }
+    return devServerConfig;
+  },
   webpack: {
     plugins: {
       add: [

templates/sites/basic/src/pushkin/front-end/src/App.css

@@ -1,7 +1,7 @@
 @font-face {
   font-family: 'slabo';
   src: local('slabo'),
-  url('https://fonts.googleapis.com/css2?family=Slabo+27px&display=swap') format('truetype');
+  url('./assets/fonts/Slabo27px-Regular.ttf') format('truetype');
 }
 
 body {