I'm building a Vue app that works as a SPA that gets rendered by my Express backend.
In this Vue app I'm using environment variables. One of these variables is an API key to an external API service.
Obviously I don't want to show the whole world my API key, however after I run the build command it includes all the env variables in the Javascript files, which I believe makes it accessible to anyone.
What would be the right way to go here? Should I make a route in my Express backend that handels requests to this external API, so that I can safely store my API key on the server side?
Or is there a way to make my Vue app autonomously send requests to the external API without having to show the API key?
I'm using Vue 2 by the way.
Yes you should make a backend that will interact with API using your key instead of the front end doing that no matter which version of VueJs your are using
VueJS is front end javascript, which mean users can see the code even minified on their browser
is what you are looking for
Your could use Nuxt, which is an SSR solution to build your app before shipping it to production. During the build, you can get use some sensible stuff since it will run NodeJS and will be on the server only. That way, you could for example fetch some variables and let's say get the content of some blog articles. Then, it will be available on the frontend with the end result only and all your variables safe since they will be used only on the server build.
Other solution is to use your backend as a middleware to do exactly the same process of using something sensitive and just fetch the end result.
Also, serverless functions like on Firebase or Azure are great + cheap for this purpose.
Related
I am new to blockchain development and to tendermint as well.
I already have a blockchain running locally.
Using this command starport scaffold vue I could mount a local web application. Inspecting a bit I could replicate some network requests (localhost) and I can get the ballance of current wallet (hard-coded on the request), get the current wallet from the localstorage. I'm struggling on authentication (mnemonic, wallet name and password).
However I also would like to costumize it according to my needs and I thought I could start a web application from scratch. I can see that the generated web project is importing this project https://github.com/tendermint/vue which is making a lot of "magic behind the scenes" and importing UI elements as well and I would like to have my own elements.
I don't want to re-invent the wheel and I can make some imports to help me on connection to wallet, validate authentication (mnemonic, wallet name and password), create wallet and so on.
I am trying to build a web application to connect to wallet, make transations.... but I would like to control the styles and the connections (and if possible using reactjs instead of vuejs, otherwise I dont mind learn vuejs as well).
Is this possible or reasonable? Where I can find good documentation or tutorial to guide me on customize a web application using tendermint. Honestly I searched but I am kind of lost.
Thanks
UPDATE: I found good examples and here and here. It helped me to validate mnemonics and make transactions, with my stack tech.
Because Starport generates both plain Javascript and VUE controllers, you have few options:
Create your own site re-using VUE components
Take plain JS part and build a website using whatever technology you like
Use a plain JS client for standard cosmos modules you can find on GitHub
Use Protobuf generator to generate light client code yourself
If you only need wallet functionality, #2 and #3 may work best for you because the bank module is stable and hasn't changed much in a long time.
You can find plain JS file for bank in your project:
vue/src/store/generated/cosmos/cosmos-sdk/cosmos.bank.v1beta1/module/index.ts
There is a link to starport discord channel related to frontend: https://discord.gg/CvbdYh9AWQ
I want to use next js but with express js as backend. Can I do that and if yes will it's static property of making dynamic website into static website will work as it is.
YEs It is possible . Next.js is a framework that allows you to write frontend and backend code together while building the application .In the pages directory off next app
you can find an api directory which is where the backend code is written .
you can also write backend code on functions like getServerSideProps() or getStaticProps() but it wil not be displayed on the client side.
Whereas Express is a framework specifically for backend so you dont have to write some common api code from scratch by yourselves unlike in the next.js backend.
In the end whether you should or shouldn't use express with next depends on how large and scalable you are going to build your application or not.
I have seen many people using nextjs with expressjs and without expressjs framwork. Can someone please explain why do we need expressjs with nextjs? Nextjs works as SSR without expressjs. What does expressjs add to nextjs when we use it together? Assuming that we are using different rest api server.
You don't need to use expressjs if all you want is server-side rendering. But if you want to go beyond that by adding an API, as an example, then you need to be able to override the routing and that's when you'd add expressjs in front. Express will get the request and see if it is for the API or if it's just a normal nextjs page. LogRocket has a very good tutorial on this https://blog.logrocket.com/how-to-build-a-server-rendered-react-app-with-next-express-d5a389e7ab2f/
You most likely don't need to override Next's default server. For edge cases where you do, you'll see examples showing a custom server extending Next's default. You can use whatever server framework you want – Express, Hapi, etc.
https://nextjs.org/docs/advanced-features/custom-server
I'm studying nuxt.
I leave a question because I have a question while studying.
nuxt can ssr, but ssr is known as server side rendering.
Then, I wonder where the server is.
Because vue is built on node, is the server automatically made into node server?
And, how is SEO possible if we make it with nuxt?
I understand that it is possible if you make html with MPA. However, using nuxt makes SEO possible.
So, when you create a project with nuxt, does the client make it an MPA when it makes the first request?
where the server is?
Depends... Nuxt include a node server (nuxt), but you can during the nuxt instalation merge them with other node server frameworks
when use nuxt alone or with other server-side framework?
Depends of your needs, knowledge and project.
For example I usually use nuxt alone, more apollo graphql it give me all I need. but for Shopify apps, the admin embed login is write for Koa and super easy to use so I prefers nuxt + koa when I develop this kind of app.
what means ssr?
server side rendering, the important thing is Rendering, that means nuxt (or nuxt + extra server-side framework) read the vue (js) code in the server and rendered them in Html code, after that it send the html to the client machine.
This is the reason why SEO is possible, when a web crawler visit the site it receive a fulfilled HTML page easy to read and clasify.
Nuxt has a really extensive and easy to understand guide, I recomend you follow them. Example you can use Head for edit the Header of the page,
There's a feature in Angular Universal that allows you to pre-render pages at build-time. Can this be used to pre-render all your pages and run Angular Universal without a server?
Once html pages have been pre-rendered using angular universal (using nodejs server or asp.net core server), you can use any CDN to serve the pre-generated html.
See https://universal.angular.io/overview/
Edit: have a look at the starer kit
https://github.com/angular/universal-starter
Basically, you can reuse the prerender.js file which will write the rendered html files (for specified static routes) to the dist/browser folder, or wherever you want to. This is that folder that you deploy to a static host after
Well, you're always going to need to have a server somewhere in the equation: the only question is how much you have to set it up yourself versus how much can the current crop of tools and technologies do it for you.
In this talk from Node Summit Steven Fluin from Google talks about Firebase at the end. Pay attention to the bit about 'cloud functions' (at about 20 mins). Your Angular app will be rendered on the server using Firebase cloud functions. When a user interacts with your app, some JS is run to figure out what to send down (from the Firebase server) to the user. "You don't need to set up a server at all; everything is running in Firebase."
I haven't used Firebase myself - I'm using Angular Universal, which has a Node.js server as you know - but this sounds very nice. I found setting up Angular Universal really tricky (but got there in the end).