0

I have a code editor (using HTML/CSS/JS only) called https://quarkedit.ga

I'm trying to add a new feature, sort of like how https://scratchpad.io does.

The feature is this: Whenever a user comes to https://quarkedit.ga redirect to a randomly generated code plus the domain (like https://quarkedit.ga/green-panda-2066) and the next time the user visits the page reload that code.

My design for this is as follows:

When user comes to quarkedit.ga, get the pathname. If pathname exists in database (using Firebase for database), display code, else redirect back to quarkedit.ga and generate a new random code and go there.

When a user leaves quarkedit.ga, get the code and save it in the database with the pathname as key.

So I tried to implement this, and I ran into a problem. https://quarkedit.ga/blahblah gives me a 404, because there is no html file there.

So here is what I need help with: How do I make that step work, like make it so that blahblah goes back to the quarkedit.ga but keep blahblah in the URL so I can still access it?

I would like to use only Html, css, or js in this.

halfer
  • 19,824
  • 17
  • 99
  • 186
Sheshank S.
  • 3,053
  • 3
  • 19
  • 39

1 Answers1

1

Basically, you need two things:

  • single entry point web app configuration
  • JavaScript routing starting from your entry point

The single entry point configuration will look a lot like the answer I've posted on the other QA:

Options +FollowSymLinks -MultiViews 
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.html [NC,L,QSA]

If a user has a valid URL it will be served. Everything else will end up at index.html. Either way, the URL in the browser will not change.

The next step depends on your actual implementation; you may:

  • generate physical files on those URLs, then you are all set. The built-in routing of the web server should be enough. Storing URLs in a database may not be necessary.
  • store the content of the codes pages in a different location, then a custom redirect based-on a database-lookup may be necessary. In the beginning a simple window.location.replace(codeUrl); could be enough. In the long run, you may want to take a look at a routing component, e.g. router.js, navigo, or Crossroads.js.
  • store the content of the codes pages in the database and load it into your editor when needed. A database lookup is always necessary.

When a non-existent URL is requested you could use that URL as a starting point for a new empty code page.

As suggested by Roko, avoid creating and storing the code and associated URLs to early. Actually, I would suggest requiring the user to save the file manually via clicking a button. If not saved, everything is temporary, and the content is gone when the browser window is closed. For example, this online regex tester works like that.

wp78de
  • 18,207
  • 7
  • 43
  • 71
  • Is there any way to do this with like a simple html/css/js hosted on github.com – Sheshank S. Jun 09 '18 at 05:16
  • You mean GitHub pages? This is not exactly you have asked for in the first place. I don't know but you will probably run into any number of limitations doing so. – wp78de Jun 09 '18 at 05:35
  • Yeah github pages – Sheshank S. Jun 09 '18 at 05:35
  • You would have to piece a lot of things together you would get out of the box with a regular web server. First stop, how to do the rewrite as shown above: https://stackoverflow.com/questions/13446435/is-there-an-alternative-to-htaccess-for-github-pages – wp78de Jun 09 '18 at 05:37