Setting up subdomain routing

August 14, 2020

Today I managed to set up subdomain routing to my rails app.

Steps:

  • Have nginx installed via brew.
  • Install dnsmasq and set it up.
  • Massage your rails environment configuration.

Dnsmasq (required for routing wildcard subdomains locally)

To set up dnsmasq, this stackoverflow post is very useful. Note for OSX you will need to change your wifi dns config to set localhost as the default DNS server.

sudo mkdir /usr/local/sbin
sudo chown -R $(whoami) /usr/local/sbin
brew install dnsmasq
# note! the default /usr/local/etc/dnsmasq.conf is not the brew one.  mv that and then cp the brew one in the original position
mv /usr/local/etc/dnsmasq.conf /usr/local/etc/dnsmasq.conf.backup
cp $(brew list dnsmasq | grep /dnsmasq.conf$) /usr/local/etc/dnsmasq.conf
# then add an entry to your specified dns server at localhost with a wildcard for soap-site.com
vim /usr/local/etc/dnsmasq.conf
# insert the following line and save the file
address=/soap-site.com/127.0.0.1

Set up nginx in this vague manner

nb I placed logs in /usr/local/etc/nginx/logs

# usr/local/etc/nginx/sites-available/default.conf
server {
    listen      80;
    server_name soap-site.com *.soap-site.com;

    location / {
          proxy_pass http://localhost:3000;
          proxy_http_version 1.1;
          proxy_set_header Host $host;
    }
}

nb, if you want ssh you’ll need to generate a .crt and .key file. I decided not to follow through with this as yet.

To reload nginx,

nginx -s reload

Massage your rails environment configuration

Since I was using rails 6, I needed to place this in my config/environments/development.rb (and will need to do the same for production.rb eventually, too – or alternatively switch out for whichever TLD I end up using for this app).

  config.hosts << /[a-z0-9]+\.soap-site.com/

The result is that I can go to umbrellas.soap-site.com or trampolines.soap-site.com and:

  1. my pseudo DNS server routes me to nginx with a wildcard subdomain
  2. nginx then proxies the request to the service (rails app) running on port 3000
  3. I am redirected to my rails app with the subdomain information attached to the request. Perfect!

Next, I’d like to use the subdomain information passed down to rails in order to propagate it to the React app, in order to select the relevant shop id to display, if said subdomain is in the stores table. Otherwise, I’d like to present a 404 not found page.

Querying for data by shop id

August 13, 2020

Today I managed to get queries working by shop id. I defined a new type on the server side and ensured that things worked in graphiql, then I migrated the graphiql query to the frontend and wired things up.

The next thing I’d like to do is probably to try to figure out subdomains, and use this to select the correct data by shopId from the frontend.

Updated seeds

August 12, 2020

A modicum of work today. I performed a few database migrations and updated my seeds.

In particular, I created a Stores table to hold records of shops in the soap site app. Fields are owner_id, is_sponsored, subdomain. I also added store_id to the products table as a key.

Next, some pre-work to be able to conditionally fetch only products for particular stores. I need to determine which store I’m currently on, too. Presumably that should be handled by routing from the rails app.

eg. maxwellshatsemporium.soap-site.com/shop should route to a particular store, and pavlovssocksescapade.soap-site.com/shop to another.

I will want to infer the store_id and then pass that to the server via a graphql query to fetch products only for that store, and then display them.

Connect with stripe only on admin page

August 11, 2020

Very small change today, just ensured that the connect with stripe button was only instantiated on the admin page.

I decided that since the STRIPE_CONNECT_CLIENT_ID would be visible anyway on the frontend via the http request to stripe in the network tab, it doesn’t matter too much if that string is present in the client code.

For secrets though, like usernames and passwords, I need to be a bit more discerning. I’ll aim to tackle that next, and try to figure out authentication for shops etc. This will probably be a key challenge. Part of this will naturally be figuring out how to authenticate to different shops with different inventories and items for sale.

Gardening + reconfiguration of routes

August 10, 2020

Today, apart from a bit of gardening (and bonus planting!) I focused mainly on using react-router-dom in my soap-site application.

In particular, I identified that it would probably be best to namespace my shop react app in the rails routes so that I could wildcard paths to the index page on the server side, and let react-router-dom handle routing on the client.

I implemented a simple new route to a new component, the shop admin page.

npx @hellsquirrel/create-gql-component create /app/javascript/components/Shop/Admin

Other today things included the identification of a couple of udemy courses that might be useful to follow up on, Complete React Developer Zero to Mastery, and Microservices with Node.js and React.

Another thing that I discovered was that apollo-boost, although it makes apollo easier to use, doesn’t yet support graphql subscriptions. See this feature request in the apollo feature tracker.

The next thing I’d like to do is to pull the stripe connect button properly into the react app, as it is currently sitting outside it. This will require me to apply some of the lessons from Full Stack React with Apollo Boost and Node.js, in terms of storing tokens in localStorage and wiring them back to the server via apollo-client and actioncable over a websocket.

I’d also like to store authenticated session state in a higher order component and wrap my Root object in it. For that matter, I’d also like to implement authentication! Last of all, I’d like to track which particular shop it is that one has logged into / navigated to. This element of state also need to be stored as a token in localStorage.

But after figuring out these things, I believe the main initial architectural challenges for the soap site POC should have been solved.

I will then want to build out a bit of configurability in the /shop/admin page (inventory + stock levels, as well as a shop open/close toggle), have a /shop/user page for tracking orders + also configuring delivery address + contact details.

And finally I’d like to deploy the thing. Probably heroku is a safe bet for a starting point. Then maybe a cloud provider if I want to move to something larger later.

A few other thoughts for the POC. Stripe connect only for now (braintree can come later), with profit model a percentage of each transaction / sale (which is quite achievable using Stripe’s api). And potentially a tiny subscription fee as well (5 USD/month seems maybe reasonable). A boolean in the relevant model that flags whether an account is sponsored and therefore has no billing.

While in alpha, there will be no sign up page for self service shop creation, and I will just insert credentials by hand. Ultimately, though, I’d want to implement this functionality before beta.

Audited section 5 through 7 of the full stack react with apollo course

August 9, 2020

Today I audited sections 5 through 7 of the full stack react with apollo boost course.

One thing that I’ve noticed is that errors are not handled properly per the course instructions, I think that there has been a change in a library. Maybe one needs to set the errorPolicy for the apollo client?

Regardless, I feel that now I’m starting to reach saturation point in terms of learning new things … certainly learning how to handle authentication and pass jwt tokens between client and server using the apollo client was very useful. I think now it is approaching the time when I should start trying to apply some of this knowledge.

Also, since the aforementioned course uses react router and react component hooks, it might be wise to bounce back to the other course for a bit and attempt to tear through another few sections.

So over the next day or two I might switch back to execution mode … anyway I’ll see how I go.

More learning

August 8, 2020

Today I:

  • Learned about react-router-dom, and how that could be used to provide different routes for a front end application. This will be quite useful when I try to implement admin pages, as well as sign in and sign up pages for instance in the soap-site. (npm install react-router-dom to use)
  • Learned about how to wire up apollo-boost and react-apollo to fetch data from an express backend.
  • Gained some small exposure to hooks (stateless functions) in React.
  • Understood a bit about how to use bcrypt to encrypt data in a pre save hook middleware for security.

In particular, I worked through section 4 and about half of section 5 of the new course.

Worked through queries + mutations, on to apollo client

August 7, 2020

Today I worked through the queries + mutations section of the full stack react with graphql and apollo boost course, and made a start on the apollo section using create-react-app to create a client.

npm install react-apollo apollo-boost jwt-decode

was the magic command.

I’m looking forward to the next few lectures, hopefully it helps to build in my mind better intuition for using apollo in a client-server implementation. Evidently I’d be using rails as the server, and react as the client for where I’d eventually want to deploy this knowledge.

Audited first couple of sections of graphql with apollo course

August 6, 2020

Today I got started with the “Full-Stack React with GraphQL and Apollo Boost” course. As discussed previously, I thought it would be useful to first focus on learning apollo and graphql a bit better before trying to progress my soap site application.

The main reason for this is that I am after displaying only certain information to certain users in the soap site app for different shops (also, how do I want to route for different shops? do I want a semi-personalised url, eg mycakeshop.soap-site.com?), and to do that I need to have a firmer grip on the requisite tech rather than just throwing code in an editor and hoping something sticks. Of course, that is sometimes a good way to get started, but one needs to iterate that with learning. Which is what I plan to do over the next few days.

As mentioned, today I got started on said course. It uses mongodb instead of postgres, and uses mongodb atlas for a cloud database (an interesting choice), and heroku for deployment of a node.js application. So node.js for the backend, react for the frontend, graphql for the schema, mongodb for the database, apollo boost for the glue between node.js and react.

I’ve actioned the first couple of sections now – essentially enough to wire up a connection to a cloud database on mongodb atlas, and wire up graphiql and graphql for a simple stub schema for express. I look forward to learning a bit more about apollo in later sections. Apparently apollo boost makes it very straightforward to write terse code for setup of apollo in an application. If so, this is good news, because the evil martian tutorial setup for same looked a bit verbose to me – although that could just have been because they wanted to get a bit fancy and do caching with subscriptions etc.

Nonetheless I feel that I’ve made a good start on this today, hopefully I have a bit more time to get solidly into this new course shortly.

Progress on a number of fronts

August 5, 2020

Fusion / baseload generation

  • I’ve been pleased to hear recently that the Wendelstein 7-X stellarator project, although delayed by the pandemic, is progressing, and they look set to achieve effectively a steady state plasma in 2022 (if all goes well).
  • The ITER mega-project is also gathering pace. First beams are supposed to be 2025 I think?
  • Tokamak energy and HB11 seem to also be interesting outfits to watch.

Aerospace

  • Reaction engines continues to do well and move from strength to strength. They are also just one of many companies in aerospace who are working on interesting things at the moment; indeed the sector seems to be experiencing something of a renaissance. Last that I checked, I believe that they were on track to build a prototype spacecraft based on their technology by 2025.

Mathematics

Welfare

  • I am excited that there is finally political will to provide social housing to a number of needy individuals in my neck of the woods – even if it took a pandemic to summon the political capital and clout to get it done.