diff --git a/.changeset/modern-pillows-boil.md b/.changeset/modern-pillows-boil.md new file mode 100644 index 000000000..859cc062b --- /dev/null +++ b/.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 diff --git a/.changeset/plenty-pumas-wink.md b/.changeset/plenty-pumas-wink.md new file mode 100644 index 000000000..7604780fe --- /dev/null +++ b/.changeset/plenty-pumas-wink.md @@ -0,0 +1,5 @@ +--- +"@pushkin-templates/site-basic": patch +--- + +Switched to self-hosting main site font diff --git a/docs/assets/getting-started/quickstart/codespacesPorts1.png b/docs/assets/getting-started/quickstart/codespacesPorts1.png new file mode 100644 index 000000000..48a7ab12d Binary files /dev/null and b/docs/assets/getting-started/quickstart/codespacesPorts1.png differ diff --git a/docs/assets/getting-started/quickstart/codespacesPorts2.png b/docs/assets/getting-started/quickstart/codespacesPorts2.png new file mode 100644 index 000000000..bbd99b168 Binary files /dev/null and b/docs/assets/getting-started/quickstart/codespacesPorts2.png differ diff --git a/docs/getting-started/quickstart.md b/docs/getting-started/quickstart.md index ff92f0685..78caac918 100644 --- a/docs/getting-started/quickstart.md +++ b/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" diff --git a/packages/pushkin-cli/src/commands/prep/index.js b/packages/pushkin-cli/src/commands/prep/index.js index 2a6132676..7a2552752 100644 --- a/packages/pushkin-cli/src/commands/prep/index.js +++ b/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`) } diff --git a/templates/sites/basic/src/pushkin/config.js.bak b/templates/sites/basic/src/pushkin/config.js.bak index 875a5e25c..495a27cf0 100644 --- a/templates/sites/basic/src/pushkin/config.js.bak +++ b/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; diff --git a/templates/sites/basic/src/pushkin/front-end/craco.config.js b/templates/sites/basic/src/pushkin/front-end/craco.config.js index 22cf92d27..64732b568 100644 --- a/templates/sites/basic/src/pushkin/front-end/craco.config.js +++ b/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: [ diff --git a/templates/sites/basic/src/pushkin/front-end/src/App.css b/templates/sites/basic/src/pushkin/front-end/src/App.css index c3591ea17..58f5ba1d5 100644 --- a/templates/sites/basic/src/pushkin/front-end/src/App.css +++ b/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 { diff --git a/templates/sites/basic/src/pushkin/front-end/src/assets/fonts/Slabo27px-Regular.ttf b/templates/sites/basic/src/pushkin/front-end/src/assets/fonts/Slabo27px-Regular.ttf new file mode 100644 index 000000000..c403cb394 Binary files /dev/null and b/templates/sites/basic/src/pushkin/front-end/src/assets/fonts/Slabo27px-Regular.ttf differ