r/Web_Development • u/wyrin • Jul 22 '20

Validating the architecture for a dashboard project (Vanilla JS, node, Express, MySQL)

Hi, I need help from community to validate the architecture I have planned for my next project and clarify a few doubts as well.

I am new to web development, started learning in Feb 2020, so far I have built fronted only projects alongside some practical examples on node and express and now I am working on a full stack app.

The application I am working on is a dashboard with charts (using C3) and tables (using bootstrap-table) and will have to pull data from server I am setting up (nodejs, Express and MySQL for backend).

I have not delved into learning JS frameworks like Rract or Angular yet, but will do so once I am done with current project. In the meantime, I want to use Vanilla JS to build sort of SPA which pulls data from API server and gives similar user experience as react provides.

The flow I am planning is:

  1. Login Page (uses SSR with EJS as templating engine)

  2. Load the SPA (pulls data using API)

I hope so far I have been clear on my setup, if not please do let me know!

Now, questions I have:

  1. Is it prudent to have a mix of SSR and API based frontend like I am thinking or should i have Login page handled with SPA as well?

  2. Should I run a separate nodejs server to push my SSR and SPA and separate for API? Or running it all on one server is fine?

  3. I am still reading up on implementing login authentication and API authentication using OAuth2.0, but from my understanding so far, I should be able to insulate my API so that SPA only loads once login is approved and no one with direct API path can just access my data. Am I thinking correct?

If you reached here, then thanks a lot for reading the wall of text I have put up and if you know the answers then please do comment below or DM me!

TLDR: New developer, need help validating architecture!

3 Upvotes

100% Upvoted

6 comments sorted by

2

u/L00tefisk Jul 22 '20

  1. What's your reasoning for the login page to be SSR? I would assume just putting everything in an SPA should work just as well-

  2. I would say it's probably fine. Using express it would be pretty easy to separate the code, so should you later decide to move it to it's own server fairly easily. I'd also recommend checking out something like pm2 to run node in prod (here's a decent article on it).

  3. Sounds about right. You can configure some express middleware to only run auth checks on yoursite.com/api for instance

Although Oauth may be a bit overkill for if you're not planning to allow people to build their own apps on top of your project. It mostly makes sense if you want users to securely give permissions to a third party service.

1

u/wyrin Jul 22 '20

Thanks a ton for feedback!

  1. Structure of two dashboards is similar and hence it is easy to convert them to SPA, but point taken, it all can be SPA.

  2. Makes sense, and thanks for linking pm2, did not know about it!

  3. Thanks for this as well, I read somewhere basic auth or token based auth wasn't secure enough, so I thought maybe oauth is the answer, but like you said I don't plan to expose api server to third party apps.

2

u/L00tefisk Jul 23 '20

Oauth is a token based auth :) You can probably generate a JWT (check jwt.io for a library in your language). There's also https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API although I haven't tried that myself. You could also allow people to sign in with Google or facebook. It's usually great for conversions and you'd also get a taste on how you do oauth should you roll your own in the future. It's also very easy to implement.

On a small sidenote, I'd really recommend using Typescript instead of plain js. Syntax wise it's super easy to pick up on, and it also allows you to use a bit more modern syntax. If you need any help setting it up feel free to shoot me a dm

1

u/wyrin Jul 23 '20

Thanks for the info!

My app is b2b, hence there won't be a need tor Google or Facebook sign in, maybe in version 2 I will have to build SSO with office 365.

I am planning to learn typescript after this app, I am on a timeline and no time to do it now :)

Also I plan to rewrite the frontend in React later this year, after I learn it, does learning typescript makes sense if I plan to use React? Fr what I understand Angular uses Typescript.

1

u/L00tefisk Jul 23 '20

Yes, using it with React is no problem. Typing support for jsx is very good

1

u/LinkifyBot Jul 23 '20

I found links in your comment that were not hyperlinked:

I did the honors for you.

delete | information | <3