How to develop front-end when site only works on same server as back-end

1

Hello!

tl;dr: What is a good way to handle front-end development when my method of grabbing all of my dynamic content depends on the front-end running on the same server as the back-end?

I have set up a CMS (Drupal) on a LAMP server and enabled the RESTful API to use it headless.

I can now make an XMLHttpRequest from javascript and access my content IF I’m running it on the same server.

This is exactly what I need for production, but because of cross-domain requests I can’t access the CMS for development on my local machine!

So, the way I see it I have a few ways of moving forward:

  1. Figure out how to make Drupal play nice with CORS requests, even though I don’t need it in production.
  2. Lay out the site with dummy data, patch in the proper XMLHttpRequests for production.
  3. Develop on server through ssh.
  4. Try to migrate my server’s Drupal onto a local MAMP stack without breaking anything, develop there, then try to migrate it all back.

None of which are ideal. I have been trying to do #1 but documentation is not great.

I am currently leaning toward developing on the server through ssh but the front end is fairly involved (React, webpack, etc) and it seems kind of strange to install all this stuff that is unnecessary in production.

What would you do? Do I have any other options that might be better?

Thanks!

2

Solved…ish. I would up sidestepping the problem by downloading Google Chrome Canary and opening it without cross origin security. This will work for local development and it should deploy just fine. If anyone has better ideas, I’m all ears, but this works for now!

3

I use a similar technique when I build React/Express Apps, just set up Express to allow COR and run Node on one port and the webpack dev server on another port. I just need to remember to change the request URL of my ajax calls and disallow COR before I deploy.